PDA

View Full Version : CSS menubar working in IE but not Firefox or Opera



joroco
Nov 16th, 2006, 02:48 AM
hi,

i have been told that when writing css the correct way it should work in both firefox and opera and i should have trouble with ie. For me its the other way around so im doing something wrong. I have made a menubar and it shows as i want it to in IE but not in firefox or opera.

Can anyone please tell me what im doing wrong and how the code should be writen correct?

here it is: CSS first

body, html {
padding: 0;
margin: 0;
background: #a1a399;
}

h1 {
font-family: Arial, Verdana;
font-size: 2.2em;
color: #fff;
}

#container {
width: 780px;
background: #bdc5c2;
margin: 0;
padding: 0;
}

#header {
width: 750px;
height: 110px;
background: #d9dedb;
background: url(header.gif);
margin: 0;
padding: 45px 0 45px 30px;
}

#navcontainer ul {
width: 780px;
background: yellow;
list-style: none;
margin: 0;
padding: 0;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
background: blue;
color: white;
padding: 5px 5px 5px 5px;
maring: 0;
float: left;
}

#content {
background: orange;
}

here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Electro Freeze LTD - Isle of Man</title>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>

<div id="container">

<div id="header">
<h1>Electro-Freeze LIMITED</h1>
</div>

<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

<div id="content">
Welcome to the Electro-Freeze Website!

Please choose a link from above to start.

Our qualified engineers provide a full 24 Hr emergency call out services, in case of involuntary

stoppages.

We also specialize in:
Air conditioning
Sales
Installation
Service
Refrigeration engineering
Sales and Service plans
Electrical Engineering
Service Contracts for Air conditioning

Electro-Freeze LIMITED
Summerhill Quarry
Douglas
Isle of Man

Tel: 01624-673921
Fax: 01624-662312
Mobile: 07624-464270

E-Mail: [email protected]
</div>

</div>

</body>

</html>


Thanks for the help if anyone knows how to fix this! :thumbsup:

_Aerospace_Eng_
Nov 16th, 2006, 11:57 PM
First off, don't double post, that only makes people not want the help. The fact that you said you knew you shouldn't have double posted you did it anyways. Follow the rules. Second of all sometimes you need to explain yourself better. You never actually said WHAT was wrong with your menu, you just said it was wrong. Third don't email people just because you think they can help. If they want to help they will. Now with that said try this for your CSS

body, html {
padding: 0;
margin: 0;
background: #a1a399;
}

h1 {
font-family: Arial, Verdana;
font-size: 2.2em;
color: #fff;
}

#container {
width: 780px;
background: #bdc5c2;
margin: 0 auto;
padding: 0;
}

#header {
width: 750px;
height: 110px;
background: #d9dedb;
background: url(header.gif);
margin: 0;
padding: 45px 0 45px 30px;
}
#navcontainer {
background: yellow;
}
#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
background: blue;
color: white;
padding: 5px 5px 5px 5px;
maring: 0;
float: left;
}

#content {
background: orange;
}
.clearfix:after {
content:".";
display:block;
height: 0;
clear: both;
visibility: hidden;
line-height:0px;
font-size:1px;
}
and add class="clearfix" to your div with #navcontainer. You floated your lis therefore you need to clear them. Try doing a little more research before you ask your question, your problem is quite common.

joroco
Nov 17th, 2006, 01:50 AM
ok sorry... :o

thanks by the way for the reply... :thumbsup:

i have tried that and now it works as it should in firefox BUT now it looks how it did in firefox in IE...

its only showing the links and not the "menu container" (the yellow bit)

any ideas anyone? :confused:

_Aerospace_Eng_
Nov 17th, 2006, 06:45 AM
Change this

.clearfix:after {
content:".";
display:block;
height: 0;
clear: both;
visibility: hidden;
line-height:0px;
font-size:1px;
}
to this

.clear {
clear: both;
font-size:0;
line-height:0px;
}
Remove that class I told you to add and then put

<div class="clear">&nbsp;</div> after the closing </ul> tag.

joroco
Nov 17th, 2006, 11:49 AM
OH THANKYOU!! :thumbsup: YOUR A GOD!:D