Found an annoying bug today which crashed chrome and safari (so all webkit browsers?) with just CSS.
It's a hover menu, hovering over an element then displaying the next dropdown level. Works perfectly in all other browsers.
See here, top left 'rn': http://test.davebowker.com/rn-hover/
Hope someone has some thoughts, or knows a little more about webkit than I do. I'm sure it's css, as I've disabled all javascript, and also ran the dropdown in a fresh page all on its own. I also know it's the hover + display:block that is causing it. - Just not sure how to fix it. Maybe someone else has run into this bug?
Cheers,
Dave
EDIT: Included change made by Emily below. http://test.davebowker.com/rn-hover-fix/
Change
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper ul:hover {
display:block;
}
to
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper:hover ul {
display:block;
}
You don't want to display the ul when you are hovering the ul but when you are hovering the parent div.
Related
I have a large menu built from lists.
It is displaying correctly in all the modern browsers I have tried and IE8, however in IE7 the list items appear to be given large amounts of margin of varying size depending on the size of the list item (see image comparison below):
Unfortunately the debugging tools in IE7 are less than optimal and I am having a real hard time working out where the issue is coming from. The source code is a bit lengthy to post here so I have made a JSfiddle for your viewing pleasure.
View source code and working demo
Can anyone see where this mystery spacing is coming from, and how can I put it straight?
In IE7 the <ul> tags are inheriting a line-height : 1.5em, disabling it in ie7 removes the annoying spacing. Updated fiddle
This condition is the culprit
ul {
/* line-height: 1.5em; */
list-style-position: outside;
}
Additional
Ok I see what you mean about the white gap. This looks like its (surprise surprise) one of those annoying ie7 'features'. I just got round it by using a hack
ul li, ul li a {
/* Needed in ie7 to stop list items expanding vertically
*line-height:1.2em;
}
with
* html ul li a {
height:15px;
}
or
ul#map > li > a.map-item {
height:auto;
*height:15px;
}
Fiddle with no spacing in IE7
A better way would be to create an IE7 only stylesheet and declare this as standard rather than relying on a hack.
Have you tried adding CSS to reset all the styles to the same for all browsers?
By including a reset CSS file such as: http://meyerweb.com/eric/tools/css/reset/ may help with your issue.
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
I have a site at http://www.dellsvet.com/ which is being affected by a bug in IE6. The page will only show what will fit in the viewport, and you're unable to scroll down in IE6. I thought that I was dealing with the unscrollable content bug detailed here: http://www.positioniseverything.net/explorer/unscrollable.html -- but it's not a match as far as I can find. I've been tinkering with this for a while with no result.
Does anyone have any insight on this bug? I've got a feeling this is something simple staring me in the eye, but I'm missing it.
Thanks.
You should consider not caring about IE6 because it's becoming more and more rare. Nevertheless, you asked a question, so I'm going to answer it.
Simply remove position: relative and z-index: 1 from #container.
Doing that fixes IE6, and I did not notice any differences in IE7/IE8 or Firefox.
Bonus, because I'm nice:
To fix the menu buttons, add this to your CSS:
.ie6 #nav li a { zoom: 1; display: inline }
Thanks to your use of HTML5 Boilerplate, you have that nice easy way to feed CSS to IE6.
To get (the drop downs) ul#nav li:hover ul working in IE6, you can use Whatever:hover.
Other than the above issues, that page looks fine to me in IE6.
Normally I'm able to fix my HTML errors by myself since it's not that complicated, but this time, I'm having a hard one.
I decided to change my navigation on my website and most of it works well & most browsers displays it correctly.
Where my problem is tho, is that I have a 5-6px margin I cannot find where is coming from. The link & image showing my problem will be below.
My second problem is that IE7 shows a huge margin, and again, I cant spot where it's coming from.
The webpage URL is: Deaglegame.net & below here is the image:
I'm leaving for work in a couple hours, so if I dont reply it's not because I dont wanna reply, I'll check this thread as soon as possible, but any help is greatly appreciated!
Thanks to anyone willing to help!
The IE7 Issue is due to compatibility view. This will be forced on you by default if you are visiting the page through an intranet address. You can get around this issue by dropping the bottom padding and setting the height to 175px: for the main div. This also seems to fix the margin issue when running compatibility view.
You menu item list is somehow causing the margin issue outside of compatibility view, I would suggest when running IE to hit F12 and that should open Developer tools, that is how I found these settings that needed to be adjusted.
#Mmerrell's fix for div#main should sort one half of the issue. Next comes #Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.
/* deaglegame.css (line 48) */
#navigate li:hover a span,
#navigate li.hover a span,
#navigate li.active a span {
/* removed padding: 12px 0 0; */
}
/* deaglegame.css (line 30) */
#navigate li a span {
cursor: pointer;
float: left;
height: 38px;
line-height: 2.5;
/* removed padding: 12px 0 0; */
position: relative;
}
Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.
You may want to consider using YUI CSS reset in the future (or perhaps even integrating it now), http://developer.yahoo.com/yui/3/cssreset/ . I've found it helps me considerably when designing cross-browser compatible sites, and has almost eliminated weird margin or padding errors I come across.
Check the image below, which might solve your first problem. Try to specify a lesser value for the padding there. Consider using a tool like firebug to resolve this kind of issues.
I have a webpage that uses sprites for its navigation link. In IE7 sometimes the links are not clickable. It works fine in IE8 and Firefox. Anyone encountered this before?
http://blazemanifesto.com
Thanks.
Edit
To clarify, on my computer, everything works fine. (Vista, IE8, Firefox 3, Chrome, Safari). I had a complaint from some users that the main nav wasn't clickable. Honestly, I thought "user error" and didn't look much further. Last night I saw my wife browsing the site (Vista, IE7), and noticed some times when she hovered over a link it was not clickable. The mouse pointer did not turn into a hand, and the link itself did not turn white. Clicking did nothing. Some links work fine, some are sporadic, some never work.
I've never seen this before, so I decided to ask you guys.
It seems that IE7 doesn't like that you have assigned the background image to the container .nav and that just shines through the transparent backrounds of actual links.
When I set the background image to the links directly, they started to work just fine. I suggest you do the same.
BTW, instead of writing long lines like these:
.nav .vision a:link, .nav .vision a:visited { ... }
.nav .vision a:hover, .nav .vision a:focus, .nav .vision a:active { ... }
I would just use:
.nav .vision a { ... }
.nav .vision a:hover { ... }
The first selector targets all A elements in whatever state they are and a:hover overrides that when the cursor is over A. (I guess you don't really care about all those :focus and :active states.)
Do you care about IE6? You have lots of layout/image problems there.alt text http://ejgejg.com/test/test.jpg
Just use Firefox. :)
Honestly, I think you'll need to use a strict dtd:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
See more on the IE blog.