1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE6 Ugliness In Layout of Web Page

IE6 Not Displaying Web Page Correctly

         

toad78

5:53 pm on Mar 6, 2008 (gmt 0)

10+ Year Member



I've tested my site on several browsers and IE6 is the only one that is displaying it ugly! Can anyone help?

/* CSS Document */
html, body {
margin: 0;
padding: 0;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
}

html>body {
margin: 1em auto 0 auto;
padding: 0;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
text-align: center;
}

#mc-body-center {
text-align: center;
width: 1000px;
margin: 0 auto;
padding: 0;
}

#mc-body {
position: relative;
margin: 0 auto;
text-align: left;
padding: 0 0 10px 0;
}

#header {
position: relative;
top: 0;
left: 0;
height: 142px;
background: #592046;
margin: 0;
padding: 10px 0 0 0;
}

#header_left {
position: relative;
float: left;
padding: 0 0 0 25px;
width: 115px;
}

#header_center {
position: absolute;
width: 536px;
height: 90px;
left: 242px;
top: 20px;
}

#header_right {
position: absolute;
width: 80px;
left: 888px;
}

#mc-menu {
height: 32px;
font: bold 16px Garamond, "Times New Roman", Times, serif;
background-color: #EADAC3;
position: relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #756D62;
border-bottom: 1px solid #756D62;
}

#mc-menu ul {
margin: 8px 0 0 125px;
padding: 0;
background-color: #EADAC3;
}

#mc-menu li {
text-transform: capitalize;
position: relative;
list-style: none;
margin: 0;
float: left;
padding: 0 20px;
width: auto;
}

#mc-menu li a {
display: block;
line-height: 18px;
height: 18px;
text-decoration: none;
color: #592046;
text-align: center;
}

#mc-menu a:hover {
text-decoration: underline;
color: #592046;
display: block;
text-align: center;
line-height: 18px;
height: 18px;
font-weight: bold;
}

#columns {
position: relative;
border-top: 0px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
left: 0;
top: 0;
margin: 0;
padding: 10px 0 10px 0;
}

#column_left {
left: 0;
top: 0px;
margin: 0;
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
padding: 0 0 8px 0;
position: relative;
width: 650px;
}

#column_left h1 {
font: bold 16px Arial, Helvetica, sans-serif;
height: 16px;
line-height: 16px;
text-transform: uppercase;
margin: 10px 0 5px 0;
padding: 0;
}

#column_left p {
margin: 2px 0 7px 0;
padding: 0 50px 0 0;
font: normal 12px/16px Verdana, Arial, Helvetica, sans-serif;
}

#bottom_column {
position: relative;
left: 0px;
top: 0px;
}

#column_right {
border: 1px solid #009999;
float: right;
display: inline;
width: 336px;
margin: 0 0 0 10px;
padding: 0;
background: #B2C9D0;
height: 342px;
}

#column_right h1 {
line-height: 20px;
font: bold 14px Arial, Helvetica, sans-serif;
text-align: left;
text-transform: uppercase;
padding: 5px 0;
margin: 0 0 0 10px;
color: #000;
text-decoration: underline;
}

#column_right p {
line-height: 16px;
margin: 5px 20px;
padding: 0;
font: normal 14px/18px Jester, Verdana, Arial, Helvetica, sans-serif;
text-indent: 8px;
}

#copyright {
font-size: 10px;
color: #592046;
text-align: center;
clear: both;
height: 30px;
}

.heading {
margin: 0;
padding: 10px 0 5px 0;
}

.curving {
float: right;
clear: right;
margin: 0;
padding: 0;
}

.monthact {
height: 46px;
background-color: #8EA7AF;
}

.imagetitle {
margin: 10px 0 0 51px;
}

.clearer{
height:1px;
overflow:hidden;
margin: -1px 0 0 0;
clear:both;
}

