Browser problem

I have made a html page with css. When I look at this page in Internet Explorer it looks fine, but in other browsers it doesnt look good.

I have read I should have actually defined a doctype.
But when I do this a lot of things change (the size of objects, positioning, ...)

What should I change in this CSS code so that when I change the doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
the page still looks the same as before.

CSS-code



/* CSS Document */


body{padding:0px; margin:0px; background:url(main.png) 0 0 repeat-x #fff; color:#5E5E5E; font:13px/18px Arial, Helvetica, sans-serif;}

 
#top
{
width:800px;
height:110px;


position:absolute;
left:50%;
margin-left:-400px;

margin-top:8px;
background:url(top.png) 0 0 repeat-x #006400;
}

#top img.logo
{
width:250px;
height:100px;
float:left;
}

#top p 
{
font-size:35px;
color:red;font-family:"Comic Sans MS", cursive, sans-serif;
font-weight:bold;
padding-top:50px
}

#navmenu
{
width:900;
position:absolute;
left:50%;
margin-left:-440px; 
}

#navmenu ul
{
list-style-type:none;
margin-top:128px;
}

#navmenu ul li
{
display:inline;
}

#navmenu ul li a
{
width:157;
height:33;
padding-top:4px;
border-style:groove;
border-color:red;
}

#navmenu ul li a:link 
{
background-color:#98bf21;
font-weight:bold;
color:#FFFFFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

#navmenu ul li a:hover
{
background-color:#7a991a;
}

#searchmenu
{
width:800px;


position:absolute;
left:50%;
margin-left:-400px;

margin-top:168px;
padding-top:20px;

border-style:groove;
border-color:red;
}



#middle
{
height:700px;
width: 800px;

position:absolute;
margin: 260 0 0 -400px;
left:50%;
}


#leftmenu
{

float:left;
width:180px;
height:700px;
}

#leftmenu ul 
{
list-style-type:none;
text-transform:uppercase;
background: #f00;
margin-left:5px;
margin-right:5px;
padding-left:10px;

}

#leftmenu ul li a
{
text-decoration:none;
width:150px;
height:20px;
padding-top:4px;
padding-left:4px;
margin-top:15px;

}

#leftmenu ul li a:link,a:visited
{
background-color:#606060;
color:#FFFFFF;
}

#leftmenu ul li a:hover 
{
background-color:#bdb76b;
}

#leftmenu ul.sub
{
padding-left:0;
margin-left:0;
}

#leftmenu ul.sub li a
{
padding-left:20px;
margin-top:0;
}

#leftmenu ul.sub li a:link,ul.sub li a:visited 
{
background-color:#a0a0a0;
}
#leftmenu ul.sub li a:hover 
{
background-color:#bdb76b;
}


#content
{
background: #00f;
float:left;
width:600px;
height:700px;
margin-left:20px;
}




#footer
{
background: #0f0;
clear: left;
width: 800px;
height: 100px;

margin: 980px 0 0 -400px;
position:absolute;
left:50%;

}

HTML-code:


<html>
<head>

<title>cssmenu</title>

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

</head>

<body>

<div id="header">

<div id="top" align="center">
<a href=""><img src="logo.png" width="200" height="120" border="0" class="logo" title="Ejam"/></a>
<p>Alles aan 1€</p>
</div>

<div id="navmenu">
<ul>
<li><a href="#kopen">KOPEN</a></li>
<li><a href="#verkopen">VERKOPEN</a></li>
<li><a href="#beheren">BEHEREN</a></li>
<li><a href="#help">HELP</a></li>
<li><a href="#afmelden">AFMELDEN</a></li>
</ul>
</div>

<div id="searchmenu" align="center">
<form name="input" action="">
<input type="text" name="searchterm" style="width: 350px" />
in :
<select name="categories" style="width: 200px">
<option value="categorie1" selected="selected">categorie1</option>
<option value="categorie2">categorie2</option>
<option value="categorie3">categorie3</option>
<option value="categorie4">categorie4</option>
</select>
<input type="submit" value="ZOEKEN" />
</form>
</div>
</div>


<div id="middle">

<div id="leftmenu">
<ul>
<li><a href="cat1">categorie 1</a></li>
<ul class="sub">
<li><a href="cat1.1">categorie 1.1</a></li>
<li><a href="cat1.2">categorie 1.2</a></li>
<li><a href="cat1.3">categorie 1.3</a></li>
</ul>
<li><a href="cat2">categorie 2</a></li>
<ul class="sub">
<li><a href="cat2.1">categorie 2.1</a></li>
<li><a href="cat2.2">categorie 2.2</a></li>
</ul>
<li><a href="cat3">categorie 3</a></li>
<ul class="sub">
<li><a href="cat3.1">categorie 3.1</a></li>
<li><a href="cat3.2">categorie 3.2</a></li>
<li><a href="cat3.3">categorie 3.3</a></li>
</ul>
<li><a href="cat4">categorie 4</a></li>
<ul class="sub">
<li><a href="cat4.1">categorie 4.1</a></li>
<li><a href="cat4.2">categorie 4.2</a></li>
<li><a href="cat4.3">categorie 4.3</a></li>
<li><a href="cat4.4">categorie 4.4</a></li>
<li><a href="cat4.5">categorie 4.5</a></li>
</ul>
<li><a href="cat5">categorie 5</a></li>
<ul class="sub">
<li><a href="cat5.1">categorie 5.1</a></li>
<li><a href="cat5.2">categorie 5.2</a></li>

</ul>
<br/>
</ul>
</div>

<div id="content">

</div>

</div>


<div id="footer">
</div>


</body>
</html>

I allready know that I have to change this code


width:800px;
height:110px;

position:absolute;
left:50%;
margin-left:-400px;

into this code



width:800px;
height:110px;
margin-left:auto;
margin-right:auto;

in order to center horizontally. But what about the rest. (size of the li items and other things)

Browser problem

poelske88

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week