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?
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:
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.
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):
"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..
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>
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..
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.
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;}
...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.
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.
Reply With Quote
Originally Posted by dtm32236
Bookmarks