...

View Full Version : IE7 v FF - inline-box problem



Pav
05-23-2007, 05:35 PM
Hi guys,

This is example of my problem - I have this on other sites too.
<div id="nav_strip_blue">
<div class="float_right" >
<a href="#SkipNav" title="Skip navigation" accesskey="s"><span>Skip navigation</span></a><span>|</span>
<a href="http://www.bifm.org.uk/bifm/home" target="_blank">BIFM HOME</a><span>|</span>
<a href="http://www.fm-world.co.uk" target="_blank">FM WORLD HOME</a><span>|</span>
<a href="/Contact_form.asp">CONTACT US</a>
</div>
</div>




#nav_strip_blue A {
COLOR: #fff;
text-decoration:none;
font-size:90%;
height: 22px;
vertical-align:middle;
text-align:center;
padding: 4px 5px 0px 5px;
background-color:#2a327a;
display:inline-block;
display: -moz-inline-box; /*the line causing the problem*/
margin-left: 15px;
border-left:#2a327a solid 1px;
border-right:#2a327a solid 1px;
font-weight:bold;
}

There was a problem with FF inline-box display which I fixed with the: display: -moz-inline-box; line
So now it works in IE 6 and FF but not in IE7
Here is the link, http://www.bifmconference2007.com/

Anyone has a fix for that? I'd really appreciate as I'm totally stuck on it.

Cheers

koyama
05-26-2007, 06:59 PM
There was a problem with FF inline-box display which I fixed with the: display: -moz-inline-box; line
So now it works in IE 6 and FF but not in IE7
You have this in your style sheet:


#nav_strip_blue A {
COLOR: #fff;
text-decoration:none;
font-size:90%;
height: 22px;
vertical-align:middle;
text-align:center;
padding: 4px 5px 0px 5px;
background-color:#2a327a;
display:inline-block;
display: -moz-inline-box;
margin-left: 15px;
border-left:#2a327a solid 1px;
border-right:#2a327a solid 1px;
font-weight:bold;
}
* html #nav_strip_blue A { /* This is the Tan hack */
height: 26px;
background-color:#2a327a;
font-size:90%;
padding: 0px 5px 0px 5px;
display:inline-block;
line-height: 26px;
text-align:center;
margin-left: 15px;
}
It looks like you are not aware that the * html selector bug was fixed in IE7. So the second selector above is not targeting any element in IE7.

Anyway, is it necessary to use display: inline-block ? Could you not achieve the effect by using floats? You would avoid all those compatibility issues.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum