Solved

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

Posted on 2009-03-29
6
302 Views
Last Modified: 2013-12-08
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
0
Comment
Question by:bham3dman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 17

Expert Comment

by:Thomas4019
ID: 24015245
What do you mean by   class="formControl strong"   There doesnt seem to be a class with that name in your CSS document.
0
 
LVL 5

Author Comment

by:bham3dman
ID: 24015250
2 separate classes - formControl and strong

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

.strong {font-weight:bold;}
0
 
LVL 17

Accepted Solution

by:
Thomas4019 earned 500 total points
ID: 24015405
Wow, i never knew about that CSS feature. After looking over your code, i noticed that there were WAY too many floating objects. Objects with either float:left or float:right. Floating objects can be hard to use and browsers, especially IE, mess them up if you dont keep it simple. I highly recommend only having one floating object in a div tag. Especially dont have a float:right in a div that is float:left. In addition, if the whole page is just floating where is that actual content.

It was because of your crazy float scheme that you had to have the clearDiv. That usually shouldnt be necessary as div's automatically clear both.

I rearranged your page and removed lots of the floats where they were unnecessary. Also note that when you have a floating div and a regular div in the same area, put the code for the floating div first.

In conclusion, you were using too many float styles.
<!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 class="floatright">
			<img src="images/addressBook.png"/>
		</div>
 
		<div style=" 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>
 
	<br/>
 
	<div>
		<div class="formControl strong">Phone:</div><div> 555-555-0006</div><br />
		<div class="formControl strong">Fax:</div><div> 555-555-2576</div><br />
		<div class="formControl strong">Toll Free:</div><div> 555-555-4882</div><br />
		<br/>
	</div>
 
	<div class="paddingSalesItem formStyle">
		<img src="images/profile.png" class="floatleft" height="50" width="40"/>
 
		<div class="salesman2 floatright topmargin2">
			<p><a href="mailto:me@me.com">Email John</a></p>
		</div>
 
		<div class="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>
 
	<div class="paddingSalesItem formStyle">
		<img src="images/profile.png" class="floatleft" height="50" width="40"/>
 
		<div class="salesman2 floatright topmargin2">
			<p><a href="mailto:me@me.com">Email John</a></p>
		</div>
 
		<div class="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>
</div>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Closing Comment

by:bham3dman
ID: 31564142
Thanks for the help. I learned a lot from your response.
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 24015500
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.
0
 
LVL 5

Author Comment

by:bham3dman
ID: 24015588
Thanks for all of your help!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question