www.webdeveloper.com
Results 1 to 11 of 11

Thread: UL and LI margin/padding

  1. #1
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779

    UL and LI margin/padding

    Hey guys,

    I'm trying to put a 20px bottom padding (or margin - it doesn't really matter which one) on LIs, and it was working fine the other day, and now it's not. Nothing's changed. I've tried doing different combinations of padding and margin on both the UL and LIs and I can't figure it out. Can anyone see why this isn't working?

    HTML Code:
    <ul id="thumbnails" style="width:100%; margin-top:10px; padding-left:2%;">
            <li style="width:25%;"><a href="bastille.html" class="large"><img src="images/bastille.jpg" alt="Bastille Collection" width="110" height="109"><br>Bastille</a></li>
            <li style="width:25%;"><a href="bellani.html" class="large"><img src="images/bellani_cherry.jpg" alt="Bellani Collection" width="110" height="109"><br>Bellani</a></li>
            <li style="width:25%;"><a href="berkshire.html" class="large"><img src="images/berkshire.jpg" alt="Berkshire Collection" width="110" height="109"><br>Berkshire</a></li>
            <li style="width:25%;"><a href="corsica.html" class="large"><img src="images/corsica_maple.jpg" alt="Corsica Collection" width="110" height="109"><br>Corsica</a></li>
        </ul>
    css:
    Code:
    #thumbnails li {
    	position:relative;
    	float:left;
    	display:inline;
    	text-align:center;
    	margin-bottom:20px;
    }
    You can check it out here

    Thanks a lot.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You won't get the padding-bottom to stick to the "<li>"s as effectively as you can get it to work for the parent, the "ul".

    Also, since the UL width is "100%;" and the LI width is "25%", re-sizing the browsers triggers the pixel-rounding error... the last LI will sporadically 'drop below'. That is because "100% width, which is "25% + 25% + 25% +25%", upon sizing down just *one pixel*, the width is 100% +/- 1px.

    Therefore, I tried making the LI width be 24%, and the problem goes away as the sum of the four LI's will always be less-than 100% the total width of the UL.
    CSS:
    <style>
    #thumbnails {width:100%; margin-top:10px; padding-left:2%; border-bottom:2px solid red; padding-bottom:20px;}

    #thumbnails li {position:relative;
    float:left;display:inline; width:24%;
    text-align:center; margin-bottom:20px;}
    </style>
    HTML:
    <ul id="thumbnails">
    <li><a href="bastille.html" class="large"><img src="images/bastille.jpg" alt="Bastille Collection" width="110" height="109"><br>Bastille</a></li>

    <li><a href="bellani.html" class="large"><img src="images/bellani_cherry.jpg" alt="Bellani Collection" width="110" height="109"><br>Bellani</a></li>

    <li><a href="berkshire.html" class="large"><img src="images/berkshire.jpg" alt="Berkshire Collection" width="110" height="109"><br>Berkshire</a></li>

    <li><a href="corsica.html" class="large"><img src="images/corsica_maple.jpg" alt="Corsica Collection" width="110" height="109"><br>Corsica</a></li>

    </ul>
    Last edited by WebJoel; 12-28-2007 at 03:32 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    Also, since the UL width is "100%;" and the LI width is "25%", re-sizing the browsers triggers the pixel-rounding error... the last LI will sporadically 'drop below'. That is because "100% width, which is "25% + 25% + 25% +25%", upon sizing down just *one pixel*, the width is 100% +/- 1px.
    I did run into that problem in IE6. So I already had what you've suggested... 24% width LIs and 2% padding-left. Anyway, I've added the padding-bottom:20px; to the UL and still nothing.

    You can see the changes on my development site at:
    http://www.foremostgroups.com/dev/20...ath/index.html

    I don't get why this won't work.

  4. #4
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    oh - and to add to the 50% + 50% != 100% thing, I also had to add clear:left; to every fifth LI, otherwise they would shift position when resizing the window in IE6.

    here's the real code (I gave the simplified version earlier):
    HTML Code:
    <ul id="thumbnails" style="width:100%; margin-top:10px; padding-bottom:30px; padding-left:2%;">
            <li style="width:24%;"><a href="bastille.html" class="large"><img src="images/bastille.jpg" alt="Bastille Collection" width="110" height="109"><br>Bastille</a></li>
            <li style="width:24%;"><a href="bellani.html" class="large"><img src="images/bellani_cherry.jpg" alt="Bellani Collection" width="110" height="109"><br>Bellani</a></li>
            <li style="width:24%;"><a href="berkshire.html" class="large"><img src="images/berkshire.jpg" alt="Berkshire Collection" width="110" height="109"><br>Berkshire</a></li>
            <li style="width:24%;"><a href="corsica.html" class="large"><img src="images/corsica_maple.jpg" alt="Corsica Collection" width="110" height="109"><br>Corsica</a></li>
            <li style="width:24%; clear:both;"><a href="delaware.html" class="large"><img src="images/delaware.jpg" alt="Delaware Collection" width="110" height="109"><br>Delaware</a></li>
            <li style="width:24%;"><a href="hawthorne.html" class="large"><img src="images/hawthorne.jpg" alt="Hawthorne Collection" width="110" height="109"><br>Hawthorne</a></li>
            <li style="width:24%;"><a href="juliet.html" class="large"><img src="images/juliet.jpg" alt="Juliet Collection" width="110" height="109"><br>Juliet</a></li>
            <li style="width:24%;"><a href="laguna.html" class="large"><img src="images/laguna.jpg" alt="Laguna Collection" width="110" height="109"><br>Laguna</a></li>
            <li style="width:24%; clear:both;"><a href="northern_lights.html" class="large"><img src="images/northernLights.jpg" alt="Northern Lights Collection" width="110" height="109"><br>Northern Lights</a></li>
            <li style="width:24%;"><a href="palermo.html" class="large"><img src="images/palermo.jpg" alt="Palermo Collection" width="110" height="109"><br>Palermo</a></li>
            <li style="width:24%;"><a href="tuscany.html" class="large"><img src="images/tuscany.jpg" alt="Tuscany Collection" width="110" height="109"><br>Tuscany</a></li>
            <li style="width:24%;"><a href="urban.html" class="large"><img src="images/urban.jpg" alt="Urban Collection" width="110" height="109"><br>Urban</a></li>
            <li style="width:24%; clear:both;"><a href="wingate.html" class="large"><img src="images/wingate.jpg" alt="Wingate Collection" width="110" height="109"><br>Wingate</a></li>
            <li style="width:24%;"><a href="yorktown.html" class="large"><img src="images/yorktown.jpg" alt="Yorktown Collection" width="110" height="109"><br>Yorktown</a></li>
        </ul>
    Code:
    #thumbnails li {
    	position:relative;
    	float:left;
    	display:inline;
    	text-align:center;
    	margin-bottom:20px;
    }

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    "clear left" on every 5th element is only to remove the "float left" default from the LI. Nothing surprising here.

    I tried the code I posted, -saw improvement and 20-px 'padding' on the UL. I was using the HTML-editor (IE-based), -are you using Firefox? If so, you will probablyhave to state a height for either the LI's or the UL to get this to work. And, have the image actually be loaded. Using IE-based editor, the 'placeholder' shows, but in Fx with no actual image present, it collapses..
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    Thumbs up

    (returned from my supper) ...

    Hey the site is looking good.

    Looking at this, I'd almost make a NEW "UL" for every 'row' and share the class for it. That way, you could assure a non-breaking width for browser-width reductions.

    Anyway, does this work at all? I am seeing changes and maybe "20px" wasn't enough to vertically-space the 'rows'. From a Design viewpoint, I get confused by the "names", as each new row is 'closer' to the text above it than it is from the text below it (the text below is the relevant text, the name of the item)..
    CSS:
    <style>
    #thumbnails {width:100%; margin-top:10px; padding-bottom:30px; padding-left:2%;}
    #thumbnails li {position:relative; float:left; width:24%;
    display:inline; text-align:center; border-bottom:1px solid red; margin-bottom:30px;}
    #thmbnails li a {insert style for class="large"}
    </style>
    HTML:
    <ul id="thumbnails"> <li ><a href="bastille.html" ><img src="images/bastille.jpg" alt="Bastille Collection" width="110" height="109"><br>Bastille</a></li> <li ><a href="bellani.html" ><img src="images/bellani_cherry.jpg" alt="Bellani Collection" width="110" height="109"><br>Bellani</a></li> <li ><a href="berkshire.html" ><img src="images/berkshire.jpg" alt="Berkshire Collection" width="110" height="109"><br>Berkshire</a></li> <li ><a href="corsica.html" ><img src="images/corsica_maple.jpg" alt="Corsica Collection" width="110" height="109"><br>Corsica</a></li> <li style="width:24%; clear:both;"><a href="delaware.html" ><img src="images/delaware.jpg" alt="Delaware Collection" width="110" height="109"><br>Delaware</a></li> <li ><a href="hawthorne.html" ><img src="images/hawthorne.jpg" alt="Hawthorne Collection" width="110" height="109"><br>Hawthorne</a></li> <li ><a href="juliet.html" ><img src="images/juliet.jpg" alt="Juliet Collection" width="110" height="109"><br>Juliet</a></li> <li ><a href="laguna.html" ><img src="images/laguna.jpg" alt="Laguna Collection" width="110" height="109"><br>Laguna</a></li> <li style="width:24%; clear:both;"><a href="northern_lights.html" ><img src="images/northernLights.jpg" alt="Northern Lights Collection" width="110" height="109"><br>Northern Lights</a></li> <li ><a href="palermo.html" ><img src="images/palermo.jpg" alt="Palermo Collection" width="110" height="109"><br>Palermo</a></li> <li ><a href="tuscany.html" ><img src="images/tuscany.jpg" alt="Tuscany Collection" width="110" height="109"><br>Tuscany</a></li> <li ><a href="urban.html" ><img src="images/urban.jpg" alt="Urban Collection" width="110" height="109"><br>Urban</a></li> <li style="width:24%; clear:both;"><a href="wingate.html" ><img src="images/wingate.jpg" alt="Wingate Collection" width="110" height="109"><br>Wingate</a></li> <li ><a href="yorktown.html" ><img src="images/yorktown.jpg" alt="Yorktown Collection" width="110" height="109"><br>Yorktown</a></li> </ul>
    Also, since every "a" in the "#thumbnails li ~ " has a class="large", take advantage of this and STYLE it in the style section as "#thumbnails li a {whatever:foo}".
    This seperates more inline CSS from the HTML, and reduces the code-weight.
    I'd even add:
    #thumbnails li img {width:110px; height 109px;}
    and get rid of the inline html " width="110" height="109" " and again, less code in the html means faster-to-load, more-to-index for 'bots, etc..

    Again, -site is looking nice!
    I build for: Firefox and tweak for IE

  7. #7
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    I'll have to try these ideas when I get back into work on Wednesday. I don't have FTP access from home (mostly because I don't want to bring work home). Anyway, I'll try this out and let you know how it works out.

    And my CSS file is around 9KB already (I think - does that sound right?). It's almost the same size as my html pages, so I was trying to use some inline styling to keep my css file size down. What do you think I should do - add more styling to an already large file, or keep it small and use some styling in my html?

    Anyway, thanks for the help. As always, I appreciate it.

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Using bottom padding on the <li>s works fine in FF, but IE6 doesn't like it for some reason. However, setting a bottom margin on the <a>s (as well as setting them to block display to accept the margin) works fine for both browsers :
    Code:
    #thumbnails a {margin-bottom: 20px; display: block;}

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by dtm32236
    ...And my CSS file is around 9KB already (I think - does that sound right?). It's almost the same size as my html pages, so I was trying to use some inline styling to keep my css file size down. ...
    Seperation of presentional from content is always desireable, -even if the content (the HTML) is small. And 9KB for a CSS file is miniscule.
    -I'd try to keep ALL my CSS in a CSS file (external, if at all possible). The cleaner the HTML is, the better spider/'bots can index, and the faster the page can load. I'd not insert 'inline-styles' into the HTML document just to keep the CSS file small..

    Typically, you could expect the CSS file to not be much more than 10% the size of the HTML file (if it is, it probably could stand optimizing, which typically results in a 30-50% size reduction), but if the HTML file is only 10-20KB, don't fret if the CSS is also 10-20KB. -You're still going to fall around 30KB total, which equates to a 7-10 second resolve time at 56-KBS, which is excellent.
    I build for: Firefox and tweak for IE

  10. #10
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    okay, that's extremely reassuring.

    webjoel and centauri, I'll try out your methods on wednesday and let you know how it works out.

    thanks again for the help.

  11. #11
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    NICE. It worked. I used some of what you've suggested, WebJoel and I took some of the inline CSS and put in in my external file. Using #thumbnails a {margin-bottom: 20px; display: block;} worked perfectly, as I'm sure a million other things would've.

    Thanks for the help guys. It looks a lot better now.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles