Member Avatar for StandardsDT

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.

[IMG]http://i183.photobucket.com/albums/x229/standardsdt/firefoxok.jpg[/IMG]

[IMG]http://i183.photobucket.com/albums/x229/standardsdt/IEbad.jpg[/IMG]

<!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>
.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;
}
  • 3 Contributors
  • 3 Replies
  • 145 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by Ritesh_4
Member Avatar for StandardsDT

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?

Member Avatar for MidiMagic

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.

Member Avatar for Ritesh_4

To resize the page to fit window size, use percentage values instead of pixel values, like if your are using 800px, try to find its corresponding % value with the whole site, and use this value instead, this should do the trick, or can try some javascript codes as well which can do this, example:
<script language="JavaScript">

window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);

</script>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.