SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Item in list is wrapping weird

    Why isn't the "Procedure Volumes" link dropping down to the next line in IE7?



    Code HTML4Strict:
    <style>
    #reportnavigation {
       list-style: none;
       margin: 0; padding: 0;
    }
    #reportnavigation li {
       float: left;
    }
    #reportnavigation li a {
       display: block;
       background: #004D6F;
       margin-right:6px;
       margin-bottom:6px;
       text-align: center;
       color: #FFF;
       padding: 5px;
    }
    #reportnavigation li a:hover {
       background: #017db6;
       color: #FFF;
    }
    </style>

    Code HTML4Strict:
    <div style="width: 637px;">
    	<ul id="reportnavigation">
    		<li><a href="#aesthetics">Aesthetics/Dermatology</a></li>
    		<li><a href="#biomaterials">Biomaterials</a></li>
    		<li><a href="#biotechnology">Biotechnology/Cell Therapy</a></li>
    		<li><a href="#cardiovascular">Cardiovascular</a></li>
    		<li><a href="#dental">Dental</a></li>
    		<li><a href="#diagnostics">Diagnostics</a></li> 
    		<li><a href="#drug delivery">Drug Delivery</a></li>
    		<li><a href="#endocrine">Endocrine</a></li>
    		<li><a href="#gastroenterology">Gastroenterology</a></li> 
    		<li><a href="#gynecology">Gynecology/Womens's Health</a></li>
    		<li><a href="#imaging">Imaging</a></li>
    		<li><a href="#neurology">Neurology</a></li> 
    		<li><a href="#oncology">Oncology</a></li> 
    		<li><a href="#ophthalmology">Ophthalmology</a></li>
    		<li><a href="#orthopedics">Orthopedics</a></li>
    		<li><a href="#pain management">Pain Management</a></li> 
    		<li><a href="#patient management">Patient Management/Monitoring</a></li><br/>
    		<li><a href="#procedure volumes, disease incidence & prevalence">Procedure&nbsp;Volumes,&nbsp;Disease&nbsp;Incidence&nbsp;&amp;&nbsp;Prevalence</a></li>
    		<li><a href="#respiratory">Respiratory</a></li>
    		<li><a href="#spine">Spine</a></li> 
    		<li><a href="#surgery">Surgery</a></li>
    		<li><a href="#urology">Urology</a></li>
    		<li><a href="#vascular">Vascular</a></li>
    		<li><a href="#wound management">Wound Management</a></li>
    	</ul>
    	</div>
    Attached Images Attached Images

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    (I'm guessing about the behaviour you're seeing because the attachment isn't approved yet. If possible, it's better to put the image on your own dev website and give us a link to it, that way we don't have to wait for it to be approved)

    If you have got &#038;nbsp; in your text instead of spaces, that's exactly what should happen. &#038;nbsp; stands for non-breaking space. In other words, it leaves a space between the words but doesn't allow a (line) break there. You should only use it where you need to keep words or numbers together on the same line.

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

    Float the anchor and then remove the bottom margin from the anchor and put it on the list istelf because ie7 is snagging on the margin.

    Code:
    #reportnavigation li {
       float: left;
       margin-bottom:6px;
    }
    #reportnavigation li a {
       float:left;
       background: #004D6F;
       margin-right:6px;
       text-align: center;
       color: #FFF;
       padding: 5px;
        }
    That should fix it with any luck

  4. #4
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    If you have got &nbsp; in your text instead of spaces, that's exactly what should happen. &nbsp; stands for non-breaking space. In other words, it leaves a space between the words but doesn't allow a (line) break there. You should only use it where you need to keep words or numbers together on the same line.
    Gotcha, im my testing, I wanted to try and make it all one string of text with the hope it would keep it as one line and move it down to the next line instead of the text getting broken up

    Quote Originally Posted by Paul O'B View Post
    Hi,

    Float the anchor and then remove the bottom margin from the anchor and put it on the list istelf because ie7 is snagging on the margin.

    That should fix it with any luck
    In combination with adding &nbsp; to make the text one long string and your CSS changes, it looks pretty good now in IE6,7,8 and FF. Thank you!


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
  •