...

View Full Version : 1024/9 =/= 113.7 (width doesn't add up...)



tspek
10-23-2009, 09:41 PM
The site:
www.psimet.com/psi

The problem:

The page is set to be 1024px wide.

body {width:1024px;...}

Navigation bar is set to be 1024px wide.

#nav {width:1024px;...}

A div for content is more or less set to be 1024px wide.

#content {width:1002px; border: solid 1px #999; padding:10px;}
(1024-2px of border and 20px of padding=1002px)

The nav bar is made of an unsorted list. There are 9 links to span the width of 1024px.

9/1024=113.7px
or
1/9=11%

In either case, the boxes (links) do not take up the entire width of the nav bar, leaving an undesirable "background color" when the most right link is hovered over (at which point the background color changes).

What is the deal?

CSS


#nav {width:1024px;margin-top:-21px; border-bottom:solid 0px #000;}

#content {border: solid 1px #999; border-top:none; padding:10px; width:1002px; height:auto;}

#nav ul {height:30px; width:1024px; background-color:#73797f; margin:0; padding:0; list-style:none; font-weight:bold; text-align:center; line-height:30px; cursor:pointer;}

#nav li {margin-top:0; width:113.7px; height:30px; float:left;}


HTML


<body>
...
...
<div id="nav">
<ul>
<!--CHANGE INDEX LINK TO HOME DIRECTORY WHEN UPLOADED TO PSIMET.COM!!!-->
<li><a href="index.html">Psimet</a></li>
<li><a href="bicycle-articles">Articles</a></li>
<li><a href="aluminum-wheels.html">Aluminum Wheels</a></li>
<li><a href="carbon-wheels.html">Carbon </a></li>
<li><a href="cyclocross-wheels.html">Cyclocross</a></li>
<li><a href="powertap.html">Powertap Options</a></li>
<li><a href="reviews.html">Testimonials</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div id="content">
...
...
...

Excavator
10-23-2009, 11:42 PM
Hello tspek,
I think there is no such thing as .7 of a pixel. Your 11% works though.

I'm not sure what you want to do with the longer menu items that line break. They don't fit in the 11% wide button... so I hid them for now -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 72em;
height: 760px;
margin: 30px auto;
background: #999;
}
#nav {
width: 72em;
}
#nav ul {
width:72em;
overflow: auto;
background: #73797f;
list-style: none;
font-weight: bold;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#nav li a {
width: 8em;
float: left;
display: block;
overflow: hidden;
height: 30px;
}
#nav li a:hover {
background: #00f;
display: block;
}
#content {
border: solid 1px #999;
border-top: none;
padding: 10px;
width: 1002px;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="index.html">Psimet</a></li>
<li><a href="bicycle-articles">Articles</a></li>
<li><a href="aluminum-wheels.html">Aluminum Wheels</a></li>
<li><a href="carbon-wheels.html">Carbon </a></li>
<li><a href="cyclocross-wheels.html">Cyclocross</a></li>
<li><a href="powertap.html">Powertap Options</a></li>
<li><a href="reviews.html">Testimonials</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
<!--end nav--></div>
<div id="content">
Lot's of good stuff would go in this content div.
<!--end content--></div>
<!--end container--></div>
</body>
</html>

/edit - I changed some things. Not sure about using em for layout but the math works better.

As an alternative, have a look at this menu where the buttons can vary in size dynamically - http://nopeople.com/CSS/menu-h_centered-ul/index.html

tspek
10-24-2009, 05:34 AM
Does 11% really differ to the browser then if 11% = x.7px?

Could that ultimately be the root of the problem? IE, does it have to add up to a whole pixel? And really, it's not 11% either, it's 11.1111111111111111111111111111111111...you get the idea.


Hello tspek,
I think there is no such thing as .7 of a pixel. Your 11% works though. As for them not fitting into the line break, that too is the other side of the problem. If i get them to all fit, then i have extra space.

I'm not sure what you want to do with the longer menu items that line break. They don't fit in the 11% wide button... so I hid them for now -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 72em;
height: 760px;
margin: 30px auto;
background: #999;
}
#nav {
width: 72em;
}
#nav ul {
width:72em;
overflow: auto;
background: #73797f;
list-style: none;
font-weight: bold;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#nav li a {
width: 8em;
float: left;
display: block;
overflow: hidden;
height: 30px;
}
#nav li a:hover {
background: #00f;
display: block;
}
#content {
border: solid 1px #999;
border-top: none;
padding: 10px;
width: 1002px;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="index.html">Psimet</a></li>
<li><a href="bicycle-articles">Articles</a></li>
<li><a href="aluminum-wheels.html">Aluminum Wheels</a></li>
<li><a href="carbon-wheels.html">Carbon </a></li>
<li><a href="cyclocross-wheels.html">Cyclocross</a></li>
<li><a href="powertap.html">Powertap Options</a></li>
<li><a href="reviews.html">Testimonials</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
<!--end nav--></div>
<div id="content">
Lot's of good stuff would go in this content div.
<!--end content--></div>
<!--end container--></div>
</body>
</html>

/edit - I changed some things. Not sure about using em for layout but the math works better.

As an alternative, have a look at this menu where the buttons can vary in size dynamically - http://nopeople.com/CSS/menu-h_centered-ul/index.html

Excavator
10-24-2009, 03:47 PM
Does 11% really differ to the browser then if 11% = x.7px?

Could that ultimately be the root of the problem? IE, does it have to add up to a whole pixel? And really, it's not 11% either, it's 11.1111111111111111111111111111111111...you get the idea.

Check my post again. I had edited it before you replied, it's not sized with % now.

Scriptet
10-24-2009, 04:30 PM
I know that some browsers can have rounding problems, personally I just avoid use of any decimals whatsoever in order to combat any problems that may occur with it.

A possiblity would just be to give the first and last li a special class then give them a width of 113px, and the rest a width of 114px. But I see you have a more appropriate solution above!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum