Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

CSS Help.

Started by Rapishorrid, Jul 30 2006 01:38 PM

You cannot reply to this topic
Go to first unread post

3 replies to this topic

#1 Rapishorrid

Young Padawan

Members
18 posts

Posted 30 July 2006 - 01:38 PM

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-Type" content="text/html; charset=iso-8859-1" />
<title>Campagna Italiana - Road to Rome</title>
<link rel="stylesheet" type="text/css" href="ci_css.css" />
</head>
<body>
<div id="container">
  <div id="left"> <img id="homebutton" src="images/left_button_home.jpg" /> <img id="mainbuttons" src="images/left_button_about.jpg" /> <img id="mainbuttons" src="images/left_button_team.jpg" /> <img id="mainbuttons" src="images/left_button_media.jpg" /> <img id="mainbuttons" src="images/left_button_downloads.jpg" /> </div>
  <div id="banner"><img src="images/banner.gif" /></div>
  <div id="right"></div>
</div>
</body>
</html>

CSS....

/* CSS Document */
body {
	background-color: #000000;
	background: url(images/bg_body.jpg);
	text-align: center;
}
#container {
	width: 800px;
	height: 665px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: url(images/bg_main.jpg);
	margin-top: 40px;
	margin-bottom: 60px;
}
#banner {
	width: 480px;
	height: 141px;
	margin-left: 10px;
	margin-top: 9px;
	float: left
}
#left {
	width: 140px;
	height: 645px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 9px;
	background: url(images/left_bg.jpg);
	float: left;
}
#homebutton {
	margin-top: 98px;
	margin-left: 6px;
	float: left;
}
#mainbuttons {
	margin-top: 2px;
	margin-left: 6px;
	float: left;
}
#right {
	width: 140px;
	height: 645px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 9px;
	background: url(images/left_bg.jpg);
	float: left;
}

And now for the problem.

In Firefox and Internet Explorer 1.5 the website looks exactly how I want it to look:

Posted Image

However in Internet Explorer 6.0 the website looks like a flaming crap (for lack of a better description):

Posted Image

So anyone have any suggests as to why IE decides to change the margin on the left to that huge size instead of my specified 10px and in doing so pushes the entire layout way to the right of the container... :huh:

As you can tell this is my first CSS layout and I am having just an absolutely wonderful experience!! :rolleyes:

Back to top

#2 Erik Bernskiold

Jedi In Training

Members
422 posts

Gender:Male
Location:Gothenburg, Sweden
Interests:I love to do booth Web Design and Photography. Nothing beats a nice day out in the nature with the camera gear, getting loads of nice photos. I have been playing the flute for 6 years now and I love it, and I am playing the pipe organ as well. I also like to teach other people the in and outs of software such as the CS3 suite from Adobe.

Posted 31 July 2006 - 04:42 AM

Any chance to see the screenshot from the edge (left) of the browser on booth? Cause now the second screenshot does have less margin than the first.

And what are you using IE 1.5 for...

Back to top

#3 Rapishorrid

Young Padawan

Members
18 posts

Posted 31 July 2006 - 06:59 AM

Internet Explorer 6.0:

http://img.photobuck...Xionith/IE6.jpg

FireFox:

http://img.photobuck...ith/FireFox.jpg

After looking at the two sites in comparison it appears that the only that has moved is the container itself. Looking at it in IE the container appears to have shifted 10px left, as is evidenced by the point of the gun (in the background) being covered in IE but not in FF. I have absolutely no idea why it would do this... :biggrin: