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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pixel and percentage widths

    I am having a problem with my width percentages. I have a top navigation bar with a fixed size box inside on the left, then 4 dynamic sized boxes. I have been tweaking it, and it now works semi-correctly in IE, but not Opera or FF. Here is the simplified code:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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" xml:lang="en" lang="en">
    
    <head>
    	
    	<title>Welcome!</title>
    	<meta http-equiv="content-type" 
    		content="text/html;charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    
      <style TYPE="text/css">
    
    	#container {
    		margin: 0px;
    		padding: 0px;
    		width: 100%;
    		border: 1px solid #000;
    	}
    
    	#fixBox {
    		float: left;
    		width: 150px;
    		height: 100px;
    		border: 1px solid #000;
    	}
    
    	#dynamicBoxContainer {
    		width: 100%;
    		border: 1px dotted #0f0;
    	}
    
    	#dynamicBox {
    		margin-left: 8px;
    		float: left;
    		width: 23%;
    		height: 100px;
    		border: 1px solid #000;
    	}
    
    
      </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="fixBox"></div>
    	<div id="dynamicBoxContainer">
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    	</div>
    </div>
    
    
    
    
    </body>
    
    </html>
    I'm new to css, so any help would be greatly appreciated!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove this
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    Its likely the reason why you can get it to work in IE but not the other browsers. IE6 is in quirks mode causing to render some stuff incorrectly. The general rule of thumb is to code for a good browser and tweak for IE. Make it look right in Firefox or Opera then tweak for IE.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the heads up. Although, my problem is only worse now, as it does not work for any browsers. Can anyone help me get this working correctly?

    The idea is simple. Navigation bar with a fixed size search box on the left, and 4 link boxes that expand to fit the rest of the window length.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by M1kael View Post
    Thanks for the heads up. Although, my problem is only worse now, as it does not work for any browsers. Can anyone help me get this working correctly?
    I figured it would be after you said you got it working in IE but not the other browsers. This is why again you getting working in a good browser and hack/tweak for IE. Try this
    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" xml:lang="en" lang="en">
    <head>
    <title>Welcome!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style TYPE="text/css">
    html, body {
    margin:0;
    padding:0;
    }
    #container {
    border: 1px solid #000;
    }
    
    #fixBox {
    float: left;
    width: 150px;
    height: 100px;
    border: 1px solid #000;
    }
    
    #dynamicBoxContainer {
    border: 1px dotted #0f0;
    margin-left:160px;
    }
    
    #dynamicBox {
    margin-left: 8px;
    float: left;
    display:inline;
    width: 23%;
    height: 100px;
    border: 1px solid #000;
    }
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #fixBox {
    margin-right:-3px;
    }
    #dynamicBoxContainer {
    margin-left:8px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container">
    	<div id="fixBox"></div>
    	<div id="dynamicBoxContainer">
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    		<div id="dynamicBox"></div>
    		<div class="clear">&nbsp;</div>
    	</div>
    </div>
    </body>
    </html>
    Compare it to what you have now. I didn't change much. Just a few widths. By default a block level element like a div takes up 100% width of its container. Explicitly setting the width and then adding the border makes it take up more than 100%. Borders add to overall width as does padding.

    IE6 has this 3px gap bug explain here: http://www.positioniseverything.net/...reepxtest.html

    I've already implemented this into your code using conditional comments.

    I also fixed the double margin bug on #dynamicBox. http://www.positioniseverything.net/...ed-margin.html
    Last edited by _Aerospace_Eng_; 07-23-2007 at 07:36 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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