?
Solved

CSS not working in Firefox, but works fine in IE

Posted on 2012-08-30
11
Medium Priority
?
620 Views
Last Modified: 2012-08-30
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
0
Comment
Question by:rkeith2412
11 Comments
 
LVL 7

Expert Comment

by:Frederic Sune
ID: 38350641
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

0
 
LVL 5

Author Comment

by:rkeith2412
ID: 38350680
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

0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 400 total points
ID: 38350764
Add padding:0 to your UL
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 5

Author Comment

by:rkeith2412
ID: 38350778
no change
0
 
LVL 58

Expert Comment

by:Gary
ID: 38350797
The problem is the list not centered? Yes?
0
 
LVL 5

Author Comment

by:rkeith2412
ID: 38350806
no, the problem is the background in the content div
0
 
LVL 5

Author Comment

by:rkeith2412
ID: 38350809
But you are right the link are now centered, I didn't realize they weren't before.
0
 
LVL 12

Accepted Solution

by:
Anuradha Goli earned 1600 total points
ID: 38350813
Add  overflow: auto; to blue;

  .blue{background-color: #08a0ff; border-left: solid black 2px; border-right: solid black 2px;overflow: auto;}
0
 
LVL 2

Expert Comment

by:ransommule
ID: 38350827
you could add conditional syntax to the css. Something like

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
0
 
LVL 58

Expert Comment

by:Gary
ID: 38350848
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
0
 
LVL 5

Author Closing Comment

by:rkeith2412
ID: 38350868
anuradhay - overflow took care of it.

GaryC123 - Thanks for fixing the position of the links.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question