HTML and CSS

Graphics not displaying properly in IE7

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2005

Posts: 130

Reputation: StandardsDT is an unknown quantity at this point

Solved Threads: 0

StandardsDT StandardsDT is offline

Offline

Junior Poster

Graphics not displaying properly in IE7

Aug 10th, 2007

I'm currently designing a new website for the company I work for. I get the page to display properly in Firefox. The banner lines up properly with the backdrop banner I have set as the background image. However in IE7 everything gets misaligned. I can't quite figure out why it's doing this and why the graphic is displaying a different color in IE. I've never had this problem before in the past. Below is a screen shot of the page in Firefox and then IE. After the images is the coding for both the HTML and CSS. I'm also having a problem with the text not display properly when resizing the window. Everything seems to not stay aligned properly. Pretty much it gets all squished. My HTML and CSS skills aren't what they used to be as it's been a while since I've built a site. Any help greatly appreciated. And if a response is possible by today that would be even more greatly appreciated.

http://i183.photobucket.com/albums/x.../firefoxok.jpg

http://i183.photobucket.com/albums/x...dsdt/IEbad.jpg

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foremost Manufacturing</title>
 
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
 
<body>
<p class="banner"><img alt="" src="bannersample.png" width="468" height="60" /></p>
<p class="banner2"><img alt="" src="reflecting.jpg" /></p>
<div id="navigation">Home About Etc</div>
<P class="content">Content Content Content Content Content Content</p>
</body>
 
</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>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foremost Manufacturing</title>

<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<p class="banner"><img alt="" src="bannersample.png" width="468" height="60" /></p>
<p class="banner2"><img alt="" src="reflecting.jpg" /></p>
<div id="navigation">Home About Etc</div>
<P class="content">Content Content Content Content Content Content</p>
</body>

</html>

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.banner {
	position: absolute;
	top: -15px;
	left: 50px;
	display: block;
 
	}
 
.banner2 {
    position: absolute;
    top: 50px;
    left: 50px;
 
}
#navigation {
	position: absolute;
	top: 130px;
	left: 30px;
}
 
body {
	background-color: #FFFFFF;
	font-family: "Times New Roman";
	color: #000000;
	text-decoration: none;
	background-image: url("nav copy.jpg");
	background-repeat: repeat-x;
 
}
 
.content {
	position: absolute;
	top: 200px;
	left: 50px;
}

Last edited by StandardsDT; Aug 10th, 2007 at 11:01 am.

•

Join Date: Jul 2005

Posts: 130

Reputation: StandardsDT is an unknown quantity at this point

Solved Threads: 0

StandardsDT StandardsDT is offline

Offline

Junior Poster

Re: Graphics not displaying properly in IE7

Aug 10th, 2007

Ok so I solved the problem I described above. It turns out the IE wasn't playing will with the class tag I had set for the banners. So I changed them to DIV tags and it worked. Now I have another question. I would like the page to fit to the window when it's maximized or not. A perfect example of this would be digg.com. If you unmaximize it, it will fit to the window automaticlly. How can I get my site to do this? I'm guessing this would involved javascript?

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Graphics not displaying properly in IE7

Aug 10th, 2007

There is a fundamental difference between IE behavior, and the behavior of FF and the W3C standard, when handling surrounding styles (margins, borders, and padding) for box objects of defined size.

Netscape, Firefox, and other Mozilla browsers put these styles on the outside of the defined size of a box object.

IE crams the surrounding styles inside the defined size of a box object.

So the trick is to make the box object with a defined size have NO suurrounding styles, and put other box objects inside or outside with the surrounding styles where YOU want them.

----

As for making the page so it works when you reduce the size of the browser, the main thing is to locate and size objects so they can fit in a smaller space, or slide past each other.

Alternately, you can define an object to have a minimum width, and force the page to use a scroll bar.

Last edited by MidiMagic; Aug 10th, 2007 at 9:24 pm.

Daylight-saving time uses more gasoline