I know that this has been asked a million times before, but nothing that I have tried has solved the problem. I'm working on a nice looking <select>
type thing. I'm basing it off of common CSS drop down navigation menus (using nested <ul>
s and <li>
s, just with a few tweaks. One of the tweaks is that I need it to display inline (without floating it because it goes past any other elements in the same line as it, and I don't want to float everything else around it). I've got it working well in the browsers besides ie 7 (and probably anything lower, but I don't need anything lower than ie7). Here is the code: http://jsfiddle.net/ralokz/hjDVS/2/
If you look at that in any non-ie7 browser, it looks like how I want it to:
But if you look at it in ie7, it looks like this:
One site that I saw come up a lot for the inline-block fix is this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/. That worked for ie8, but unfortunately ie7 still doesn't look right.
Is there any other way to fix inline-block for ie7? Or, is there a CSS alternative to make sure the the second level <li>
s are always vertically aligned with the the first level <li>
? Thanks!
Add:
position:relative;
to div.dropdown ul li
, get rid of the margins on div.dropdown ul li ul
and set it's top:25px
, left:-1px;
, width:100%
; finally, set div.dropdown ul li ul li
to margin:0;
delete the left-right padding, and set width:100%
...
I might have missed something, but here's a working example: http://jsfiddle.net/hjDVS/7/
I think your real problem was the absolutely positioned ul
IE6 and IE7 do support inline-block
, but they have a major bug with it: They only support it on elements which have a default display style of inline
.
Therefore span {display:inline-block;}
will work, but div {display:inline-block;}
doesn't.
If this is an issue for you, there's good news: they have another bug, which makes inline
work the way inline-block
is supposed to in some cases, so you may be able to simply use display:inline;
.
If you are going to do this, you need to be careful to make sure that only IE6 and IE7 do this, as other browsers will need a proper inline-block;
style. Some browser-specific hacks or conditional comments may be required to achieve this.
For each rule with display:inline-block
, in the IE 7 stylesheet put zoom:1; display:inline;
This works with all elements, and works about the same way.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With