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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Posts
    146
    Thanks
    0
    Thanked 0 Times in 0 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;
    }

  • #2
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Sep 2005
    Posts
    146
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Sep 2005
    Posts
    146
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhhh, i tryed that... and it hasn't helped, its still too wide.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote 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;}
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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