SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preventing Content from Splitting Across Lines

    I need help resolving an issue with my content overflowing onto the next line.

    You can see a very basic sampe at :
    http://s117780573.onlinehome.us/category.html
    Adjusting the size of your browser will show the problem if you can't see it at your current resolution.

    Here is the part of the HTML in question :

    Code:
    <div id="categories">
    <div id="category_instructions">Which Categories Interest You?</div>
    
    <div id="category_list">
    <ol class="category_options">
    <li><img class="check_img" src="CheckBoxChecked.gif" />Restaurants</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Retails Stores</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Theaters</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Gas Stations / Car Washes / Auto Repair</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Grocery Store / Farmer's Markets</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Car Dealerships</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />Post Office</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />All Other Events</li>
    <li><img class="check_img" src="CheckBoxChecked.gif" />sports</li>
    </ol>
    </div>
    
    </div>

    Basically, I have an OL (could be UL) that has several LIs in it. When the width of the page is taken up with content, the LIs roll over to the next line.

    That is all fine except for one thing. I do NOT want PORTIONS of the individual list items to get split across multiple lines. Basically, I want the image and the text for each list item to remain together.

    I can't figure out a way to do this. I've tried "display: inline-block". That works great in Safari, but not in IE of FF. I've tried wrapping each LI inside another DIV. I've tried putting DIVs inside each LI.

    How can I make the browser force any LI that would not display completely on one line to automatically drop to the next line?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    white-space:nowrap;

    I'd get rid of all the images in the HTML while you're at it. Set them as background images on the li, or on the anchors... (assuming they'll be anchors eventualy)
    Code:
    .category_options li {
      padding-left:22px;
      background:url(CheckBoxChecked.gif) 0 50% no-repeat;
      white-space:nowrap;
      }
    
    
    <div id="category_list">
    	<ol class="category_options">
    		<li>Restaurants</li>
    		<li>Retails Stores</li>
    		<li>Theaters</li>
    		<li>Gas Stations / Car Washes / Auto Repair</li>
    		<li>Grocery Store / Farmer's Markets</li>
    		<li>Car Dealerships</li>
    		<li>Post Office</li>
    		<li>All Other Events</li>
    		<li>sports</li>
    	</ol>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Zachnefein,

    Thanks for the feedback. I had never heard of the "white-space" property before. That did the trick.


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
  •