[HTML]
<body>
<div id="mc-body-center">
<div id="mc-body">
<div id="header">
<div id="header_left"><!-- #BeginLibraryItem "/Library/moms_image.lbi" -->
<a href="#" target="_blank"><img src="images/logo.jpg" alt="" width="115" height="124" border="0" /></a><!-- #EndLibraryItem --></div>
<div id="header_center"><!-- #BeginLibraryItem "/Library/welcome_image.lbi" -->
<a href="#" target="_self"><img src="images/Welcome.gif" alt="#, CA" width="536" height="90" border="0" /></a><!-- #EndLibraryItem --></div>
<div id="header_right"><img src="images/Support.jpg" width="80" height="124" alt="" /></div>
</div>
<div id="mc-menu">
<ul>
<li>Home</li>
<li><a href="history.html">History</a></li>
<li><a href="service_projects.html">Service Projects </a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="join_the_club.html">Join</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="columns">
<div id="column_right">

<div class="monthact"><img src="images/this_month.jpg" alt="This Month's Activities" class="imagetitle" /></div>

<p>Jelly Belly Factory Tour</p>
<p>Tune Time</p>
<p>Spring Crafts</p>
<p>M Club Open House</p>
<p>M Night Out (MNO)</p>
<p>Park Play</p>
<p>Storytime</p>
<div id="jelly_bean">
<img src="images/jelly_bean/jelly_bean_02.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_04.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_06.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_07.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_08.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_10.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_11.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_13.jpg" class="rightcurve" />
<img src="images/jelly_bean/jelly_bean_15.jpg" class="rightcurve" />

</div>
<p>Spring Fling</p>
<p>Cooking Club</p>
<p>Lunch N' Play</p>
<p>Play Group</p>
</div>

<div id="column_left">

<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5"></div>
<div class="m6"></div>
<div class="m7"></div>
<div class="m6"></div>
<div class="m3"></div>
<div class="m8"></div>
<div class="m9"></div>

<div class="heading">
<img src="images/who_are_we.jpg" alt="Who Are We?" />
</div>
<p>we are etc.. enter favourite foo text </p>
</div>
</div>
</div>
</div>
<div class="clearer"></div>

<div id="copyright"><!-- #BeginLibraryItem "/Library/copyright.lbi" --><p>&copy; 2008 Our Club, CA. All Rights Reserved.<br />
Problems with this site, please contact the.<br />
** The Club does not endorse nor guarantee any products or services advertised **</p>

<!-- #EndLibraryItem --></div>

</body>

I'm not sure what I'm missing; maybe a hack?
toad78

[edited by: SuzyUK at 5:52 am (utc) on Mar. 7, 2008]
[edit reason] removed site specifics [/edit]

4css

6:26 pm on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Toad78
Welcome to WebmasterWorld

First, you are missing a few things from your header on your document.

You are missing the dtd, the head tag, and your html tag is incorrect.

[HTML]<body> should be <html><body> same with your ending html tag, it should be </body></html>

Here [google.com]
You can find information on the document type declarations. I'm not sure which version of html you are using.

Also, is your css in a linked file? Or is it embedded in the page?

Another thing you need to do is validate your document [validator.w3.org] which will help you to find errors in your (x)html, and there is also a validator for css.

Here is a sample layout base that you could start with 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

4~css

MarkFilipak

6:35 pm on Mar 6, 2008 (gmt 0)

10+ Year Member



Hyphen chars (-) in HTML element ids are supposed to be legal but I've had problems in IE6 if hyphens are used.

