SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is list-style:none messing this up?

    Totally stumped here. I've isolated the problem but don't have a clue why it's happening. Here's the CSS (this is for a printed document - that's why I'm using inches):

    #printList {
    padding:1.5in;
    }

    #printList ul {
    margin-left:.3in;
    margin-bottom:.5in;
    list-style:none;
    }

    #printList h4 {
    margin-top:.2in;
    margin-bottom:.1in;
    }

    #printList span {
    float:left;
    width:15%;
    }

    #printList span+span {
    float:left;
    width:80%;
    }

    Here's the HTML:

    <div id="printList">
    <h2>Appointments</h2>
    <h3>Monday, 07/08/2013 - Friday, 07/12/2013</h3>
    <h4>Monday, July 8, 2013</h4>
    <ul>
    <li><span>Something</span><span>Col2</span></li>
    <li><span>Something</span><span>Col2</span></li>
    <li><span>Something</span><span>Col2</span></li>
    <li><span>Something</span><span>Col2</span></li>
    </ul>
    <h4>Tuesday, July 9, 2013</h4>

    </div>

    If you leave the list-style:none in the ul, it wipes out the margins on both the ul and the h4. If you put it in a browser, you can see it visually with the last h4 (Tuesday, July 9, 2013). If you remove the list-style:none, the margins behave the way I wanted them do. My questions are:
    1. What's causing this?
    2. How would I fix it, given that I want both the list-style:none and some space between the bottom of the ul and the top of the next h4?
    3. Even assuming there's an easy fix for my code, is there a better way to accomplish this? (Had I continued the code, there would be separate uls for each date and the user could choose as many dates as they want - maybe even a whole year. I'm not sure the way I have it is the best idea. For example, would this whole thing be better as one long nested list and I could put my h4s in an li with extra padding? Or something else?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Firstly, take a moment to read our tips on posting code. It makes it easier for people to help you if you post something readily usable like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    	#printList {
    	padding:1.5in;
    	}
    	
    	#printList ul {
    	margin-left:.3in;
    	margin-bottom:.5in;
    	list-style:none;
    	}
    	
    	#printList h4 {
    	margin-top:.2in;
    	margin-bottom:.1in;
    	}
    	
    	#printList span {
    	float:left;
    	width:15%;
    	}
    	
    	#printList span+span {
    	float:left;
    	width:80%;
    	}
    
    </style>
    </head>
    <body>
    
    	<div id="printList">
    		<h2>Appointments</h2>
    		<h3>Monday, 07/08/2013 - Friday, 07/12/2013</h3>
    		<h4>Monday, July 8, 2013</h4>
    		<ul>
    		<li><span>Something</span><span>Col2</span></li>
    		<li><span>Something</span><span>Col2</span></li>
    		<li><span>Something</span><span>Col2</span></li>
    		<li><span>Something</span><span>Col2</span></li>
    		</ul>
    	<h4>Tuesday, July 9, 2013</h4> 
    </div>
    			
    </body>
    </html>
    Anyhow, the weird effects you are seeing is caused by your floating of the spans. What's the thinking behind that?

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm basically just wanting a 2-column list - or I may decide on a 3-column list - and didn't want to use tables so I thought floats would keep the margins straight. I'm open to other ideas.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Just contain your floats and the margin will take effect.

    Code:
    #printList li:after{
    	content:" ";
    	display:block;
    	clear:both;
    	height:0;
    	visibility:hidden;	
    }
    #printList li{zoom:1.0}

    (Also remember to set left padding to zero on the ul as some browsers use that for the default space rather than a defaultmargin.)

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made this into a fiddle and now I see even more problems because unless you expand the window showing the results, the 2 floated span columns overlap. Here's the fiddle:

    http://jsfiddle.net/V6kZt/embedde

    Maybe I should just start from scratch and ask - what's the best way to do a 3-column layout with CSS? I had Googled it and this solution is what came up first so I used it - obviously not a good choice.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul. I posted my fiddle post before I saw your reply. I had tried adding display:block and also clear:both to the lis themselves, but it never occurred to me that where I needed those styles to take effect was AFTER the li. Thanks so much for helping me learn. : )

    What's the zoom setting for? And is this the best way to do a 2 or 3-column layout or are there better ways?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    Thanks so much, Paul. I posted my fiddle post before I saw your reply. I had tried adding display:block and also clear:both to the lis themselves, but it never occurred to me that where I needed those styles to take effect was AFTER the li. Thanks so much for helping me learn. : )
    You can read up on containing and clearing floats in the CSS faq and there's a good article here also.

    What's the zoom setting for?
    That's for forcing haslayout in IE7 and ie6 because in haslayout mode elements will automatically contain their floated children. IE6 and 7 don't understand the pseudo class :after and therefore will do nothing with it.

    And is this the best way to do a 2 or 3-column layout or are there better ways?
    It's all about context?

    If as I suspect you are creating a "tabular data table" then a table with the correct number of cells would be the appropriate element to use.

    If the data is not tabular then you can float the elements into columns as you have done but again we would really need to know if there is a relationship between columns or not. If there is no relationship between columns you could then just float two whole columns ( say column1 and column2) and then stack all the column1 stuff inside column1 (non floated) and the same for column2. That's the way you would usually create columns for laying out a page but it looks like your task is more specific and looks like tabular data.

    It's hard to give a one answer fits al because it all depends on context and what happens next. There are many ways of doing things in CSS but usually there is a right way to do it and that depends on the task in hand.

    If you float multiple items then you must make sure that each row is cleared (which the code I gave you will do) or when an item is of unequal height the next float will snag on the tallest when it wraps. Sometimes it is better to use display:inline-block instead of floats to avoid snagging (also needs another a hack for ie7 and under) but inline-block takwes note of white-space in the html and can upset pixel precision if space is tight.

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know . . . I try to hard to avoid tables that I forget that there ARE actual good uses for them. This is a calendar/agenda type display, like:

    9:45 Mary Smith
    10:00 Tom Jones
    etc.

    So it's not a table involving calculations but it IS a table in terms of data. Maybe an ok table use after all?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    it IS a table in terms of data. Maybe an ok table use after all?
    Definitely.

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THAT I can do. Thanks for helping me learn some more along the way. : )


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
  •