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?
Here is link to test template page (Using same code as below):
http://www.ambiguism.com/test/
And here is the source code for above test template:
[CODE]<!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
27CDB6E-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>
<a href="#" title="[News]">News</a>
<a href="#" class="current" title="[Folio]">Folio</a>
<a href="#" title="[Resume]">Resume</a>
<a href="#" title="
Code:
">Code</a>
<a href="#" title="[Forum]">Forum</a>
<a href="#" title="[Contact]">Contact</a>
<a href="#" title="[Links]">Links</a>
</div>
<!-- END DIV "BANNER" /////////////// -->
<!-- BEGIN DIV "SHADOW_BANNER" /////////////// -->
<div id="shadow_banner">
</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>
<a href="dotcoms.php" title="[Dotcoms]">Dotcoms</a>
<a href="#" title="check css">CSS</a>
<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
