SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question PLZ HLP! IE/PC hates my CSS!?! Why??

    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="clsid27CDB6E-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

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't spot any major flaws or things that jump out as IE spoilers, however I did make some code validation observations. As you are using CSS, you should not be relying on HTML attributes like "width="65"". This should all be defined via CSS. As your code basically validates except for minor issues as noted above, my recommendation would be to create special style sheets that address IE 5.5 and 6 issues and use use the following method to call those style sheets:

    Code:
    		<!--[if IE 5]>
    			<link href="/IE5.css" rel="stylesheet" type="text/css">
    		<![endif]-->
    		<!--[if IE 6]>
    			<link href="/IE6.css" rel="stylesheet" type="text/css">
    		<![endif]-->
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks for the feedback Kenneth! I really appreciate you taking the time to look over my code.

    Thanks for pointing out the issue with the "width/hieght" thing, I am going to change that asap... The "if" code looks great too!

    Thanks!
    Cheers
    micky


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •