Topic: 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.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

2

Re: CSS 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>
---------> PLEASE REMEMBER I GOT THE FIRST EVER POST OF PUNBB 1.1! <---------
---------> PLEASE REMEMBER I GOT THE FIRST EVER POST OF PUNBB 1.1! <---------

3 (edited by Louis 2004-02-11 02:55)

Re: CSS problem

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.

Re: CSS problem

Louis: That didn't affect anything. Also, I don't want to remove the margin, i want it to be there in all browsers.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

5 (edited by Louis 2004-02-11 15:54)

Re: CSS problem

Rickard wrote:

... 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>

Re: CSS problem

That did the trick. Thanks a bunch :)

"Programming is like sex: one mistake and you have to support it for the rest of your life."

7 (edited by Louis 2004-02-12 00:26)

Re: CSS problem

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 HTML on that page was ... rough. ;) Too many DIV tags =p

Re: CSS problem

Louis wrote:
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?

"Programming is like sex: one mistake and you have to support it for the rest of your life."

9

Re: CSS problem

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.

---------> PLEASE REMEMBER I GOT THE FIRST EVER POST OF PUNBB 1.1! <---------
---------> PLEASE REMEMBER I GOT THE FIRST EVER POST OF PUNBB 1.1! <---------

Re: CSS problem

Quakenet. The channel isn't "official" or anything. Maybe there will be an official channel later though :)

"Programming is like sex: one mistake and you have to support it for the rest of your life."

11 (edited by Louis 2004-02-12 15:23)

Re: CSS problem

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*)

Re: CSS problem

Yeah, I still need help. However, it will have to wait a few hours. I'm still at the university.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

13

Re: CSS problem

Rickard wrote:

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.