...

View Full Version : Layout not working in IE 6



david_kw
12-01-2006, 11:02 PM
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



<!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

_Aerospace_Eng_
12-02-2006, 07:02 AM
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)

114211
12-03-2006, 02:38 AM
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... :rolleyes:

david_kw
12-03-2006, 05:43 AM
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

daniel981
12-04-2006, 05:38 PM
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. :thumbsup:

david_kw
03-07-2007, 07:26 AM
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.



<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum