Width = 100% not working

Mr. Bubble

09-29-2006, 10:58 AM

hello, The box named "top" is working fine, with the width staying 100%... but the nav is too wide, although i have still only used 100%.

I would appreaciate it if somebody could figure out the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="nav">
<li><a href="#">Secured Loans</a></li>
<li><a href="#">Tenant Loans</a></li>
<li><a href="#">Mortgages</a></li>
<li><a href="#">Bridging Loans</a></li>
<li><a href="#">Commercial Finance</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div id="top">
<div id="top_l">
</div>

<div id="top_r">
</div>
</div>
</body>
</html>

html {
background-color: #ffffff;
margin: 0px;
}

body {
margin: 0px;
}

a {
font-family: Tahoma;
font-size: 14px;
color: #444444;
text-decoration: none;
}

a:hover {
font-family: Tahoma;
font-size: 14px;
color: #000000;
text-decoration: none;
}

p {
font-family: Tahoma;
font-size: 14px;
color: #000;
padding-left: 15px;
}

ul#nav {
width: 100%;
margin: 0px;
height: 95px;
width: 100%;
position: absolute;
background-color: #1a1d4f;
}

ul#nav li {
float: left;
padding: 40px 0 0 0;
list-style-type: none;
}

ul#nav li a {
font-family: Trebuchet MS;
font-size: 14px;
color: #c2c575;
text-decoration: none;
padding: 20px 25px 25px 25px;
}

ul#nav li a:hover {
text-decoration: none;
color: #fff;
}

div#top {
width: 100%;
height: 375px;
background-color: #d5d7ff;
text-align: center;
}

div#top_l {
width: 45%;
height: 375px;
background-color: transparent;
float: left;
}

div#top_r {
width: 45%;
height: 270px;
background-color: transparent;
float: right;
}

Vin0rz

09-29-2006, 01:39 PM

If you could give a link (or a screenshot if you have to) of how it looks then that would be very helpful indeed.

Arbitrator

09-29-2006, 03:30 PM

hello, The box named "top" is working fine, with the width staying 100%... but the nav is too wideThe navigation is “too wide” relative to what? I just tested that code and it looks fine to me.

Mr. Bubble

09-30-2006, 06:03 AM

Sorry. I know the code validates, and I think that it should be fine... but It's not. The nav has 100% as the width, but its more than 100% If you need to see the site, then could you please make the files and test it on your computer?

I forgot to add that it work in IE but not FF....

Thanks.

Arbitrator

09-30-2006, 07:15 AM

Yeah, you left out some important details there: the unordered list element's rendering in Firefox is too wide relative to Internet Explorer's rendering.

The problem is due to the fact that, unlike Internet Explorer, Firefox uses a default left-side padding on unordered list elements. Setting the padding-left property to a value of zero should alleviate the issue. A good rule of thumb is to override undesirable defaults by utilizing the universal selector like so:

* {
margin: 0;
padding: 0;
list-style-type: none;
font: 14px Tahoma, Geneva, sans-serif;
text-decoration: none;
}
To clarify, the universal selector selects all elements on the page. When you override browser defaults like this, you're less likely to run into browser inconsistency issues.

Mr. Bubble

09-30-2006, 09:03 AM

Uhhh, i tryed that... and it hasn't helped, its still too wide.

Arbitrator

09-30-2006, 10:08 AM

Uhhh, i tryed that... and it hasn't helped, its still too wide.I just tested my solution again and the page looks identical for me in both browsers. Are you sure you tried this?

#nav {padding-left: 0;}