Web Analytics Made Easy -
StatCounter Width = 100% not working - CodingForum

Announcement

Collapse
No announcement yet.

Width = 100% not working

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Width = 100% not working

    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.



    Code:
    <!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>
    Code:
    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;
    }
    GreyProxy.com | A free proxy. Use it to unblock blocked site at school or work!

    VisuallyRandom.com | A small webmaster community - Join and make some posts!

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

    Comment


    • #3
      Originally posted by Mr. Bubble View Post
      hello, The box named "top" is working fine, with the width staying 100%... but the nav is too wide
      The navigation is “too wide” relative to what? I just tested that code and it looks fine to me.

      Comment


      • #4
        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.
        GreyProxy.com | A free proxy. Use it to unblock blocked site at school or work!

        VisuallyRandom.com | A small webmaster community - Join and make some posts!

        Comment


        • #5
          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:

          Code:
          * {
            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.

          Comment


          • #6
            Uhhh, i tryed that... and it hasn't helped, its still too wide.
            GreyProxy.com | A free proxy. Use it to unblock blocked site at school or work!

            VisuallyRandom.com | A small webmaster community - Join and make some posts!

            Comment


            • #7
              Originally posted by Mr. Bubble View Post
              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?

              Code:
              #nav {padding-left: 0;}

              Comment

              Working...
              X