...

View Full Version : UL text problem



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>

vtjustinb
10-23-2007, 08:43 PM
Different browsers have different defaults for margins and paddings--FF is picking up padding on the UL. Just add padding: 0; to your ul#menulist and you should be golden.

(in your resetting rule * {} you only zeroed out the margin, not the padding as well)

CaptainB
10-24-2007, 07:02 AM
Ahh! Thanks dude, !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum