I have an issue with my menu in IE9-10. In any other browser spaces between elements are equals. But In IE it displays fixed width for each item. The behavior will be the same in other browsers if I will specify table-layout:fixed to <nav> tag, but I tryed to specify table-layout:auto with no success.
Here is Fiddle: http://jsfiddle.net/UcuBt/
Is there any way to fix it? Thanks
UPDATED
The same issue in Opera 12.15
Remove width:1%; for table-cell item, then in IE they will take space needed and won't be even cells anymore.
if that was your problem :)
Related
I have a ul with overlfow-y set to auto allowing me to have a nice scroll bar for all the li. However IE7 ignores all this and the list goes outside the container.
http://jsfiddle.net/asWeb/LnnmW/ see my code here.
I checked on the internet and the common solution was to put a position:relative to the outside div (registered_members) but it didn't work.
Thank you
Add position:relative to the ul tag. This will force IE to render the element tree correctly.
Here is my site:
http://smartpeopletalkfast.co.uk/ppp/welcome.html
In Firefox and IE8 it's fine, but in IE7 the down arrow image to the right of the big 'CHISTOPOL' heading is further down that it should be. It looks like its being pushed down a row, as if the 'CHISTOPOL' text is taking up 100% of the width.
Why is this happening and how can I stop it?
Not sure exactly what the problem is but it also happens in IE6.
You could apply the following CSS
#welcome-title-bottom {
position:relative;
}
And then add style="position:absolute;right:5px;" to the "arrow" anchor and remove the class="right" which fixes the problem for me in IE6.
Personally, I try to avoid using CSS float when I can due to these sorts of cross browser layout issues.
Try removing width:auto from #welcome-title-bottom a see if it helps.
In the nav bar on this site, we're having a problem with padding on the li items in the nav bar.
http://www.wbbearonline.com/
In Chrome and Safari, the left padding on each li item says 10, but it's actually adding a couple extra pixels (making padding 12 or 13).
Firefox and IE9 show the correct 10px.
Any ideas what might be causing this?
FireFox is not applying the a:link css property to links that have been visited, therefore those links do not receive the 3px padding. Chrome is applying it however.
To fix it, try just changing your css "a:link" rule to "a".
There might be margins or pads inherited from parent items, have you tried a css reset file(Although it may be a bit extreme for this instance)? Or setting the pads/margins further up the tree to 0?
I have an issue with list-style-image property in CSS with Internet Explorer 8
If I set
li {
float:left;
list-style-image: none;
}
each menu item is above each other. If I remove list-style-image:none, they are perfectly positioned instead, but they have the dot image. (see images)
The elements of the list collapse since you set float:left to <li/> and to the inner <a/>. There is no need to; removing float:left from <a/> solves the problem.
As for the list bullets, like said before, list-style-type:none is the way to go.
Especially for IE8, I also suggest to remove the line-height:0 in #block-menu-primary-links. It may cause the collapsing behavior.
Note: I don't really understand the suggestion by #orokusaki. Tried without position:relative;, and it works perfectly well.
I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.
I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html
The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.
I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:
This is what I expect it to look like:
I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.
I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.
Any ideas?
Thank you.
Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.
instead of putting the image as an element, try using background property. like so
ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }
note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.
Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.
Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.
Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.