SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    IE7/6: prob with <br> inside li's...

    hi,

    this one has me stumped..
    http://mayacove.com/dev/css/nav_test.html

    IE7 & 6 don't like the <br>'s inside the li's.. how do I solve this please.. (I might have to do this one with images.. )

    I can't set widths for these li's, because the content on all of them is different amount of copy, as you can see (but not sure setting widths would solve the problem); is there a way to solve this problem for IE7 & IE6 please.. thank you very much..

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The display:inline must be removed from the same block as the display:inline-block or the element never gets a chance to obtain haslayout. (See my section on display here.)

    using valid code would be like this:

    Code:
    #nav ul li {
        text-align:center;
        display:inline-block;
        padding:0;
        margin-left:10px;
        border:1px solid blue;
    }
    * html #nav ul li{display:inline;}/* ie6*/
    *+html #nav ul li{display:inline;}/* ie7*/
    I hate those invalid hacks (e.g."*display")

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could split the text in spans:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
    <style type="text/css"> 
    body { margin:100px 0 0 0 ;  font: normal 12px/18px arial, helvetica, sans-serif; color: #666;}
    #wrapper {margin:0 auto; width:900px; position:relative;   }
    a, a:visited {color: #666; }
    #nav {width:900px; margin:0 auto; border:solid 1px red; }
    #nav ul {list-style:none;  margin:0; padding:0; }
    #nav ul li { text-align:center; display:inline-block;  padding:0; margin-left:10px;  border:1px solid blue; *display:inline; }
    #nav ul li a { text-decoration:none; } 
    #nav ul li a span { display:block; } 
    </style> 
     
    </head> 
    <body> 
     
     
    <div id="wrapper"> 
     
     
    	<div id="nav"> 
    		<ul> 
    			<li><a href="">HOME</a></li> 
    			<li><a href=""><span>ABOUT</span>OUR STORE</a></li> 
    			<li><a href=""><span>ORDER SAMPLES</span>FOR YOUR CUSTOMERS</a></li> 
    			<li><a href=""><span>ORDER MORE SAMPLES</span>FOR YOUR OTHER CUSTOMERS</a></li> 
    			<li><a href=""><span>ORDER SUPPLIES</span>AND MATERIALS</a></li> 
    		</ul>
    	</div>
    </div>
    </body> 
    </html> 
    ... and add you ie6 & ie7 hacks

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes that's how I had it before..

    so look what happens in IE7 (& 6) when I remove *display:inline for the li's:
    http://mayacove.com/dev/css/nav_test.html

    I think it reads display:inline-block as just display:block...

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes but the spans don't split the lines:

    http://mayacove.com/dev/css/nav_test.html


    thank you all for your help..

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #nav ul li a span { display:block; } will make the lines split when css.

    when no css... the span variant actually looks better

    about that: you should use text-transform to make your text uppercase in css also, not written directly so in html markup (<span>Order samples</span>for your customers). try it

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    yes that's how I had it before..

    so look what happens in IE7 (& 6) when I remove *display:inline for the li's:
    http://mayacove.com/dev/css/nav_test.html

    I think it reads display:inline-block as just display:block...
    I've given you the answer and the explanation and as far as I can see its working exactly as you requested

    Where do you see it going wrong?

    When you set display:inline-block on a block element such as the list item then it imparts haslayout on that element.

    Then in a separate rule you apply display:inline which does not remove haslayout but makes it an inline element that is in haslayout mode which makes it act exactly as inline-block.

    The display:inline rule needs to be in a separate rule or the element never gets a change to obtain haslayout. The display:inline would over-ride the inline-bock rule (which is simply a haslayout trigger in ie7 and under).

    Using the code I mentioned above does exactly what you aked for in all browers as far as I can see.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    body {
        margin:100px 0 0 0;
        font: normal 12px/18px arial, helvetica, sans-serif;
        color: #666;
    }
    #wrapper {
        margin:0 auto;
        width:900px;
        position:relative;
    }
    a, a:visited {
        color: #666;
    }
    #nav {
        width:900px;
        margin:0 auto;
        border:solid 1px red;
    }
    #nav ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    #nav ul li {
        text-align:center;
        display:inline-block;
        padding:0;
        margin-left:10px;
        border:1px solid blue;
    }
    * html #nav ul li {
        display:inline;
    }/* ie6*/
    *+html #nav ul li {
        display:inline;
    }/* ie7**/
    #nav ul li a {
        text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT<br />
                    OUR STORE</a></li>
                <li><a href="">ORDER SAMPLES<br />
                    FOR YOUR CUSTOMERS</a></li>
                <li><a href="">ORDER MORE SAMPLES<br />
                    FOR YOUR OTHER CUSTOMERS</a></li>
                <li><a href="">ORDER SUPPLIES<br />
                    AND MATERIALS</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Looks exactly the same in IE6 - Ie8. (You can find the method documented more full here in an old article of mine)

    Or did you mean you wanted a different behaviour?

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or with spans and text transformation:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    body {
        margin:100px 0 0 0;
        font: normal 12px/18px arial, helvetica, sans-serif;
        color: #666;
    }
    #wrapper {
        margin:0 auto;
        width:900px;
        position:relative;
    }
    a, a:visited {
        color: #666;
    }
    #nav {
        width:900px;
        margin:0 auto;
        border:solid 1px red;
    }
    #nav ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    #nav ul li {
        text-align:center;
        display:inline-block;
        padding:0;
        margin-left:10px;
        border:1px solid blue;
    }
    * html #nav ul li {
        display:inline;
    }/* ie6*/
    *+html #nav ul li {
        display:inline;
    }/* ie7**/
    #nav ul li a {
        text-decoration:none;
        text-transform:uppercase; 
    }
    #nav ul li a span {
        display:block;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href=""><span>About</span>
                    our store</a></li>
                <li><a href=""><span>Order samples</span>
                    for your customers</a></li>
                <li><a href=""><span>Order more samples</span>
                    for your other customers</a></li>
                <li><a href=""><span>Order supplies</span>
                    and materials</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    tested even in ie5.5 thanks to ie collection and looks ok.

    one thought: you should check how this one looks without the css style applied and how your uppercase <br /> looks like without the css style applied.

    and sorry Paul O'B for "stealing" your code

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post

    and sorry Paul O'B for "stealing" your code

    No problems Code is for sharing

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes yes, Paul O'B, your works indeed.. thank you very much!!

    http://mayacove.com/dev/css/nav_test.html

    and like noonnope suggested I did text with text-transform:uppercase..

    thank you very much (this inline/inline-block stuff can be tricky sometimes..;-)

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should put "Home" not "home" and so on for the cases where the page is viewed w/o author style

    and i still think you should use <span> for the first line of text for the same reason

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh, I see.. what happens when you take out css.. of course they look better in one line.. so I did with spans..
    http://mayacove.com/dev/css/nav_test_spans.html

    so the spans are display:block now, I've had problems in the past putting 'block' elements inside 'inline' elements.. (sometimes 'block' elements inside 'inline' elements remain 'inline'....) this inline/block stuff can be confusing sometimes.. I had a simliar problem a few weeks ago, only here the <li>'s were stacked, prob was spacing in IE6 (spacing beneath and above <a>'s..)
    http://www.sitepoint.com/forums/show...74#post4669874

    Paul O'B, will definitely check your article you mention.. thank you very much to all for your help..

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. a block element put inside an inline element = big no-no!

    2. display:block on an inline element = inline element

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just because you give the <span> a display:block it doesn't change the fact it is still an inline element. It is block level but not an actual block element. Don't confuse it . If you're going to use display:block on an inline element to begin with, why not just start it out as a block?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're going to use display:block on an inline element to begin with, why not just start it out as a block?
    probably because:

    "1. a block element put inside an inline element = big no-no!"


  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    probably because:

    "1. a block element put inside an inline element = big no-no!"

    If he is going to break that rule to begin with he should switch up the HTML to begin with
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you're going to use display:block on an inline element to begin with, why not just start it out as a block?
    would you use display: block on an already block element? you only use display: block when you can't have a block element, but you need the feature... isn't it?

    so, i'm a little confused about what you're trying to suggest

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    would you use display: block on an already block element? you only use display: block when you can't have a block element, but you need the feature... isn't it?
    It's bad practice to change the display type of elements to begin with (and by changing display types, I mean switching inline to block and vice versa)

    As I said earlier, if you need the capabilities of a block element, make it a block to begin with (unless you can't, aka an anchor)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

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