View Full Version : IE6 Issue

12-16-2009, 10:20 PM
Hi, could someone take a look at the attached and let me know why it's not showing correctly in IE6?

Download Link (http://webdeveloper.com/forum/attachment.php?attachmentid=13303&d=1260997928)


12-16-2009, 11:54 PM
IE 6 doesn't collapse margins if a height or width is applied.
see here http://reference.sitepoint.com/css/collapsingmargins#

Replace your heights with padding.

Or look up conditional comments for IE.

12-17-2009, 12:35 AM
Hey thanks LE1, I replaced the heights with padding it it looks worse than the bride of Frankenstein still in IE6..

12-18-2009, 04:06 PM
have you played around with the margins, these are interpreted different in IE.
Again have a look at Conditional Comments (http://reference.sitepoint.com/css/conditionalcomments)
you can use these to apply a margin change to IE6 only.

12-18-2009, 04:07 PM
If you are still having problems,
If I get time i will take a look.

12-18-2009, 04:10 PM
I think excavator has the right idea see this post (http://codingforums.com/showthread.php?t=184554)

<!--[if lt IE 7]>
<div id="ie6Warning">
<h2>Time to upgrade your browser</h2>
If you're reading this, you're surfing using Internet Explorer 6, an eight-year-old browser that
cannot cope with the demands of the modern internet. For the best web experience, we strongly recommend
upgrading to <a href="http://www.getfirefox.com/">Firefox</a>, <a href="http://www.opera.com/">Opera</a>,
<a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Google Chrome</a>,
or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet

12-18-2009, 06:29 PM
Hello theflyingminstr,
I'm not sure how much help I can be since I don't have IE6 to view your site with. Try making these changes -

<div id="wrap">
<div id="head">
<ul class="navbar">
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<h1 class="title">Simpler</h1>
<div id="main">
<div id="splash"></div>
<h2 class="subtitle">Simpler - subtitle.</h2>
<div id="content">
<div class="box" id="what">
<h2>What we do.</h2>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
accompanied by English versions from the 1914 translation by H. Rackham.</p>

body {
background: #ccc url('i/body_bg.png') repeat-x;
font: 70%/1.6em 'Lucida Sans',Verdana,sans-serif;
color: #333;
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
#wrap {
margin: 0 auto;
width: 760px;
#head {
background: url('i/top.png') no-repeat;
height: 130px;
overflow: auto;
#head h1.title {
margin: 105px 0 0 20px;
font-variant: small-caps;
color: #fff;
#head ul.navbar {
padding: 0 0 0 30px;
#head ul.navbar li {
float: left;
list-style-type: square;
#head ul.navbar li a {
display: block;
padding: 18px 0 0 0;
margin: 0 40px 0 0;
font-weight: bold;
text-transform: uppercase;
a:link,a:visited,a:active {
text-decoration: none;
border-bottom: #900 1px dotted;
color: #900;
a:hover {
color: #600;
border-color: #600;
#head #title_box {
display: block;
position: relative;
top: 140px;
left: 200px;
width: 100px;
border: #c00 1px solid;
#main {
background: url('i/main_bg.png') center repeat-y;
overflow: auto;
#splash {
width: 741px;
height: 136px;
margin: 0 auto;
background: url('i/title.jpg') no-repeat;
.subtitle {
margin: 8px 0 0 0;
padding: 0 15px 0 0;
font-variant: small-caps;
letter-spacing: 1px;
font-size: 14px;
text-align: right;
#content {
margin: 0 10px 10px 10px;
text-align: justify;
overflow: auto;
background: url('i/content_sep.png') repeat-y 48% 0;
#content div.box {
width: 210px;
margin: 0 15px 20px 15px;
float: left;
#content h2 {
color: #900;
margin: 20px 0 0 0;
line-height: 20px;
background: url('i/content_h2.png') top left no-repeat;
padding: 0px 0 0 15px;
#news ul {
margin: 10px 0 0 0;
list-style: none;
#news li{padding: 2px 0;}
#footer {
clear: both;
background: url('i/bot_bg.png') center no-repeat;
height: 50px;
padding: 0 20px 5px 0;
text-align: right;
color: #999;
#footer p{padding: 20px 0 0 0;}

It may be, if you still have IE6 problems, that you're invoking an IE6 bug I'm not seeing. Have a look here (http://www.positioniseverything.net/explorer.html) for a good start at hunting it down.
If that browser is having trouble with your 3 floats, adding display:inline; to them may clear up a bug? Not sure.

I'd be curious to see a screencap.