CaptainB
10-23-2007, 07:52 PM
Hi!
If you look at this page: http://www.behrentzs.com/Untitled-1.html in IE, all looks correct. However when you see it in FF, the menu text is totally messed up and goes right, instead of center as it should be.
I've figured out that it's something with the <ul>, however I'm not totally sure. I can't seem to find the problem. Any clues?
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background-color:#000;
color:#000;
font-family:Verdana; font-size:10px;
}
* { margin:0px;
}
a.menulinks { color:#fff;
font-size:12px;
font-weight:bold;
font-family:arial;
text-decoration:none;
}
a:hover.menulinks { color:#ff6600;
}
ul#menulist { list-style:none;
}
ul#menulist li { margin-bottom:4px;
}
#container { width:800px;
margin-right:auto;
margin-left:auto;
}
#header { width:800px;
height:200px;
background-image:url(banner5.jpg);
background-repeat:no-repeat;
}
#menu { width:99px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align:center;
background-color:#222;
border-left:1px solid #000;
border-top:1px solid #000;
}
#menupic { width:100px;
}
#main { width:698px;
background-color:#333;
float:left;
border:1px solid #000;
}
#footer { width:800px;
height:19px;
float:left;
background-image:url(bg.png);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
HEADER
</div>
<div id="menupic">
<img src="menu.png" alt="" border="0"/>
</div>
<div id="menu">
<ul id="menulist">
<li><a class="menulinks" href="">Anmeldelser</a></li>
<li><a class="menulinks" href="">Forum</a></li>
<li><a class="menulinks" href="">Tutorials</a></li>
<li><a class="menulinks" href="">Sports</a></li>
<li><a class="menulinks" href="">Profile</a></li>
<li><a class="menulinks" href="">Tagwall</a></li>
</ul>
</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin lacus sed orci. Suspendisse sagittis egestas sapien. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mauris nulla, ornare ac, luctus non, blandit quis, enim. Quisque sit amet
purus id sapien dapibus rhoncus. Suspendisse laoreet purus ut magna. Aenean id odio. Quisque sed ante. Aliquam sed tortor vel arcu accumsan molestie. Nulla
velit mauris, varius a, gravida eget, luctus sit amet, ipsum.<br/><br/>
Fusce non felis. Sed vel dolor sit amet urna interdum interdum. Praesent pretium erat sed odio. Quisque eget leo. Donec eget purus. Aliquam congue tempus
tellus. Proin tellus. Donec vitae arcu. In mattis. Aliquam lobortis ipsum quis lectus. <br/><br/>
Vestibulum pretium ultricies mauris. Duis ante nisl, facilisis at, venenatis sed, ultrices ac, eros. Nam nec dui. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Suspendisse posuere turpis ut felis. Donec sem. Nam urna magna, vestibulum sit amet, scelerisque ac,
cursus in, lectus. Cras consectetuer mi sed elit. Donec elementum malesuada ligula. Proin ac purus vel orci aliquet dictum. Morbi vitae dolor. Nunc magna.
Morbi nonummy lectus eu magna. Maecenas semper, risus vel pharetra egestas, magna arcu vestibulum tortor, non rhoncus mi felis non est. Proin massa. Nam
ullamcorper condimentum nunc. Duis laoreet tellus dapibus metus. Ut in dolor vel dolor facilisis aliquam. Vestibulum semper, nibh in scelerisque tempus, leo
purus euismod lectus, ac aliquam diam tortor in risus. <br/><br/>
Praesent iaculis. Curabitur ut arcu. Nulla vulputate, augue id porta iaculis, est nulla cursus turpis, sit amet suscipit tellus nibh ac libero. Vestibulum
non metus. In ac nunc id lorem rhoncus sagittis. Etiam odio. Aliquam elementum scelerisque ipsum. Vivamus malesuada tortor eu arcu. Mauris ultrices neque eu
elit. Vivamus vel mauris. Proin vulputate dui a nisi. Quisque diam orci, feugiat facilisis, sodales nonummy, cursus eget, nisl. Praesent auctor nunc id
velit. Vivamus non dui. <br/><br/>
In posuere ultricies leo. Nulla volutpat. Nulla bibendum. Aliquam metus. Ut vestibulum, quam sit amet condimentum posuere, leo pede lacinia enim, aliquet
aliquam velit ligula ut sapien. Maecenas nec nunc. In gravida molestie mi. Ut augue. Sed id ligula. Suspendisse ac pede. Quisque eget ligula. Nullam vehicula
est sit amet sapien. In auctor pede venenatis lorem. Etiam nec elit vitae leo convallis ultrices. Maecenas blandit posuere nunc. Nullam quis nunc.
</div>
<div id="footer">
</div>
</div>
</body>
</html>
If you look at this page: http://www.behrentzs.com/Untitled-1.html in IE, all looks correct. However when you see it in FF, the menu text is totally messed up and goes right, instead of center as it should be.
I've figured out that it's something with the <ul>, however I'm not totally sure. I can't seem to find the problem. Any clues?
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background-color:#000;
color:#000;
font-family:Verdana; font-size:10px;
}
* { margin:0px;
}
a.menulinks { color:#fff;
font-size:12px;
font-weight:bold;
font-family:arial;
text-decoration:none;
}
a:hover.menulinks { color:#ff6600;
}
ul#menulist { list-style:none;
}
ul#menulist li { margin-bottom:4px;
}
#container { width:800px;
margin-right:auto;
margin-left:auto;
}
#header { width:800px;
height:200px;
background-image:url(banner5.jpg);
background-repeat:no-repeat;
}
#menu { width:99px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align:center;
background-color:#222;
border-left:1px solid #000;
border-top:1px solid #000;
}
#menupic { width:100px;
}
#main { width:698px;
background-color:#333;
float:left;
border:1px solid #000;
}
#footer { width:800px;
height:19px;
float:left;
background-image:url(bg.png);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
HEADER
</div>
<div id="menupic">
<img src="menu.png" alt="" border="0"/>
</div>
<div id="menu">
<ul id="menulist">
<li><a class="menulinks" href="">Anmeldelser</a></li>
<li><a class="menulinks" href="">Forum</a></li>
<li><a class="menulinks" href="">Tutorials</a></li>
<li><a class="menulinks" href="">Sports</a></li>
<li><a class="menulinks" href="">Profile</a></li>
<li><a class="menulinks" href="">Tagwall</a></li>
</ul>
</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin lacus sed orci. Suspendisse sagittis egestas sapien. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mauris nulla, ornare ac, luctus non, blandit quis, enim. Quisque sit amet
purus id sapien dapibus rhoncus. Suspendisse laoreet purus ut magna. Aenean id odio. Quisque sed ante. Aliquam sed tortor vel arcu accumsan molestie. Nulla
velit mauris, varius a, gravida eget, luctus sit amet, ipsum.<br/><br/>
Fusce non felis. Sed vel dolor sit amet urna interdum interdum. Praesent pretium erat sed odio. Quisque eget leo. Donec eget purus. Aliquam congue tempus
tellus. Proin tellus. Donec vitae arcu. In mattis. Aliquam lobortis ipsum quis lectus. <br/><br/>
Vestibulum pretium ultricies mauris. Duis ante nisl, facilisis at, venenatis sed, ultrices ac, eros. Nam nec dui. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Suspendisse posuere turpis ut felis. Donec sem. Nam urna magna, vestibulum sit amet, scelerisque ac,
cursus in, lectus. Cras consectetuer mi sed elit. Donec elementum malesuada ligula. Proin ac purus vel orci aliquet dictum. Morbi vitae dolor. Nunc magna.
Morbi nonummy lectus eu magna. Maecenas semper, risus vel pharetra egestas, magna arcu vestibulum tortor, non rhoncus mi felis non est. Proin massa. Nam
ullamcorper condimentum nunc. Duis laoreet tellus dapibus metus. Ut in dolor vel dolor facilisis aliquam. Vestibulum semper, nibh in scelerisque tempus, leo
purus euismod lectus, ac aliquam diam tortor in risus. <br/><br/>
Praesent iaculis. Curabitur ut arcu. Nulla vulputate, augue id porta iaculis, est nulla cursus turpis, sit amet suscipit tellus nibh ac libero. Vestibulum
non metus. In ac nunc id lorem rhoncus sagittis. Etiam odio. Aliquam elementum scelerisque ipsum. Vivamus malesuada tortor eu arcu. Mauris ultrices neque eu
elit. Vivamus vel mauris. Proin vulputate dui a nisi. Quisque diam orci, feugiat facilisis, sodales nonummy, cursus eget, nisl. Praesent auctor nunc id
velit. Vivamus non dui. <br/><br/>
In posuere ultricies leo. Nulla volutpat. Nulla bibendum. Aliquam metus. Ut vestibulum, quam sit amet condimentum posuere, leo pede lacinia enim, aliquet
aliquam velit ligula ut sapien. Maecenas nec nunc. In gravida molestie mi. Ut augue. Sed id ligula. Suspendisse ac pede. Quisque eget ligula. Nullam vehicula
est sit amet sapien. In auctor pede venenatis lorem. Etiam nec elit vitae leo convallis ultrices. Maecenas blandit posuere nunc. Nullam quis nunc.
</div>
<div id="footer">
</div>
</div>
</body>
</html>