Re: html>body {...
IE6 doesn't handle child selector (>).
(Comment: do you have any instances of <body> where it's not a child of <html>?)

toad78

6:50 pm on Mar 6, 2008 (gmt 0)

10+ Year Member



Well, for starters, the [HTML] was for the sake of the thread. I didn't realize that this system didn't convert my code into a scrollable format.

My DOCTYPE is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Let's see, my CSS is in a linked file and some is embedded in the page.

W3C.org validates the majority of stuff, some stuff I have yet to fix, but doesn't seem to be causing the problem.

MarkFilipak: you mentioned that hyphen chars in HTML element ids are a problem. Any solution?

As for the child selectors, it's for Opera (unless it truly isn't necessary, then I'll chuck it).

I hope this helps!
toad78

vol7ron

7:07 pm on Mar 6, 2008 (gmt 0)

10+ Year Member



MarkFilipak: you mentioned that hyphen chars in HTML element ids are a problem. Any solution?

As in... don't hyphenate? I don't understand why you would ask for a solution. Use a RegExp and convert all hyphenated ID's to camelCase. Hyphenations are just wasted bytes anyhow. Your production code should be minimized.
____________________________________________________________

Part of the reason that I see is: 

#mc-menu li a {
   display:         block; [b]<<<<<< should be inline[/b]
   line-height:     18px;
   height:          18px;
   text-decoration: none;
   color:           #592046;
   text-align:      center;
   float:           left; [b]<<<<<< need to add this[/b]
}

vol7ron




vol7ron

8:12 pm on Mar 6, 2008 (gmt 0)

10+ Year Member



CSS
/* CSS Document */
html, body {
margin: 0;
padding: 0;
font: 12px Arial,elvetica, sans-serif;
color: #000;
background-color: #fff;
}

html>body {
margin: 1em auto 0 auto;
padding: 0;
font: 12px Arial,elvetica, sans-serif;
color: #000;
background-color: #fff;
text-align: center;
}

#mc-body-center {
text-align: center;
width: 1000px;
margin: 0 auto;
padding: 0;
}

#mc-body {
position: relative;
margin: 0 auto;
text-align: left;
padding: 0 0 10px 0;
}

#header {
position: relative;
top: 0;
left: 0;
eight: 142px;
background: #592046;
margin: 0;
padding: 10px 0 0 0;
}

#header_left {
position: relative;
float: left;
padding: 0 0 0 25px;
width: 115px;
}

#header_center {
position: absolute;
width: 536px;
eight: 90px;
left: 242px;
top: 20px;
}

#header_right {
position: absolute;
width: 80px;
left: 888px;
}

#mc-menu {
eight: 32px;
font: bold 16px Garamond, "Times New Roman", times, serif;
background-color: #EADAC3;
position: relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #756D62;
border-bottom: 1px solid #756D62;
}

#mc-menu ul {
margin: 8px 0 0 125px;
padding: 0;
background-color: #EADAC3;
}

#mc-menu li {
text-transform: capitalize;
list-style-type: none;
margin: 0;
float: left;
padding: 0 20px;
}

#mc-menu li a {
display: inline;
line-height: 18px;
eight: 18px;
text-decoration: none;
color: #592046;
float: left;
}

#mc-menu a:hover {
text-decoration: underline;
color: #592046;
display: block;
text-align: center;
line-height: 18px;
eight: 18px;
font-weight: bold;
}

#columns {
position: relative;
border-top: 0px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
left: 0;
top: 0;
margin: 0;
padding: 10px 0 10px 0;
}

#column_left {
left: 0;
top: 0px;
margin: 0;
font: 12px/18px Verdana, Arial,elvetica, sans-serif;
padding: 0 0 8px 0;
position: relative;
width: 650px;
}

#column_left1 {
font: bold 16px Arial,elvetica, sans-serif;
eight: 16px;
line-height: 16px;
text-transform: uppercase;
margin: 10px 0 5px 0;
padding: 0;
}

#column_left p {
margin: 2px 0 7px 0;
padding: 0 50px 0 0;
font: normal 12px/16px Verdana, Arial,elvetica, sans-serif;
}

#bottom_column {
position: relative;
left: 0px;
top: 0px;
}

#column_right {
border: 1px solid #009999;
float: right;
display: inline;
width: 336px;
margin: 0 0 0 10px;
padding: 0;
background: #B2C9D0;
eight: 342px;
}

#column_right1 {
line-height: 20px;
font: bold 14px Arial,elvetica, sans-serif;
text-align: left;
text-transform: uppercase;
padding: 5px 0;
margin: 0 0 0 10px;
color: #000;
text-decoration: underline;
}

#column_right p {
line-height: 16px;
margin: 5px 20px;
padding: 0;
font: normal 14px/18px Jester, Verdana, Arial,elvetica, sans-serif;
text-indent: 8px;
}

#copyright {
font-size: 10px;
color: #592046;
text-align: center;
clear: both;
eight: 30px;
}

