Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow 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
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is wrong?

    What exactly is messed up? The screen grab you provided differs too much content-wise to say anything conclusive, but to me it kinda looked allright...
    Font-size was way too small, though, and specifying just a percentage is a bit risky; you could consider Owen Brigg's method of combining em sizes for the various elements and a percentage on the body; 76% seems to work well across a wide variety of browsers, including IE/PC.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Also, I would need a screenshot just to see what's wrong... I don't have a Windows Machine here... Well, one that's online...

  • #4
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for links/input/advice guys! I appreciate your time.

    I will post a screen later today... Sorry about not posting a screen of the funkiness in my original post... I guess I just figured all you guys would PC's that would have same problems viewing my test page with IE... Hehe... Long-story-short, IE, all versions on PC, push/expand my DIVs by extreme amounts... So frustrating, esp. when all other browsers display my content pretty well...

    Oh well, I may just scratch my whole layout, and do something more simplistic/less dark/better looking...

    Well, thanks again, I will post a screen after I catch some Zzzzz's

    Cheers!
    M

  • #5
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ha, funny:

    One sizing wisdom is that a document's main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn't for me. Besides, if I was really zen I wouldn't write a stylesheet.
    Hehe, great site (http://www.thenoodleincident.com/ : I really like the simplicity,) I am excited to try his method out! Thanks again for link.

    Cheers
    M


  •  

    Posting Permissions

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