|
CSS - Ie Hates Me!?
Similar TutorialsTitle: 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: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>
<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>Mo 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>Mo 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>Mo 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 Greetings Well, I hope I'm not the only one who has struggled with trying to get a page to validate AFTER you have finaly got it working like you'd like it to. I've fixed most of the problems, but this one I'm either too daft or too tired to come up with something. First, here is the current page: http://www.freshrod.com/maryville/maryvillemo_mod.html ...and here is where I'm trying to validate it: http://validator.w3.org/ The problem is that I'm trying to apply css to an <h2> and <p> tag, within an <a> tag. It doesn't like that. However, if you see what I'm trying to have it do on the bottom with those box div's I really can't think of a better way. When I try using <span> to format the text I can't get it to respond right either, but this could just be my poor coding. Any suggestions I think i have some overlapping style because safari is displaying white space over my images. any help would be greatly appreciated! http://lonepineprairiepillows.com/cart/Results.cfm?category=2 |
|||||||