asked on

IE 6 & 7 will not render background and border but Firefox will.

Greetings Experts,

I could use some help with a CSS rendering problem in IE 6 & 7. Everything works fine in Firefox but IE 6 & 7 just refuse to properly render a particular div.

There are two identical divs following the phone number section. The first of these two divs does not render correctly in IE6 & 7 but the second identical div does.

I'm still learning CSS and fully realize that my CSS is not very elegant, and in the process of trying to figure this one out, it has become more convoluted. However, nothing that I have tried has worked and I'm at my wits end. I hope you experts can shed some light on my goof up.

Thanks.

-----------HTML-------------------------
 
<!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>Untitled Page</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="formStyle4 paddingSalesItem topmargin">
	<div>
		<div style="float:left; width:350px">
			<h2 style="margin: 0 0 5px 0;padding: 0px">Mississippi Main Office</h2>
			<p>123 Main Street</p><p>Ridgeland, MS 39157</p>
		</div>
			
		<div class="floatright">
			<img src="images/addressBook.png"/>
		</div>
			
		<div class="cleardiv"></div>
			
	</div>
		
	<br/>
		
	<div>
		<div class="formControl strong">Phone:</div><div class="floatleft"> 555-555-0006</div><br />
		<div class="formControl strong">Fax:</div><div class="floatleft"> 555-555-2576</div><br />
		<div class="formControl strong">Toll Free:</div><div class="floatleft"> 555-555-4882</div><br />
		<br />
	</div>
 
	<div class="paddingSalesItem formStyle">
		<img src="images/profile.png" class="floatleft" height="50" width="40"/>
		<div class="floatleft paddingSales salesman">
			<h3 style="margin: 0 0 5px 0;padding: 0px"><a href="mailto:me@me.com">John Smith</a></h3>
			<p>Regional Sales Representative</p>
		</div>
				
		<div class="salesman2 floatright topmargin2">
			<p><a href="mailto:me@me.com">Email John</a></p>
		</div>
			
		<div class="cleardiv"></div>
	</div>
			
	<div class="paddingSalesItem formStyle ">
			
		<img src="images/profile.png" class="floatleft" height="50" width="40"/>
				
		<div class="floatleft paddingSales salesman">
			<h3 style="margin: 0 0 5px 0;padding: 0px"><a href="mailto:me@me.com">John Smith</a></h3>
			<p>Regional Sales Representative</p>
		</div>
			
		<div class="salesman2 floatright topmargin2">
			<p><a href="mailto:me@me.com">Email John</a></p>
		</div>
		
		<div class="cleardiv"></div>
	</div>
			
</div>
</body>
</html>
 
--------------------CSS------------------------
/* CSS Document */
 
html, body {margin: 0; padding: 0;}
 
body {font-family: Arial, Helvetica, Verdana, Sans-serif; font-size:12px; color:#000; background:#000;}
 
a {color:#4f4b48}
 
h2 {	font-size: 18px; margin:10px 0 10px 0; padding:0; color: #4f4b48;}
 
h3 {font-size: 14px; margin:10px 0 10px 0; padding:0;}
 
p {font-family: Arial, Helvetica, Verdana, Sans-serif; font-size:12px; margin: 0; padding: 0;}
 
img {border-style:none;}
 
.formStyle {background: #fff; border: solid 1px #646262;}
 
.formControl {width: 75px; float:left}
 
.paddingSales {padding: 5px}
 
.paddingSalesItem{padding: 5px; margin-top:5px}
 
.floatleft {float:left}
 
.floatright {float:right}
 
.topmargin {margin-top: 15px;}
 
.topmargin2{margin-top: 5px}
 
.salesman{width:225px;}
 
.salesman2{width:75px;}
 
.formStyle4 {background: #e7e7e7; border: solid 1px #646262;}
 
.cleardiv {clear: both;}
 
.strong {font-weight:bold;}

Open in new window

cssProblem.zip

Thomas4019

What do you mean by class="formControl strong" There doesnt seem to be a class with that name in your CSS document.

bham3dman

ASKER

2 separate classes - formControl and strong

.formControl {width: 75px; float:left}

.strong {font-weight:bold;}

ASKER CERTIFIED SOLUTION

Thomas4019

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bham3dman

ASKER

Thanks for the help. I learned a lot from your response.

Thomas4019

Also note you can use the style and the class tag on the same div. To simplify your code you code use some styles tags or combine and group up some of you classes. For example, with your floatright class, you could also just say style="float:right" which is about as short. But if you notice that you are using the same too classes together alot, i would consider creating 1 class that has the properties of both.

bham3dman

ASKER

Thanks for all of your help!

IE 6 &amp; 7 will not render background and border but Firefox will.

IE 6 & 7 will not render background and border but Firefox will.