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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout not working in IE 6

    Someone asked how to fix their layout in a table and instead I tried to convert it to CSS. I was eventually about to make it work for FF2 and IE7 but still have issues in IE6. Any pointers on what I'm doing wrong? I started with a template from CSS Play so there are definitely parts I don't really understand.

    www.exfer.net/test/css_mid_test.html

    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">
    <head>
    <title>CSS Layout</title>
    <style type="text/css">
    body {
    	color: #000;
    	font-family: georgia, "times new roman", times, serif;
    	padding: 0;
    	margin:0;
    	font-size:120%;
    }
    * html .container {
    	margin-left: -400px;
    	position: relative;
    }
    /*\*/
    * html .container, * html .content {
    	height: 1px;
    }
    /**/
    .content {
    	padding:10px;
      display:block;
    }
    .width {
    	width: 50%;
    	min-width: 400px;
    	margin:0 auto;
    	height:100%;
    }
    .container {
    	border:1px solid #BFB7BF;
    	background:#FFFFEA;
    }
    * html .minwidth {
    	padding-left: 400px;
    }
    /*\*/
    * html .minwidth, * html .layout {
    	height: 1px;
    }
    /**/
    
    .clear { clear:both; }
    
    #outerheader { position:relative; display:block; }
    #header { display:block; }
    #leftheader { float:left; position:relative; left:0px; width:6px; height:26px; 
                  background:white url(/images/MenuTopLeft.gif) no-repeat; }
    #rightheader { float:right; position:relative; right:0px; width:6px; height:26px; 
                   background:white url(/images/MenuTopRight.gif) no-repeat; }
    #centerheader { height:26px; position:relative; display:block; text-align:center; 
                    background:white url(/images/MenuTopCenter.gif) repeat-x; 
                    margin-left:6px; margin-right:6px; }
    #footer { height:30px; background:#fd8; text-align:center;}
    </style>
    </head>
    
    <body>
    <div class="width">
    <div class="minwidth">
    <div class="layout">
      <div id="outerheader">
        <div id="header">
    
          <div id="leftheader"></div>
          <div id="rightheader"></div>
          <div id="centerheader">Announcments</div>
          <div class="clear"></div>
        </div>
      </div>
    <div class="container">
      <div class="content">
        <p><a href="1.html" target="_blank">This is announcement No. 1</a></p>
    
        <p><a href="2.html" target="_blank">This is announcement No. 2</a></p>
        <p><a href="3.html" target="_blank">This is announcement No. 3</a></p>
        <p><a href="4.html" target="_blank">This is announcement No. 4</a></p>
      </div>
      <div id="footer">
        <p>&copy; Copyright 2006. All Rights Reserved.</p>
    
      </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Thanks,
    david_kw

  • #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
    Its your attempt at a minwidth fix for IE6 that is causing issues.
    http://www.cssplay.co.uk/boxes/width3.html (I know you may have tried this but follow it carefully again)
    http://www.pmob.co.uk/temp/min-width-ie.htm (view source)
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also, are you using notepad or some code editor to edit your code like dreamweaver? i get alot of times where what it looks like in dreamweaver and what it performs as is different in much regards, just wonderin...

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took 2 sets of sample code from CSS Play that seemed to work and integrated them. One was to implement a min-width window and the other was to have 3 columns in the header. I used Vim as the editor. Just to satisfy your wondering.

    Thanks Aero. That'll help a lot to pinpoint the problem. I'll work through it again when I get a chance.

    david_kw

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by david_kw View Post
    I took 2 sets of sample code from CSS Play that seemed to work and integrated them. One was to implement a min-width window and the other was to have 3 columns in the header. I used Vim as the editor. Just to satisfy your wondering.

    Thanks Aero. That'll help a lot to pinpoint the problem. I'll work through it again when I get a chance.

    david_kw
    Just wondering if you worked this out... I'm curious to see how this will all play out with the CSS code. Maybe I'll use this rather then the original code.

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, don't laugh but I finally got around to it. :) I gave up on quirksmode and just worked with standard mode. There was definitely some oddities but it eventually worked.

    This is what I came up with.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <title>Junque</title>
        <style type="text/css">
          div { margin:0 auto; }
          body { color: #000; font-family: georgia, "times new roman", times, serif; font-size:120%; }
    
          div#container { width:640px; margin-top:30px; }
          div#leftheader { float:left; background:white url(images/MenuTopLeft.gif) no-repeat; }
          div#centerheader { float:left; width:628px; height:26px; text-align:center;
                             margin-bottom:-3px;
                             background:white url(images/MenuTopCenter.gif) repeat-x; }
          div#rightheader { float:left; background:white url(images/MenuTopRight.gif) no-repeat; }
          div#content { width:638px; border:1px solid #BFB7BF; border-top-style:none; background:#FFFFEA;
                        padding-top:1em; }
          div#content p { margin-top:0; }
          div#footer { width:100%; height:30px; background:#fd8; text-align:center;}
    
          .clear { clear:both; }
        </style>
      </head>
      <body>
        <div id="container">
          <div style="float:left"><img src="images/MenuTopLeft.gif" alt=""/></div>
          <div id="centerheader">Announcements</div>
          <div style="float:right"><img src="images/MenuTopRight.gif" alt=""/></div>
          <div class="clear"></div>
        </div>
        <div id="content">
          <p><a href="1.html" target="_blank">This is announcement No. 1</a></p>
          <p><a href="2.html" target="_blank">This is announcement No. 2</a></p>
          <p><a href="3.html" target="_blank">This is announcement No. 3</a></p>
          <p><a href="4.html" target="_blank">This is announcement No. 4</a></p>
          <div id="footer">&copy; Copyright 2006. All Rights Reserved.</div>
        </div>
      </body>
    </html>
    david_kw


  •  

    Posting Permissions

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