Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Pav
    Pav is offline
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 v FF - inline-box problem

    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Pav View Post
    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:
    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •