2 replies [Last post]
fiskah
Offline
newbie
Last seen: 14 years 2 weeks ago
Timezone: GMT+2
Joined: 2007-03-30
Posts: 2
Points: 0

I have this piece of code:


Test design

body {
background: url('images/bodydbg.jpg');
background-color: #131D2F;
background-position: top center;
background-repeat: repeat-y;
margin: 0;
padding: 0;
}
a { text-decoration: none; }

#navigation {
width: 100%;
background-color: red;
display: block;
margin: 0 auto 0 auto;
padding-top: 5px;
background: url('images/menuBG.png');
background-repeat: repeat-x;
background-color: #fff;
height: 30px;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
margin-left: 8px;
margin-right: 8px;
}
#navigation ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

#logo {
float: left;
display: block;
width: 300px;
}
#login {
float: right;
display: block;
width: 458px;
text-align: right;
}
#contentContainer {
margin: 0 auto 0 auto;
}
#headerContainer {
width: 100%;
background-color: yellow;
}
#mainContainer
{
margin: 0 auto 0 auto;
width: 758px;
background-color: #fff;
}

#mainSpacer {
margin-right: 0px;
}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }








LOGIN HERE

 




Test!




In IE it shows correctly: The #navigation background is only in the navigation div, whereas in Firefox the background image for #navigation is shown from the top of the #maincontainer div.

You can see the code live here:
http://justdrink.fiskah.net/design/

What have I done wrong, and how can I fix it?

Thanks in advance!

Tom L
Tom L's picture
Offline
Enthusiast
Liverpool
Last seen: 9 years 51 weeks ago
Liverpool
Timezone: GMT+1
Joined: 2005-09-23
Posts: 91
Points: 2

float your #navigation to

float your #navigation to the left.

and set the padding: 5px

see how it looks then.

You have set two background colours as well: one red, one white, so sort that out and see how it goes.

fiskah
Offline
newbie
Last seen: 14 years 2 weeks ago
Timezone: GMT+2
Joined: 2007-03-30
Posts: 2
Points: 0

Thanks

Thx so much Smile

Floating to the left solved my problem...