...

View Full Version : IE and firefox problems



haveacigar
12-29-2006, 01:02 PM
Hey, im making a website, which looks how i want in firefox, but not in ie.

For some reason ie isnt allowing the navigation box to overlap the content.

here is the 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>Gear Ilfracombe</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<center>
<div style="width:750px; height:auto; " align="left">
<div style="width:193px; height:auto; float:left;">

<img src="novelty.png" alt=""/><br />
<img src="HEAD.png" alt=""/><br />
<img src="PC.png" alt=""/>
</div>
<div style="width:197px; height:auto; float:left; padding-left:10px;">
<img src="GEAR.png" alt=""/>
</div>
</div>

<div id="container">

<div style="background-color:transparent"><img src="images/top_content.png" alt=""/></div>



<div class="nav"><img src="images/nav_top.png" alt=""/>

<div id="navigation">


sdfsdfsdf
<br />
sdfsdfsd
<br />
sdfsdfsdf
<br />

<img src="images/nav_divide.png" alt=""/>
<br />
sdfsdfsdf
<br />
sdfsdf
<br />
<img src="images/nav_divide.png" alt=""/>
<br />

</div><img src="images/nav_bottom.png" /> </div>


<div class="content">
<div style="height:auto;width:638px;overflow:auto;position:relative;z-index:1;background-color:white;border-top:0px;border-left:1px;border-bottom:0px;border-right:1px;border-style:solid;border-color:#000000;padding-left:109px;">

</div>
</div>
</div>
<img src="images/bottom_content.png" alt=""/>
</center>
</body>
</html>




here is the css


/* CSS Document */

body
{
background-color:#990000;

}
.content
{
height:auto;
width:748px;

position:relative;
z-index:1;
background-color:transparent;



}
#container
{
width:780px;
height:900px;


}
#navigation
{
height:300px;
width:118px;
background-color:#CCCCCC;
z-index:auto;
border-top:0px;
border-left:1px;
border-bottom:0px;
border-right:1px;
border-style:solid;
border-color:#000000;
}
.nav
{


position:absolute;
z-index:2;

}



here is the actual site (http://www.alanmonger.co.uk/gear)

any help will be much appreciated :)

_Aerospace_Eng_
12-29-2006, 06:35 PM
You don't seem to ever close your nav div. Validating would have told you this. Learn to use the validator (http://validator.w3.org). Then read the link in my sig titled "Why we won't help you?".

haveacigar
12-30-2006, 01:09 AM
You don't seem to ever close your nav div. Validating would have told you this. Learn to use the validator (http://validator.w3.org). Then read the link in my sig titled "Why we won't help you?".

Sorry, i did check and the div nav was closed. But following a xhtml validation there was the error that there was no alt to nav_bottom.png. The wrap doesnt seem to of helped, which meant you must of missed the end div next to </div><img src="images/nav_bottom.png" /> </div>

but please help me, i would appreciate it

xconspirisist
12-30-2006, 03:05 AM
From what I can tell from your code, you are telling your "nav bar" to float, but not in any position. "float" in css can bring about many many problems when used in the fashion that you demonstrate. I suggest you change the navigation to position:relative; and specify its top and left values from there.

Also: Don't use <center> tags. Especially not for the whole page body as you have done. If you really want everything centered like that you can:

1) Do it in css


body {
text-align: center;
}

2) Do it using div's with margins set to auto.

HTML


<div>
<div style = "width: 50%; margin: auto;">
This text will be in a box, centered.
</div>
</div>


Obviously you could replace the inline CSS from the seccond example into a separate .css file when it goes to production.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum