8 replies [Last post]
mol
Offline
Regular
out of this world
Last seen: 11 years 20 weeks ago
out of this world
Joined: 2007-08-23
Posts: 20
Points: 0

Hi all,

I make horizontal menu for the header, but I got the menu quiet shift to the right in FF than in IE7.

Here is the code :

body{
margin-top:0px;
}

.container{
width:650px;
border:black solid 1px;
margin:0 auto;
}
.box{
position:relative;
width:650px;
height:150px;
background: green;
margin: 0 auto;
}

form{
display:inline;
position:absolute;
margin:100px 0 0 420px;
}

img{
position:absolute;
margin:70px 0 0 30px;
}

.navi{
display:inline;
position:absolute;
margin:70px 0 0 320px;
}
.navi li{
font: 14px verdana;
color:white;
display:inline;
margin-left:5px;
}
a{}
a:link{color:white; text-decoration:none}
a:visited{color:white; text-decoration:none}
a:hover{color:white; text-decoration:underline}
a:active{color:white; text-decoration:none}

many thanks

AttachmentSize
FF.jpg66.78 KB
IE6.jpg70.47 KB
lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 29 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

We'll need your html code

We'll need your html code too.

:bigoops:

LokiLoks

mol
Offline
Regular
out of this world
Last seen: 11 years 20 weeks ago
out of this world
Joined: 2007-08-23
Posts: 20
Points: 0

Hi Lokiloks, here is the

Hi Lokiloks,

here is the code :


sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 9 years 1 day ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

Give this a try <!DOCTYPE

Give this a try

Untitled Document

* {
margin:0;
padding:0;
}
body{
margin-top:0px;
}
.container{
width:650px;
border:black solid 1px;
margin:0 auto;
}
.box{
width:650px;
height:150px;
background: green;
margin: 0 auto;
}
form{
float:right;
margin:10px 10px 80px 0;
}
img{
margin:70px 0 0 30px;
float:left;
}
#menu {
width:350px;
height:25px;
float:right;
clear:both;
}
.navi{
width:350px;
height:25px;
}
.navi li{
font: 14px verdana;
color:white;
display:inline;
width:60px;
padding:5px;
float:right;
}
.navi a:link{color:#fff; text-decoration:none}
.navi a:visited{color:#fff; text-decoration:none}
.navi a:hover{text-decoration:underline}
.navi a:active{text-decoration:none}

mol
Offline
Regular
out of this world
Last seen: 11 years 20 weeks ago
out of this world
Joined: 2007-08-23
Posts: 20
Points: 0

Hi sticks464, The result

Hi sticks464,

The result still not quiet good..

AttachmentSize
FF.jpg 44.23 KB
IE6.jpg 43.67 KB
mol
Offline
Regular
out of this world
Last seen: 11 years 20 weeks ago
out of this world
Joined: 2007-08-23
Posts: 20
Points: 0

Hi sticks464, I remove

Hi sticks464,

I remove "clear:both" in #menu, the result is good, but the search button is quiet shift to the right in FF than IE

AttachmentSize
FF.jpg 43.88 KB
IE6.jpg 43.65 KB
lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 29 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

First things first, you've

First things first, you've got a + instead of an = in your input box.

Ok, the problem isn't the menu, it's the search form.

Your search form is floated right with a margin, that's gonna cause the IE doubled margin float bug as described at http://www.positioniseverything.net/explorer/doubled-margin.html so you should add display:inline to the floated element.

By the way, your code should have a great deal less divs, you can style the form tag and others, please search this form for thepineapplehead's article on divitis.

Hope that helps,
LokiLoks

mol
Offline
Regular
out of this world
Last seen: 11 years 20 weeks ago
out of this world
Joined: 2007-08-23
Posts: 20
Points: 0

Hi lokiloks, Everything is

Hi lokiloks,

Everything is OK now after I add "display:inline". I'll try to make it less DIV, thx anyway...

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 29 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

good luck, let us know if

good luck,

let us know if you run into any other issues.

LokiLoks