1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE compatibility problem - HELP NEEDED ASAP!

Discussion in 'CSS' started by beemaster, Jan 17, 2008.

  1. #1
    I have been building a template for the last couple of days with CSS and I got it all finished (or so I thought) until I had the brilliant idea of checking it in IE. Well, the results are drastically different. I need help to get it all looking the same in FF as well as IE. I know nothing about fixing compatibility problems made by different browsers.

    Please excuse the VERY newbie code. Whoever fixes this problem definitely gets some green!

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Domino's Pizza</title>
    <link rel="stylesheet" type="text/css" href="http://www.canineyouth.com/dominos/style.css" media="screen">
    </head>
    
    <body>
    
    <div id="container">
    	
    	<div id="header">
    		
    		<div class="rounded3 example3"><b class="top3"><b><b><b></b></b></b></b><div class="content3">
    		
    			
    			
    			<h2><a href="#"><img src="http://www.canineyouth.com/dominos/images/dominoslogo2.png"></a></h2>
    		<b><a href="#">Home</a> | <a href="#">Directory</a> | <a href="#">Map</a></b>
    		</div>  <b class="bottom3"><b><b><b></b></b></b></b> </div>
    		
    	</div>
    	
    	<div id="sidebar">
    		
    	<div class="rounded2 example2"><b class="top2"><b><b><b></b></b></b></b>  <div class="content2">
    		<h1>Navigation</h1>
    		
    		<ul>
    			<li><a href="#">Home Page</a></li>
    			<li><a href="#">Webmail</a></li>
    			<li><a href="#">Company Forms</a></li>
    			<li><a href="#">Score Card</a></li>
    			<li><a href="#">Training</a></li>
    			<li><a href="#">Interviewing</a></li>
    			<li><a href="#">Human Resources</a></li>
    			<li><a href="#">Cameras</a></li>
    			<li><a href="#">Pictures</a></li>
    		</ul>
    		
    	</div>  <b class="bottom2"><b><b><b></b></b></b></b> </div>
    		
    	</div>
    	
    	<div id="content">
    		
    		<div class="rounded example"><b class="top"><b><b><b></b></b></b></b>
    		
    			<div class="content">
    				
    				<h1>Did you remember to get your W2 Form?</h1>
    				
    				<p>Have you moved within the past year? Have you submitted and/or renewed a 'Forwarding Address' form with your local post office?  There are several factors that may contribute to why you have not received your W-2. All W-2's are mailed direct from our payroll company before January 31. They are mailed to the address listed on your last payroll check for 2006. It is the responsibility of all team members to verify all information on your check for any corrections and submit the necessary changes and/or concerns to the office.</p>
    				
    				<p>If you would like a copy of your W-2, please send your self addressed stamped envelope to the following address:</p>
    				
    				<ul>
    					<li>Domino's Pizza</li>
    					<li>5496 Walzem Rd.</li>
    					<li>San Antonio, TX 78218</li>
    					<li><b>Attn:</b> W-2 Department</li>
    				</ul>
    				
    				<p>Please indicate your first and last name and your social security number. We will process W-2's on a first come, first served basis. A returned original or an office copy will be printed and mailed out weekly.</p>
    				
    			</div>
    			
    			<b class="bottom"><b><b><b></b></b></b></b>
    			
    		</div>
    		
    		<div id="footer">
    		
    			Copyright 2008 by Domino's Pizza
    		
    		</div>
    		
    	</div>
    	
    </div>
    
    </body>
    </html>
    Code (markup):
    CSS
    
    * {
    	margin: 0px;padding: 0px;
    }
    
    body {
    	clear: both;
    	background-color: #36648B;
    }
    
    ul {
    	list-style-type: none;
    	display: inline;
    }
    
    p {
    	font-size: 12pt;
    	padding: 8px;
    	line-height: 125%;
    }
    
    a {
    	text-decoration: none;
    	color: #333333;
    }
    
    a:hover {
    	text-decoration: underline;
    	color: #000000;
    }
    
    img {
    	border: 0;
    }
    
    #container {
    	background-color: #36648B;
    	width: 900px;
    	padding: 5px;
    	margin: auto;
    }
    
    /**header**/
    #header {
    	width: 740px;
    	padding: 0px;
    	float: left;
    	margin: 5px;
    	clear: both;
    }
    
    #header b {
    	float: right;
    }
    
    #header a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #header a:hover {
    	text-decoration: underline;
    	color: #000000;
    }
    
    /**sidebar**/
    #sidebar {
    	width: 190px;
    	float: left;
    	margin: 5px;
    }
    
    #sidebar h1 {
    	font-size: 15pt;
    	text-align: center;
    	width: 175px;
    	height: 30px;
    	padding: 5px 0px 0px 0px;
    	margin: 0px 0px 15px 0px;
    	border-bottom: 2px solid #B22222;
    }
    
    #sidebar li {
    	background-image: url(images/dominoslogo.png);
    	background-repeat: no-repeat;
    	font-size: 11pt;
    	font-weight: bold;
    	padding: 5px 3px 3px 25px;
    	margin: 5px 0px 0px 15px;
    }
    
    #sidebar li:hover {
    	background-image: url(images/dominoslogo_rotate.png);
    	background-repeat: no-repeat;
    }
    
    /**content**/
    #content {
    	float: left;
    	width: 660px;
    	margin: 5px;
    }
    
    #content h1 {
    	font-size: 15pt;
    	margin: 5px 0px 8px 15px;
    	width: 90%;
    	padding: 0px 0px 15px 0px;
    	border-bottom: 2px solid #B22222;
    	
    }
    
    #content p {
    	padding: 10px 10px 10px 10px;
    }
    
    #content li {
    	font-size: 11pt;
    	font-weight: bold;
    	margin: 5px 5px 5px 25px;
    }
    
    /**footer**/
    #footer {
    	width: 674px;
    	margin: 10px 0px 0px 0px;
    	font-weight: bold;
    	font-size: 8pt;
    	text-align: center;
    }
    
    .rounded { /* fix IE 6 layout */ position:relative; /* IE haslayout */ height:1%; /* obey floats */ overflow:auto; width: 690px; } 
    
    .top, .bottom, .top b, .bottom b { display:block; font:normal 1px/1px sans-serif; position:relative; border-style:solid; border-width:0; } .rounded .top, .rounded .bottom { margin:0 5px; height:4px; } 
    .rounded .top, .rounded .top b { padding-top:1px; } 
    .rounded .bottom, .rounded .bottom b { padding-bottom:1px; } 
    .rounded .top b, .rounded .bottom b { margin:0 -2px; height:3px; } 
    .rounded .top b b, .rounded .bottom b b { margin:0 -1px; height:2px; } 
    .rounded .top b b b, .rounded .bottom b b b { height:1px; } 
    .example .top, .example .top b, .example .bottom, .example .bottom b, .example .content { color:#000000; background-color:#FFFFFF; } 
    .example .content{ font:normal 12px/14px arial,helvetica,sans-serif; padding:3px 8px;}
    
    
    .rounded2 { /* fix IE 6 layout */ position:relative; /* IE haslayout */ height:1%; /* obey floats */ overflow:auto; width: 190px; } 
    
    .top2, .bottom2, .top2 b, .bottom2 b { display:block; font:normal 1px/1px sans-serif; position:relative; border-style:solid; border-width:0; } .rounded2 .top2, .rounded2 .bottom2 { margin:0 5px; height:4px; } 
    .rounded2 .top2, .rounded2 .top2 b { padding-top:1px; } 
    .rounded2 .bottom2, .rounded2 .bottom2 b { padding-bottom:1px; } 
    .rounded2 .top2 b, .rounded2 .bottom2 b { margin:0 -2px; height:3px; } 
    .rounded2 .top2 b b, .rounded2 .bottom2 b b { margin:0 -1px; height:2px; } 
    .rounded2 .top2 b b b, .rounded2 .bottom2 b b b { height:1px; } 
    .example2 .top2, .example2 .top2 b, .example2 .bottom2, .example2 .bottom2 b, .example2 .content2 { color:#000000; background-color:#FFFFFF; } 
    .example2 .content2{ font:normal 12px/14px arial,helvetica,sans-serif; padding:3px 8px;}
    
    
    .rounded3 { /* fix IE 6 layout */ position:relative; /* IE haslayout */ height:1%; /* obey floats */ overflow:auto; width: 890px; } 
    
    .top3, .bottom3, .top3 b, .bottom3 b { display:block; font:normal 1px/1px sans-serif; position:relative; border-style:solid; border-width:0; } .rounded3 .top3, .rounded3 .bottom3 { margin:0 5px; height:4px; } 
    .rounded3 .top3, .rounded3 .top3 b { padding-top:1px; } 
    .rounded3 .bottom3, .rounded3 .bottom3 b { padding-bottom:1px; } 
    .rounded3 .top3 b, .rounded3 .bottom3 b { margin:0 -2px; height:3px; } 
    .rounded3 .top3 b b, .rounded3 .bottom3 b b { margin:0 -1px; height:2px; } 
    .rounded3 .top3 b b b, .rounded3 .bottom3 b b b { height:1px; } 
    .example3 .top3, .example3 .top3 b, .example3 .bottom3, .example3 .bottom3 b, .example3 .content3 { color:#000000; background-color:#36648B; } 
    .example3 .content3{ font:normal 12px/14px arial,helvetica,sans-serif; padding:3px 8px;}
    Code (markup):
    Thanks a million!
     
    beemaster, Jan 17, 2008 IP
  2. Nick

    Nick Peon

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you got this uploaded anywhere so we can see the problem?
     
    Nick, Jan 17, 2008 IP
  3. beemaster

    beemaster Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Oops. I forgot to add the link. I'm sorry.

    Here it is!
     
    beemaster, Jan 17, 2008 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    - I think the reason the image at the top isn't blending in is because of how IE handles PNGs (gamma maybe?) I would suggest trying a GIF with a matte color. And the copy for Domino's Pizza doesn't even look pretty.. you can replicate it via HTML.
    - Use overflow:hidden, NOT overflow auto (scrollbarsssssss)
    - On your nav at the left, don't apply the padding on the LI. Try it on the anchor inside (horizontal padding that is). Try triggering haslayout on the nav items (cause of the disappearing/flickering icons probably) by setting the height to anything. If you want consistent vertical spacing then float the lis and clear left.
     
    soulscratch, Jan 17, 2008 IP
    beemaster likes this.
  5. beemaster

    beemaster Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you for the help soulscratch! I've added rep. The overflow:hidden worked like a charm!

    How exactly would I make the color on the header a matte color?

    And I'm not following on the left nav stuff. Sorry, I'm really new to CSS...
     
    beemaster, Jan 17, 2008 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    If you have the psd, re-slice the image out and save it as a GIF on a transparent background.. then on save for web just choose the same hex # as you already have.. or you can save it as JPEG.
     
    soulscratch, Jan 17, 2008 IP
  7. beemaster

    beemaster Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Okay. I saved it as a JPEG and it matches the color now.

    Could you show me what you mean with the left nav? In IE 6 the icons to the left of each link don't quite display correctly.

    Thanks for all the help!
     
    beemaster, Jan 17, 2008 IP
  8. beemaster

    beemaster Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Can you explain this a little more? Or even show me code to explain? Or anyone else? I really need to get this fixed pronto! Thanks!
     
    beemaster, Feb 4, 2008 IP
  9. MoT

    MoT Peon

    Messages:
    97
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #9
    hi, i think its just IE6 not handling the .pngs to well, you should change them to .jpg, they don't need transparency so it would still be ok.

    try this instead for the sidebar li's, i changed the images to .jpg in the code btw:

    #sidebar li a {
    background: url(images/dominoslogo.jpg) no-repeat left center;
    background-repeat: no-repeat;
    font-size: 11pt;
    font-weight: bold;
    padding: 5px 0px 5px 25px;
    margin: 5px 0px 0px 15px;
    display: block;
    }

    #sidebar li a:hover {
    background: url(images/dominoslogo_rotate.jpg) no-repeat left center;
    }

    it should show up alright.
     
    MoT, Feb 4, 2008 IP
  10. beemaster

    beemaster Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I can't get that to work either. Here is my current code:

    #sidebar li {
    background: url(http://www.dominosmail.com/images/dominoslogo.jpg) no-repeat left center;
    background-repeat: no-repeat;
    font-size: 11pt;
    font-weight: bold;
    padding: 5px 0px 5px 25px;
    margin: 5px 0px 0px 15px;
    display: block;
    }

    Anything wrong with it that you can see? I changed the image to a *.jpg and all that but it still won't work. View it at www.dominosmail.com
     
    beemaster, Feb 5, 2008 IP