SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    america
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Width of columns differs in IE, Firefox and Opera.

    I use a three column layout with a header- and footer-section. When the screen width is less then 1024px some different styles are loaded (the text size of the menu is smaller and some more).
    Everything works fine only the width of the left and right column differs in IE, Firefox and Opera!?
    I canít find a way to give the columns an equal width in all browsers! Can anyone spot my problem and maybe a solution?

    Here a link to the layout:
    LINK

    Here the html code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Test01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="default01.css" rel="stylesheet" type="text/css" /><!--if people have javascript deactivated the standard style will be used-->
    <script language="javascript">
    
    if ((screen.width<1024)){
    alert("Nein");
     document.write ("<link href='default01_800.css' rel='stylesheet' type='text/css'>");
    }
    </script>
    <!--[if gte IE 5]>
    <style type="text/css">
    body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "779px") : "auto" );}
    #wrap {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <div id="wrap">
    <div id="header">
    
    </div>
    
    <div id="left"> 
    
    </div>
    <div id="main">
    <div id="right">
    
    </div>
    <div id="content"> 
    <div id="articel">
      <h1>Heading</h1>
        <p><div id="img_left"><img src="pic01.jpg" width="220" height="165"></div>
    	<p>AMD's market share has been creeping up as its range of dual-processor chips   outperformed Intel's products.</p>
    	<p>Despite those gains AMD still only sells a quarter of the desktop PC   processors and a ninth of the laptop chips that Intel sells.</p>
    	<p>However, Kirk Skaugen, general manager of Intel's server platforms group,   admitted that his company had lost some of its US market share to AMD over the   past year.&nbsp;</p>
    	<p>Skaugen said that Intel's re-focus on high performance computing with the new   Xeon products would help it win back that lost share.</p>
    	</p>
    	<p>AMD's market share has been creeping up as its range of dual-processor chips   outperformed Intel's products.</p>
    	<p>Despite those gains AMD still only sells a quarter of the desktop PC   processors and a ninth of the laptop chips that Intel sells.</p>
    	<p>However, Kirk Skaugen, general manager of Intel's server platforms group,   admitted that his company had lost some of its US market share to AMD over the   past year.&nbsp;</p>
    	<p>Skaugen said that Intel's re-focus on high performance computing with the new   Xeon products would help it win back that lost share.</p>
    	<div id="img_left"><img src="pic02.jpg" width="220" height="165"></div>
        <p>AMD's market share has been creeping up as its range of dual-processor chips   outperformed Intel's products.</p>
        <p>Despite those gains AMD still only sells a quarter of the desktop PC   processors and a ninth of the laptop chips that Intel sells.</p>
        <p>However, Kirk Skaugen, general manager of Intel's server platforms group,   admitted that his company had lost some of its US market share to AMD over the   past year.&nbsp;</p>
        <p>Skaugen said that Intel's re-focus on high performance computing with the new   Xeon products would help it win back that lost share.AMD's market share has been creeping up as its range of dual-processor chips   outperformed Intel's products.</p>
        <p>Despite those gains AMD still only sells a quarter of the desktop PC   processors and a ninth of the laptop chips that Intel sells.</p>
        <p>However, Kirk Skaugen, general manager of Intel's server platforms group,   admitted that his company had lost some of its US market share to AMD over the   past year.&nbsp;</p>
        <p>Skaugen said that Intel's re-focus on high performance computing with the new   Xeon products would help it win back that lost share.</p>
    </div>
    </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
    <p>Footer Text<br />
    Copyright</p>
    </div>
    </div>
    </body>
    </html>
    Here the css (default01.css):
    HTML Code:
    html {height:100%;}
    body {
    margin:0; padding:0; height:100%;
    font-family: verdana, sans-serif;
    }
    #wrap {
    background:#789331;
    max-width:1024px;
    margin:auto;
    }
    #header {
    background-color:#006699;
    margin:0; padding:0;
    height:180px;
    }
    #left {
    background-color:#789331;
    float:left;
    padding-left: 6px;
    }
    #main {
    position:relative;
    margin-left:197px;
    }
    #right {
    float:right;
    padding-right: 6px;
    text-align:center;
    padding-top: 10px;
    background-color:#789331;
    }
    #content {
    background:#f6f6f1;
    padding:6px;
    padding-left:20px;
    margin-right:197px;
    text-align:left;
    font-family: verdana, sans-serif;
    font-size: 11px;
    }
    #clearfooter {
    clear:both;
    height:40px;
    overflow:hidden;
    }
    #footer {
    height:40px;
    background-color:#996600;
    margin:0 auto; padding:0;
    margin-top:-40px;
    color:#FF00FF;
    text-align:center;
    font-size: 10px;
    font-family: arial, helvetica, sans-serif;
    color: #000000;
    }
    #footer p {
    margin-top: 8px;
    margin-bottom: 0px;
    }	
    /*Without this the pictures wont show in IE*/
    * html #main,
    * html #content {
    height:1px;
    }
    #articel {
    position: relative;
    margin-top: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    text-align: justify;
    }
    #articel h1 {
    font-gamily: font-family: arial, helvetica, sans-serif;
    font-size: 16px;
    }
    img {
    border: none;
    }
    #img_left{
    margin:0px 1px 0px 0px;
    padding: 0px;
    float: left;
    width: 220px;
    height: 165px;
    border-width: 2px;
    border-style: solid;
    border-color: #EAD29B;
    }
    #img_right{
    margin:0px 0px 0px 1px;
    padding: 0px;
    float: right;
    width: 220px;
     height: 165px;
    border-width: 2px;
    border-style: solid;
    border-color: #EAD29B;
    }
    Here the ccs for a screen width less than 1024px (default01_800.css):
    HTML Code:
    #wrap {
    max-width:779px;
    }
    /*In reality there  are some more styles for the menu... that I deleted for this example*/

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    america
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thank you.

    Could you give some more details?
    Even the layout from Paul:http://www.pmob.co.uk/temp/min-max-3col.htm
    ,which uses valid code, is displayed with different column width in different browsers.


Bookmarks

Posting Permissions

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