SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member bws's Avatar
    Join Date
    Mar 2005
    Location
    United Kingdom
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrapping in a UL

    Can someone explain to me why this works in firefox but not IE? It's supposed to show two images on each line (the br should cause the linebreak) but in IE it shows all four images on one line. What am I doing wrong?

    Thanks for any help

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
     
      ul.gallery 
      {
        margin:0;
        margin-top: 15px;
        padding:0;
        list-style:none;
        line-height:1.4em;
      }
     
      .gallery li 
      {
        display:block;
        float:left;
        margin:0px;
        padding:0;
        width: auto;
        height: auto;
      }
    </style>
    
    </head>
    
    <body>
    
    <ul class="gallery">
        <li>
                  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
               </li>
                <li>
                  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
                </li>
                <br style="clear: both;"/>
                <li>
                  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
                </li>
                <li>
                  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
                </li>
    </ul>
    </body>
    </html>
    Brilliant Web Solutions - Web Design and Programming Services
    ASP.NET & PHP Specialists

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

    For once IE is doing something correct

    You cannot place any html between list tags.
    Code:
     <li>
    			  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
    			</li>
    		    <br style="clear: both;"/>
    			<li>
    			  <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
    			</li>
    You cannot do that and if you validate your code before looking for errors it would tell you so straight away

    You will have to do something like this instead

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
     
      ul.gallery 
      {
    	margin:0;
    	margin-top: 15px;
    	padding:0;
    	list-style:none;
    	line-height:1.4em;
       clear:both
      }
     
      .gallery li 
      {
    	display:block;
    	float:left;
    	margin:0px;
    	padding:0;
    	width: auto;
    	height: auto;
     }
    </style>
    </head>
    <body>
    <ul class="gallery">
     <li>
      <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
     </li>
     <li>
      <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
     </li>
    </ul>
    <ul  class="gallery">
     <li>
      <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
     </li>
     <li>
      <div><img src="http://www.sitepoint.com/images/sitepoint-logo.gif" /></div>
     </li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Member bws's Avatar
    Join Date
    Mar 2005
    Location
    United Kingdom
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks for the prompt response.
    Brilliant Web Solutions - Web Design and Programming Services
    ASP.NET & PHP Specialists


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
  •