.heading {
margin: 0;
padding: 10px 0 5px 0;
}

.curving {
float: right;
clear: right;
margin: 0;
padding: 0;
}

.monthact {
eight: 46px;
background-color: #8EA7AF;
}

.imagetitle {
margin: 10px 0 0 51px;
}

.clearer{
height:1px;
overflow:hidden;
margin: -1px 0 0 0;
clear:both;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>

<body>
<div id="mc-body-center">
<div id="mc-body">
<div id="header">
<div id="header_left"><!-- #BeginLibraryItem "/Library/moms_image.lbi" -->
<a href="#" target="_blank"> <img src="images/M_logo.jpg" alt="" width="115" height="124" border="0" /></a><!-- #EndLibraryItem -->
</div>
<div id="header_center"><!-- #BeginLibraryItem "/Library/welcome_image.lbi" -->
<a href="#" target="_self">
<img src="images/Welcome.gif" alt="#" width="536" height="90" border="0" /></a><!-- #EndLibraryItem -->
</div>
<div id="header_right">
<img src="images/Support.jpg" width="80" height="124" alt="" />
</div>
</div>
<div id="mc-menu">
<ul>
<li>Home</li>
<li><a href="history.html">History</a></li>
<li><a href="service_projects.html">Service Projects </a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="recipes.html">Recipes</a></li><li><a href="join_the_club.html">Join</a></li>
<li><a href="links.html">Links</a></li><li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="columns">
<div id="column_right">

<div class="monthact">
<img src="images/this_month.jpg" alt="This Month's Activities" class="imagetitle" />
</div>
<p>Jelly Belly Factory Tour</p>
<p>Tune Time</p>
<p>Spring Crafts</p>
<p>M Club Open House</p>
<p>M Night Out (MNO)</p>
<p>Park Play</p>
<p>Storytime</p>
<div id="jelly_bean">
<img src="images/jelly_bean/jelly_bean_02.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_04.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_06.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_07.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_08.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_10.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_11.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_13.jpg" class="rightcurve" alt="" />
<img src="images/jelly_bean/jelly_bean_15.jpg" class="rightcurve" alt="" />

</div>
<p>Spring Fling</p>
<p>Cooking Club</p>
<p>Lunch N' Play</p>
<p>Play Group</p>
</div>

<div id="column_left">

<div class="m1"> </div>
<div class="m2"> </div>
<div class="m3"> </div>
<div class="m4"> </div>
<div class="m5"> </div>
<div class="m6"> </div>
<div class="m7"> </div>
<div class="m6"> </div>
<div class="m3"> </div>
<div class="m8"> </div>
<div class="m9"> </div>

<div class="heading">
<img src="images/who_are_we.jpg" alt="Who Are We?" />
</div>
<p>3 x paragarphs foo text </p>
</div>
</div>
</div>
</div>
<div class="clearer"></div>
<div id="copyright"><!-- #BeginLibraryItem "/Library/copyright.lbi" -->
<p>&copy; 2008 Club. All Rights Reserved.<br />
Problems with this site, please contact the.<br />
** The Club does not endorse nor guarantee any products or services advertised **</p>

<!-- #EndLibraryItem -->
</div>

</body></html>

vol7ron




[edited by: SuzyUK at 6:01 am (utc) on Mar. 7, 2008]
[edit reason] fixed scroll [/edit]

toad78

12:16 am on Mar 7, 2008 (gmt 0)

10+ Year Member



Thank you. I'll look into that and let you know how things work out!

toad78

vol7ron

4:28 am on Mar 7, 2008 (gmt 0)

10+ Year Member



Sounds good, i think you'll be fine.

vol7ron

5:13 am on Mar 11, 2008 (gmt 0)

10+ Year Member



how'd it turn out?

toad78

4:37 pm on Mar 11, 2008 (gmt 0)

10+ Year Member



Check it out! Looks like it worked out:

BTW, I know how important DTDs are, but is mine not up to code anymore? I noticed that you 'edited' the one I posted.

Toad78

[edited by: SuzyUK at 5:51 pm (utc) on Mar. 11, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 am May 2, 2026