You are not logged in. Please login or register.
PunBB Forums → Programming → CSS problem
What should I do to get the following page to render identically in IE and Firefox. The problem is the list. In Firefox there is no margin below the list, but in IE and Opera, there's a good 10 pixels of margin.
http://w1.421.telia.com/~u42121130/test.html
Please note that the page I'm creating doesn't look at all like this. I just wanted to illustrate the problem.
erm... my mess about (Using IE5)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
ul#navlist
{
background-color: #006595;
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
float: left;
}
ul#navlist li {
display: inline;
}
ul#navlist li a
{
color: #FFFFFF;
text-decoration: none;
border-right: 0px solid #FFFFFF;
float: left;
}
ul#navlist li a:hover
{
background-color: #003E5B;
}
#container {
background: #FFFFFF;
text-align: left;
width: 715px;
margin: 0 auto;
padding-right: 0px;
padding-left: 0px;
voice-family: "\"}\"";
voice-family: inherit;
width: 665px;
border: 1px solid #000000;
}
html>body #container {
width: 665px;
}
#header {
background: #333333;
color: #FF0000;
margin: 0 0 0px 0;
padding: 0;
}
#links {
background: #006595;
margin: 0 0 0px 0;
padding: 0;
}
#main {
background: #6CA9C6;
margin: 0;
padding: 1px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Test test
</div>
<div id="links">
<ul id="navlist">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div id="main">
<h2>What the???</h2>
<p>This is where some weird language stuff from another country is placed. <a href="#">Aquariums</a> hold fish not birds, if you ever drown a bird then congratulations your gonna get pooded on a lot more often.</p>
</div>
</div>
</body>
</html>An easy fix. Add the following to get rid of the 10px:
h2 { margin: 0; }I'd re-work the rest of the stylesheet (you don't need such complex code for that!) but I don't have the time right now, sorry.
Louis: That didn't affect anything. Also, I don't want to remove the margin, i want it to be there in all browsers.
... I don't want to remove the margin, i want it to be there in all browsers.
(lol) Sorry, it wasn't clear ;)
I was on the right track though. It's perfect on Windows in Opera 7, IE 6, IE 5.5 SP2, IE 5.01 SP2 and Firefox =)
I used h2 to remove the whitespace in IE then added a margin to the list, removed the useless float code and finally added a height to the list to correct the display in Mozilla. If this were the final code, I would optimize it further: Swap the heading div for a <h1> tag and remove the container div.
Edit: Added float: left back to ul#navlist li a ? It probably shouldn't affect the display too much, but IE 5.01 SP2 refuses to draw a right border without it. IE 5.5 SP2 and IE 6 will draw the right border with or without it, just like Firefox and Opera 7.
Here's the stylesheet:
<style type="text/css"><!--
#container { text-align: left; margin: 0 auto; padding: 0 25px; width: 665px; voice-family: inherit }
html>body #container { width: 665px }
ul#navlist { background-color: #006595; list-style-type: none; margin: 5px 0 20px; padding: 0;
width: 100%; height: 1.2em }
ul#navlist li { display: inline }
ul#navlist li a { color: #ffffff; text-decoration: none; float: left; border-right: 5px solid #ffffff }
ul#navlist li a:hover { background-color: #003e5b }
#header { color: #ff0000; background: #333333; padding: 0 }
#main { background: #6ca9c6; margin: 0; padding: 0 }
h2 { margin: 0 }
--></style>Here's the body:
<div id="container">
<div id="header">
Test test
</div>
<ul id="navlist">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
<div id="main">
<h2>What the???</h2>
<p>Integer ac felis sit amet ligula ullamcorper cursus. <a
href="#">Aliquam</a> et ligula. Fusce eros purus, aliquam ut, accumsan
nonummy, euismod id, nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>That did the trick. Thanks a bunch :)
That did the trick. Thanks a bunch :)
You're welcome. So what are you doing that had this problem, since that wasn't the page? The HTML on that page was ... rough. ;) Too many DIV tags =p
Rickard wrote:That did the trick. Thanks a bunch :)
You're welcome. So what are you doing that had this problem, since that wasn't the page? The CSS on that page was ... rough. ;)
It's a page for a project I'm doing with a few friends. I need more help though. Can you pop in to #punbb?
You have an IRC network thingy... and the address of the server is... i've got this bit #punbb just need the other bit irc.
Quakenet. The channel isn't "official" or anything. Maybe there will be an official channel later though :)
Aaah! You replied 2 minutes after I left lol. Sorry I missed it. Do you still need the help?
(Here's where private messaging would be ideal *wink*)
Yeah, I still need help. However, it will have to wait a few hours. I'm still at the university.
Yeah, I still need help. However, it will have to wait a few hours.
Sure. Right now it's 10:41 AM ET over here and I'll be off and on until about 3 PM ET... I'll start mIRC now and idle in the chan.
PunBB Forums → Programming → CSS problem
Powered by PunBB, supported by Informer Technologies, Inc.