PDA

View Full Version : divs are different sizes for IE and firefox



luzhuangzhuang
Aug 10th, 2007, 06:52 PM
Hi All,

I am new to divs and have made a test site on my localhost. I lined up all the divs in firefox, but when I came to view it in IE its all spaced out and the divs look smaller and the gaps between larger. Why is this, and how can I make them the same to look at.
Please help, I scanned the web with no luck.

Here is my info, html first then css.

<!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" xml:lang="en" lang="en">

<head>

<title></title>
<link rel="stylesheet" href="../country/style.css" type="text/css" />
</head>


<div id="logo">
Title
</div>

<a href=""><div id="titlead">
<div id="h1"></div>
</div></a>


<div id="nav-menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>


<div id="leftnav">
<p><div id="h1"></div><p/>
<a href=""></a><br/>
<a href=""></a><br/>
<a href=""></a><br/>
<a href=""></a><br/>
<a href=""></a><br/>
<a href=""></a>
</div>

<div id="languages">
<b></b><br/><br/>
<a href=""></a><br/>
<a href=""></a>
</div>

<a href=""><div id="rightnav1">
<div id="h1"></div>
</div></a>

<a href=""><div id="rightnav2">
<div id="h1"></div>
</div></a>

<a href=""><div id="rightnav3">
<div id="h1"></div>
</div></a>

<div id="intro">
<div id="h1"></div>

</div>

<div id="content">
<div id="h1"></div>
</div>

<div id="footer1">
</div>

<div id="footer2">
</div>

</body>
</html>

Now the css

body {font-family:"verdana";
color:black;
margin: 3em;
background-image: none;
background-color: white;
font-size: .8em;
text-align: left; }

a:link {text-decoration:none;color:white;}
a:visited {text-decoration:none;color:white;}
a:hover {text-decoration:none;color:aqua;}
a:active {text-decoration:none;color:red;}


#logo {
position: absolute;
z-index: 1;
left: 180px;
top: 20px;
background-color: #0099CC;
width: 220px;
height: 103px;
padding: 10px;
border: 2px solid #000000;
}

#titlead {
position: absolute;
left: 440px;
top: 20px;
background-color: yellow;
width: 490px;
height: 70px;
padding: 8px;
border: 2px black dashed;
color: black;
}

#languages {
background-color: brown;
position: absolute;
left: 960px;
top: 20px;
width: 100px;
height: 70px;
padding: 10px;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.2em;
}

#nav-menu li a
{
background-color: purple;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.2em solid purple;
color: #ffffff;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover
{
background-color: #ffffff;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.2em solid purple;
color: purple;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
position: absolute;
width:60em;
left: 440px;
top: 120px;
}


#leftnav {
clear:both;
background-color: #292929;
position: absolute;
left: 180px;
top: 160px;
width: 150px;
height: 250px;
padding: 10px;
padding-top: 30px;
padding-left: 20px;
}


#rightnav1 {
clear:both;
position: absolute;
left: 895px;
top: 160px;
background-color: yellow;
width: 135px;
height: 100px;
padding: 10px;
border: 2px black dashed;
color: black;
}

#rightnav2 {
position: absolute;
left: 940px;
top: 290px;
background-color: yellow;
width: 135px;
height: 100px;
padding: 10px;
border: 2px black dashed;
color: black;
}

#rightnav3 {
position: absolute;
left: 895px;
top: 420px;
background-color: yellow;
width: 135px;
height: 100px;
padding: 10px;
border: 2px black dashed;
color: black;
}

#intro {
clear:both;
position: absolute;
left: 380px;
top: 160px;
background-color: #cc3300;
width: 435px;
height: 146px;
padding: 30px;
padding-top: 10px;
}

#content {
z-index: 1;
position: relative;
margin:0 auto 170px 342px;
top: 252px;
background-color: #cc3300;
width: 435px;
padding: 30px;
min-height: 300px;
height: auto;
_height: 300px;
}



#footer1 {
z-index: 1;
position: relative;
margin-left: 142px;
background-color: #0099CC;
width: 160px;
padding: 10px;
}

#footer2 {
z-index: 1;
position: relative;
margin-left: 142px;
background-color: #0099CC;
width: 900px;
padding: 10px;
}


#h1, #h2 {
color : #ffffff;
font-size: 2em;
}


Thats it, the whole lot with the text removed. Please help, I would really appreciate it. I'm a css noobie drowning here!

EDIT!! I realise now that it is a padding problem, but how to fix it I know not. Please advise how to pad in IE.

twodayslate
Aug 10th, 2007, 10:45 PM
Please use the
Put code in here tags so ut will be easier for us to help you.

edit:// do you have a live preview?