PDA

View Full Version : IE and Opera display correctly, FF is a rebel

Jesus
07-22-2005, 09:14 PM
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

#header {
position: fixed;
top: 0px;
left: 0px;
padding: 0px;
}

#header ul {
width: 616px;
list-style: none;
margin: 0px;
}

#header a {
text-align: center;
float: left;
width: 120px;
text-decoration: none;
color: #000000;
margin: 0px 4px 0px 0px;
}
#header a.home {
font-size: 21px;
margin: 0px;
background-color: #cccccc;
font-weight: bold;
padding: 4px;
border-top: none;
border-right: 4px solid #000000;
border-bottom: none;
border-left: none;
}
</style>
</head>

<body>
<div id="header">
<ul>
<li><a class="home" href="#">HOME</a></li>
</ul>
</div>
</body>
</html>

This extract of the code should show you what I mean, tested with newest FF version. FF gives me about 40px on the left side. I tried declaring "left: 0px;" all over the place nothing helped.

BTW, that's the first and only differencs between Opera and FF display. Everything else displays just fine. Just goes to show us how much Opera owns FF in compatibility.
_Aerospace_Eng_
07-22-2005, 09:39 PM
BTW, that's the first and only differencs between Opera and FF display. Everything else displays just fine. Just goes to show us how much Opera owns FF in compatibility.
Your kidding right? FF shows you exactly what you code for the most part. IE shows you what it thinks it wants you to see. Opera well it can be forgiving sometimes. An unordered list has a default margin and padding. It varies across different browsers. Have you tried margin-left:0; or padding-left:0; on the UL?
Ranger56
07-22-2005, 09:46 PM
ul{padding-left:0;}

IE is dumb and you may THINK it's displaying things right, but most of the time IE is doing it wrong and everything else that may look wrong is displaying it right.
Jesus
07-22-2005, 09:54 PM
It is strange, because I already set the margin to 0px, I forgot about padding. Browsers should just assume everything to have a nill-value unless specified otherwise.
Ranger56
07-22-2005, 09:55 PM
Well, li's automatically have it, and FF is good and knows that.
mcdougals4all
07-22-2005, 10:12 PM
Browsers should just assume everything to have a nill-value unless specified otherwise
Try the global whitespace reset, courtesy of mindless lemming:
http://leftjustified.net/journal/2004/10/19/global-ws-reset/

The original code also lacks a DOCTYPE which leaves a lot of lee-way in how browsers apply your CSS. Even with the proper DOCTYPE things won't look the same in all browsers but the differences will be more managable.
Jesus
07-22-2005, 10:23 PM
Try the global whitespace reset, courtesy of mindless lemming:
http://leftjustified.net/journal/2004/10/19/global-ws-reset/very usefull, thanks for that snippet.
The original code also lacks a DOCTYPE which leaves a lot of lee-way in how browsers apply your CSS. Even with the proper DOCTYPE things won't look the same in all browsers but the differences will be more managable.I only posted the code I deemed necessary, everything else I removed, that'S why doctype is missing