1. Home
  2. Forums Index
  3. Browser Side / CSS 10:07 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE/PC hates my CSS - Why?

Internet explorer on a PC kills my CSS layout...!

         

mhulse

1:48 am on Oct 28, 2004 (gmt 0)

10+ Year Member



Title: PLZ HLP! IE/PC hates my CSS!?! Why?

Oh man... why did god ever invent Internet Explorer?

Anyway, my site CSS layout works fine on every major browser (mac/pc) except for all versions of IE on PC!

Grr, I do not understand why... all of my code is valid XHTML 1.0 trans... and my style sheets are valid...

Could someone/GURU/anyone please check my code and give me some feedback?

[oooops sorry no URLs : see TOS #13 [webmasterworld.com]] 

<!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>CSS TEST TEMPLATE DOC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
font-smooth: never;
background-color: #111111;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60%;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
font-variant: normal;
color: #666666;
text-decoration: none;
text-transform: none;
letter-spacing: 2px;
line-height: 1.5em;
background-attachment: scroll;
background-image: url(bkgrnd.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
#container {
width: 850px;
padding: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#flash_banner {
padding: 0px;
height: 250px;
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #000000;
border-right-width: 50px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-style: none;
border-bottom-width: 0px;
border-bottom-color: #000000;
border-left-width: 0px;
border-left-style: none;
border-left-color: #000000;
}
#banner {
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 250px;
background-color: #000000;
background-attachment: scroll;
background-image: url(rounded_crnr.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#shadow_banner {
margin: 0px;
background-attachment: scroll;
background-image: url(tp_grndt.gif);
background-repeat: no-repeat;
background-position: left top;
padding: 0px;
height: 11px;
}
#innercontentwrap {
width:99.9%;
float:left;
}
#content {
margin-left: 257px;
margin-right: 50px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#sidebar-a {
float: left;
width: 200px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
#footer {
clear: both;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 250px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
img {
 border:0;
}
p { 
margin: 0;
}
div.thumbs65 {
float:left;
width: 99.9%;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.l_fl {
float:left;
display: block;
border:0;
padding-right: 10px;
}
.under_p6 {
margin-top: 6px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.img_border {
border: 1px solid #000000;
}
.sub_page {
font-size: xx-small;
text-align: right;
}
/*
Links have to be in this order in your stylesheet:
a:link
a:visited
a:hover
a:active
*/
a:link {
color: #999900;
text-decoration: none;
}
a:visited {
color: #999900;
text-decoration: none;
}
a:hover {
color: #CCCC00;
text-decoration: none;
}
a:active {
color: #FFFF00;
text-decoration: none;
}
a.current {
color: #666600;
text-decoration: none;
}
a.current:hover {
color: #CCCC00;
text-decoration: none;
}
-->
</style>
</head>
<body>
<!-- BEGIN DIV "CONTAINER" /////////////// -->
<div id="container">
<!-- BEGIN DIV "FLASH_BANNER" /////////////// -->
<div id="flash_banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="250" hspace="0" vspace="0">
 <param name="movie" value="6.swf" />
 <param name="quality" value="high" /><param name="BGCOLOR" value="#666666" />
 <embed src="6.swf" width="800" height="250" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#666666"></embed>
 </object>
</div> 
<!-- END DIV "FLASH_BANNER" /////////////// -->
<!-- BEGIN DIV "BANNER" /////////////// -->
<div id="banner">
<a href="#" title="[Home]">Home</a>
&nbsp;&nbsp;<a href="#" title="[News]">News</a>
&nbsp;&nbsp;<a href="#" class="current" title="[Folio]">Folio</a>
&nbsp;&nbsp;<a href="#" title="[Resume]">Resume</a>
&nbsp;&nbsp;<a href="#" title="[Code]">Code</a>
&nbsp;&nbsp;<a href="#" title="[Forum]">Forum</a>
&nbsp;&nbsp;<a href="#" title="[Contact]">Contact</a>
&nbsp;&nbsp;<a href="#" title="[Links]">Links</a>
</div>
<!-- END DIV "BANNER" /////////////// -->
<!-- BEGIN DIV "SHADOW_BANNER" /////////////// -->
<div id="shadow_banner">
&nbsp;
</div>
<!-- END DIV "SHADOW_BANNER" /////////////// -->
<!-- BEGIN DIV "SIDEBAR-A" /////////////// -->
<div id="sidebar-a">
<a href="#" title="[3D]">3D</a><br />
<a href="#" title="[Art]">Art</a><br />
<a href="#" title="[Audio]">Audio</a><br />
<a href="#" title="[Bitmap]">Bitmap</a><br />
<a href="#" title="[Experimental]">Experimental</a><br />
<a href="#" title="[Fontography]">Fontography</a><br />
<a href="#" title="[Interactive]">Interactive</a><br />
<a href="#" title="[Logotypes]">Logotypes</a><br />
<a href="#" title="[Misculaneous]">Misculaneous</a><br />
<a href="#" title="[Photography]">Photography</a><br />
<a href="#" title="[Print]">Print</a><br />
<a href="#" title="[Vector]">Vector</a><br />
<a href="#" title="[Videography]">Videography</a><br />
<a href="#" title="[Websites]">Websites</a><br />
</div>
<!-- END DIV "SIDEBAR-A" /////////////// -->
<!-- BEGIN DIV "CONTENT" /////////////// -->
<div id="content">
<!-- BEGIN DIV "INNERCONTENTWRAP" /////////////// -->
<div id="innercontentwrap">
<p>This is a test layout for my site template.</p>
<br />
<p>Here is how I want it to look: <a href="test_screen_grab.jpg" target="_blank">test_screen_grab.jpg</a></p>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sed elit. Sed ante eros, imperdiet tincidunt, interdum id, consequat ut, massa. In sodales quam id enim. Morbi lacinia aliquet enim. In eget mauris. Curabitur vehicula leo. In malesuada mollis metus. Nulla facilisi. Suspendisse potenti. Integer dui metus, pellentesque sit amet, fringilla at, consectetuer eget, lacus. Pellentesque odio odio, commodo vitae, venenatis a, aliquet sed, tellus.</p>
<br />
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>More: More info here.</p>
</div>
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>More: More info here.</p>
</div>
<div class="thumbs65">
<p class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
<img src="tn_gm_ps_08.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_08.jpg" /></a></p>
<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('#','','width=600,height=636')">
Title goes here.</a></p>
<p class="under_p6">Description: Description goes here.</p>
<p>More: More info here.</p>
</div>
</div>
<!-- END DIV "INNERCONTENTWRAP" /////////////// -->
</div>
<!-- END DIV "CONTENT" /////////////// -->
<!-- BEGIN DIV "FOOTER" /////////////// -->
<div id="footer">
<a href="sitemap.php" title="[Sitemap]">Sitemap</a>
&nbsp;&nbsp;<a href="dotcoms.php" title="[Dotcoms]">Dotcoms</a>
&nbsp;&nbsp;<a href="#" title="check css">CSS</a>
&nbsp;&nbsp;<a href="#" title="check xhtml">XHTML</a>
</div> 
<!-- END DIV "FOOTER" /////////////// -->
</div>
<!-- END DIV "CONTAINER" /////////////// -->
</body>
</html>

I would love some help... ugh, why does IE have to be such a pain in the ****?

Many many thanks in advance...

Cheers
Micky


Mod Note: the "excess code" in this post has not been edited, deliberately - It's been used in a CSS Debug Case Study... - see: Debugging CSS [webmasterworld.com] thread for more info..

[edited by: SuzyUK at 2:23 pm (utc) on Oct. 28, 2004]

BonRouge

2:49 am on Oct 28, 2004 (gmt 0)

10+ Year Member



I think if you remove 'float:left' from thumbs 65 you'll kind of be OK (but to be honest, when I tested this I had a strange problem with the pictures kind of lining up diagonally... - maybe you'll be OK).
Anyway, try that - you've got nothing to lose.

mhulse

3:42 am on Oct 28, 2004 (gmt 0)

10+ Year Member



Hi!

Thanks for looking my code over!

Testing that out now... Looks like it will fix it up a bit...

Gosh, I should just do something in Flash... It seems like CSS layouts do have limitations... Or, maybe I should just use a table-based layout... :(

But, again, thanks so much!

Hehe,

SuzyUK

2:54 pm on Oct 28, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



BonRouge.. removing the float left on the div would indeed work, but then some sort of clearing hack/fix would have to be applied for compliant browsers..

the divs are being displayed "diagonally" becasue they are not clearing each other. Floating the container div is the compliant way to get it to stretch to contain it's floated children..

It seems like CSS layouts do have limitations

LOL micky, I used this code a a case study because I think there is a new/rarely heard of bug in there.. It's not so much that CSS has it's limitations, IE certainly does though! have to agree with your grrrrr.

See this thread [webmasterworld.com] msg#1 for a detailed debug or go to straight to msg#2 if you just want some answers..

Suzy

Hester

9:23 am on Oct 29, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This can be solved by setting the letter-spacing on the <p> rather than the <body>.

SuzyUK

10:08 am on Oct 29, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah yes hester.. so it can, :)

but you need to know it's the letter-spacing that's causing the problem first, and that doesn't account for the letter spacing that's required on the rest of the body elements.

letter-spacing is an inherited property the way Micky used it is correct, we shouldn't need to be putting it on each individual element as required..

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:07 pm May 1, 2026