I have a three year old website, which has been perfectly functioning, until now. The new version of the Google Chrome browser, v.41, experiences a strange bug: I have an IMG tag inside of an A tag, and when I click on it, the image randomly changes position instead of going to the where the link is linked. This only occurs with the latest Chrome, v.41. Older versions of Google Chrome and other browsers do not experience this problem. I have tried this on both Windows 7 and OSX 10.10
I copied the code to jsfiddle in case you want to look at it. I have not used any outdated CSS functions and there is no JavaScript used at all.
The linked image's code:
<a class="insImg" href="#">
<img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
Dům 1
</a>
I would just like to know whether there is something wrong, or if it is just this version of Google Chrome.
As you've mentioned it looks to be a bug with Chrome.
I've played with the code a bit and this part seems to have been part of the issue:
ul li img {
width: 150px;
position: absolute;
top: 0;
left: 0;
}
I don't understand why clicking on the anchor causes this positioning to be dropped, but as a quick workaround you can just move the positioning into the anchor like so:
ul li a {
text-decoration: none;
-moz-opacity: 1;
opacity: 1;
color: #fff;
position: absolute;
top: 0;
left: 0;
}
ul li img {
width: 150px;
}
See the updated fiddle below.
https://jsfiddle.net/2d4b1mLm/5/
Related
I can't figure out why our website has such a large width. Here's a link to it: https://85.25.242.165/lunatic/default/index
As you can see there is a scroll bar at the bottom and the whole width is roughly double the size of the website. I've tried finding an item that is so wide via Firebug but no luck. Everything is within the original width of the website.
We're using the Web2py framework.
There's your problem
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
}
add
body {
overflow-x: hidden;
}
and everything should be fine.
I had a similar problem which occured in Firefox Mac only, when I added this code:
body {
transform: translateZ(0); // This enables hardware acceleration for smoother animations.
}
As the comment says, it is supposed to smooth animations but it ended up ruining my site on FFv24 Mac.
I just discovered this strange problem on an <a> element. I wanted to make a css only button with a "pushed down" animation.
More or less something like this:
.button:active {
position: relative;
top: 10px;
}
The problem is that link doesn't seem to work if you do the mousedown below the text and release when the text has moven below the pointer (the animation runs correctly but onclick or href don't work). You can see the "bug" or whatever it is in this fiddle:
http://jsfiddle.net/H9RgD/
I already tried different things, like using padding to create the animation but it still doesn't work. I can confirm it doesn't in Chrome 22 (latest version as of today). Why does this happen? How can I get around this problem to animate a css only button?
Cannot answer "why" (I think it may be a bug). It seems like I recall encountering a similar issue before with Chrome, and came up with a similar workaround as I offer here. Somehow, adding the "overlay" of the pseudo-element causes the whole to become "clickable." In your case, I noticed that if I clicked toward the top of the div, it also did not register, but when I added the top adjustment to the :before in the :active state, that seemed to be resolved also.
This fiddle seems to have a working solution. HTML is the same as your fiddle (except I added the content to the alert):
HTML
<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>
CSS
.tabs-container div{
display: inline-block;
background: whitesmoke;
padding-bottom: 5px;
font-size: 25px;
border-bottom: 5px solid grey;
position: relative;
}
.tabs-container div:active{
top: 10px;
border-bottom: 0;
}
.tabs-container div:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tabs-container div:active:before {
top: -10px;
}
For the life of me, I cannot figure out why the code at www.moosecodes.com works on Safari and Chrome but when I open it with Firefox the browser doesn't recognize any of the line breaks!
i.e. <br/>
I have a suspicion that it is because I haven't declared a doctype, but its just a regular old run line break that isn't being interpreted. Anyone know the answer?
EDIT: To see what I mean, go to the site and click on "resume" then click on "Experience" or "Research"
(source: moosecodes.com)
You have everything on your page set to position: absolute with the following CSS.
* {
color: #C8C8EB;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
text-decoration: none;
width: 100%;
}
That's a very bad universal style to have, only apply position: absolute to what you need it applied to and it'll fix your <br /> problem (and probably others too!). or you could target the <br /> directly to set it back to default.
br {
position: static;
}
I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).
The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):
Looking at things in Firebug, here's the drop down rendered in an unordered list:
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
The autoCompleteList class looks like this:
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
And the resulting div for the modal popup looks like this:
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
With the following modalPopup CSS class:
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
My assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)
Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by the Ajax Control Toolkit using !important?
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
I know it's a bit of a hack but if you haven't tried it yet it might be worth a shot?
Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.
I have came across same problem.
My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.
Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D