asked on

CSS not working in Firefox, but works fine in IE

I have the following code that works great in IE but not in Firefox (see attached photo) and I can't figure it out.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />

	<title>Network Support Quick Links</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style type="text/css">
        body {background-color: #6A6A6A;}
        a {color: blue;}
        a:hover {color: orange;}
        .center{display: block; margin: 0 auto; text-align: center;}
        .border {background-color: white; border: solid 2px black; width: 250px; padding: 5px 10px 0 10px; margin: 20px 0 0 0; height: 160px; overflow: auto; overflow-style: scrollbar;}
        .left{float: left; margin-left: 20px;}
        .right{float: right; margin-right: 20px;}
        .banner{width: 600px; margin:0 auto; height: auto; clear: both;}
        .content{width: 596px; margin:0 auto; height: auto; clear: both;}
        .blue{background-color: #08a0ff; border-left: solid black 2px; border-right: solid black 2px;}
        #bottom{border-bottom: solid black 2px;}
        .black{background-color: black;}
        .logo{width: 154px; height: 55px;}
        ul {list-style: none; margin: 10px auto; text-align: center;}
    </style>
</head>

<body>

<div class="banner"><img src="banner2.png" class="center"/></div>
<div class="content blue">
    <div class="border left">
        <img src="logo.png" width="154" height="55" class="center" id="logo1" />
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div class="border right">
        <img src="logo.png" width="154" height="55" class="center" id="logo2" />
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>
<div id="bottom" class="content blue"> &nbsp;</div>
</body>
</html>

Open in new window

CSS.png

Frederic Sune

I think you need to have you class .content blue like this:

Before:

.content{width: 596px; margin:0 auto; height: auto; clear: both;}
.blue{background-color: #08a0ff; border-left: solid black 2px; border-right: solid black 2px;}

After:

.content{width: 596px; margin:0 auto; height: auto; clear: both;}
.content blue{background-color: #08a0ff; border-left: solid black 2px; border-right: solid black 2px;}

Open in new window

rkeith2412

ASKER

That is not valid CSS according to my IDE. I thought you could apply multiple classes by using

<div class="class1 class2"></div>

Open in new window

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rkeith2412

ASKER

no change

Gary

The problem is the list not centered? Yes?

rkeith2412

ASKER

no, the problem is the background in the content div

rkeith2412

ASKER

But you are right the link are now centered, I didn't realize they weren't before.

ASKER CERTIFIED SOLUTION

Anuradha Goli

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ransommule

you could add conditional syntax to the css. Something like

Gary

Add an height to .content.
Because they are floated divs they do not have an effect on the container - so you need to specify the height.
Although there are other hacks this is the easiest

Unless you don't know how long the list is then you will need to do it this way to .content
height: 1%; overflow: hidden;padding-bottom:10px

rkeith2412

ASKER

anuradhay - overflow took care of it.

GaryC123 - Thanks for fixing the position of the links.