Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts

    1024/9 =/= 113.7 (width doesn't add up...)

    The site:
    www.psimet.com/psi

    The problem:

    The page is set to be 1024px wide.
    Code:
    body {width:1024px;...}
    Navigation bar is set to be 1024px wide.
    Code:
    #nav {width:1024px;...}
    A div for content is more or less set to be 1024px wide.
    Code:
    #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
    Code:
    #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
    Code:
    <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">
    ...
    ...
    ...

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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
    Last edited by Excavator; 10-24-2009 at 12:05 AM. Reason: my math didn't work either!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    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.

    Quote Originally Posted by Excavator View Post
    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 -
    Code:
    <!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
    Last edited by tspek; 10-24-2009 at 05:37 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tspek View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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!


  •  

    Posting Permissions

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