positioning problem PLEASE help

[geoffb]

Hi all,

really need help. have left my brain somewhere and cant get a position of a menu right.

Im using external CSS to achieve my goals, no tables.

I have a main div box that all content is going in.

In the top right hand side of this a want my basic menu.

I want the menu right over to the right, and about 10px down from the top.

the problem is, mozilla is positioning fine, but IE (my version 6) is sticking it to the very top.

here is CSS:
#navigation {
float:right;
width:100%;
height:20px;
border-top:10px;
}

any ideas whats wrong.

i was thinking of creating a seperate style sheet fro IE browsers ie:
<!--[ifIE]><link rel="blar blar blar"/><![endif]-->

then in my ie.css style sheet having this:

#navigation {
border-top; 15px;
}

this does drop it down to the same in each, but im sure i shouldnt have to do this. Ive done it another way but cant remember.

any help

Geoffb

[spinal007]

it's a lot easier if you give us an url to look at but anyway...

if you haven't defined a top margin for your div, DO.
try: margin:10px 0px 0px 0px;

also, remember that in IE, border/padding are not part of the box whilst it firefox they are

[geoffb]

thanks, cant give URL as not web bound yet, only viewing on computer.

have tried to set
border: 0px;
and
padding:0px;

but in firefox it still drops it down more than IE, should i stick to what i have now which is a seperate positioning css style for IE browsers.

this way i can leave firefox where it is and drop IE down to match it, it looks fine like that.

geoffb

[ukgeoff]

Really need to see the rest of the css and your html so we can make a judgement as to what might be influencing what.

As a standard opening bit of css, always start with;

Code: Select all

* {padding: 0; margin: 0}

The reason for this is that different browsers apply different default padding and margins to various elements. This code sets everything to zero so you know where you are starting from.

[Ryan Fait]

While this will solve the problem, it may have adverse effects on the rest of the page:

Code: Select all

#navigation {
    position: absolute;
    top: 20px;
    right: 0;
    width: 100%;
    border-top: 10px;
}

It should be mentioned that setting a global margin and padding of zero is merely a preference, not a requirement for things to turn out right. Personally, I don't do it that way.

I do agree that we need to see the page in action though.