Forum Moderators: not2easy
I can get them working if I set the width of the UL to 22%, but setting it to 25% as below forces the last <ul> below the others.
I can't set fixed widths (i.e. px) so what can I do, am I forced to use 22% width?
/Steve
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>List OneItem 1Item 2Item 3Item 4</title><style type="text/css">
* {
margin: 0px;
padding: 0px;
}body {
background-color:#F0F0F0;
font-size: 62.5%;
font-family: Verdana, Courier, Tahoma;
}#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid;
border-bottom: 1px #CCC solid;
}#footer_box ul {
width: 25%;
float: left;
padding: 1em;
}#footer_box li {
width: 100%;
list-style: none;
line-height: 1.4em;
text-align: left;
color:#555;
font-size: 1.2em;
font-weight: bold;
}#footer_box a {
text-decoration: none;
font-size: 90%;
font-weight: normal;
}#footer_box a:hover {
text-decoration: underline;
}#footer p {
clear: both;
color: #999;
font-size: 1em;
text-align: center;
}</style>
</head>
<body>
<div id="footer"><div id="footer_box">
<div id="footer_list_holder">
<ul id="footer_list">
<li>List One</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
<li><a href="/">Item 4</a></li>
</ul>
<ul id="footer_list">
<li>List Two</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
</ul>
<ul id="footer_list">
<li>List Three</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
<li><a href="/">4</a></li>
</ul>
<ul id="footer_list">
<li>List Four</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
</ul>
</div> <!-- end #footer list holder -->
</div> <!-- end #footer box -->
<p>text</p>
<p>text</p>
<p>text</p>
</div><!-- footer --></body>
</html>
[webdesign.about.com ]
[quirksmode.org ]
#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid; // 1px
border-bottom: 1px #CCC solid; // 1px
}
#footer_box ul {
width: 25%; // Dynamic width
float: left;
padding: 1em; // Dynamic padding
}
Above you have already reserved 2 pixels for the border (thats 1 either side), and given dynamic width and padding so it will throw the last list below the others as there isnt enough room on the horizontal.
Using the percentages of say 20% will produce different results depending on the resolution of the screen its being viewed on, im a bit rusty here but i cant really see a solution for this issue unless you use javascript to actively re-write the width and padding of the child objects depending on the screen resolution whilst taking into account the border widths also, that is if your looking for a pixel perfect solution.
Any other offers on this?
So I tried removing the 1em padding on the <ul>, which worked for FF and Opera but not IE7. In IE, the rightmost list will now jump in and out of place as I change the width of the browser window. Is this a rounding error?
First off you must remove the padding from the UL and style the elements inside the LI
Secondly create a new class (I called it .short) and give the final UL a class. As an example in the CSS do:
.short {margin-left:-1px;}
And in the html for the final UL use:
<ul id="footer_list" class="short">
Now the fix doesn't make much sense to me because usually IE follows the same pattern and gives elements the same conditions all around so a bug where it gives just one solitary pixel more than needed is strange. I would have expected 2 pixel or 10 but an uneven one pixel is strange.
So anyway in IE you have 100% + 1 pixel so remove the 1 pixel and you're set.
