[SOLVED] Help with positioning in FireFox and IE

[CoolBreeze]

Hi everyone,

I'm still really new to web design and I'm working on a personal site, but I'm having a heck of a time with getting consistent positioning of my ASP.NET controls in Firefox and IE 7.

I have a navigation div that contains a Menu Control from the ASP.NET 2.0 CSS Friendly Control Adapters 1.0. I've been able to get it to position correctly horizontally, so it looks centered between FireFox and IE 7; however, everything looks good in Firefox. When I view it in IE 7 under the menu items there is a number of extra lines, that I have not been able to get rid of.

Viewed in FireFox 2.0




View in IE 7



Below is the CSS for the div that contains this menu.

Code: Select all

#top_nav {
    width: 100%;
    background-color: Teal;
    padding-left: 195px;
    padding-right: 195px;
    padding-bottom:20px;
    padding-top: -5px
}

Can someone please help me to get it to look like it does in Firefox when viewed in IE also?

[Lchad]

Try setting a height keeping in mind all the extra padding and see if you can't get rid of the extra spacing.

[CoolBreeze]

WOW!! That's just as quick as IM. I've never received a response on any forum so quickly! Your suggestion worked, many many thanks. I've been working on trying to get that figured out for a few days now.

Your awesome!

[Lchad]

Isn't it nice when it's that easy! You are so welcome!!

[CoolBreeze]

Yes it very much is. I have two final questions. Can you tell me how I can correct the following issues below:

1. Notice in the screenshots the amount of space between my navigation menu and the other content. How can I have the other content up even with the navigation menu? The amount of space as you can see is different in Firefox and IE, but I would like to not have a space there at all in either browser.

2. Notice also in the screenshots my navigation div extends past everything else. How can I reduce this so that everything is even?

Here is my CSS

Code: Select all

#top_nav {
    width: 100%;
    background-color: Teal;
    height: 19px;
    padding-left: 195px;
    padding-right: 195px;
    padding-bottom: 0px;
}

#container {
    position: relative;
    width: 100%;
}

#left_col {
    width: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
}

#page_content {
    margin-right: 200px;
    margin-left: 200px;
}

#right_col {
    width: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
}

#footer {
    width: 100%;
    background-color: Teal;
}

Viewed in FireFox 2.0.



Viewed in IE 7.

[Monie]

Originally Posted by CoolBreeze

1. Notice in the screenshots the amount of space between my navigation menu and the other content. How can I have the other content up even with the navigation menu? The amount of space as you can see is different in Firefox and IE, but I would like to not have a space there at all in either browser.

Since I dont have the HTML file, I have not tested them yet but the idea is that you should give it some {margin-top: 0} to the #container would do just that, but I am sure that this thing won't work if your div is a absolute or relative position.

Originally Posted by CoolBreeze

2. Notice also in the screenshots my navigation div extends past everything else. How can I reduce this so that everything is even?

Try giving it a width..
and set the {margin: 0 auto;} this will center the #top_nav div in the horizontal center.

[CoolBreeze]

Thanks for the quick reply. As far as Question 1, it is true the position is set to relative for my #container. How would you suggest I fix this problem, because I did try adding a margin-top: 0px and it didn't work when viewed in either browser.

For the Question 2 I already have a width of 100% in my #top_nav, so that it'll adjust with the browser window size. Again I'm still learning, so if there is a better way to do this to get the nav to be in-line with everything else please tell me.

[CoolBreeze]

It appears that the padding in my #top_nav is what is throwing everything off with the extra long nav div; however I don't know how to I can get my menu to center otherwise.

Code: Select all

#top_nav {
    width: 100%;
    background-color: Teal;
    height: 19px;
    padding-left: 195px;
    padding-right: 195px;
    padding-bottom: 0px;
}

[Monie]

Post the CSS and the related HTML file so I can see whats wrong with the code

Well actually, nothing's wrong with the code, just some setting need to be done to get what you want..

[Lchad]

Just guessing here since I haven't seen the working code but try changing the width% of the navigation to 99% or 98% and see if that brings it in a little.

[CoolBreeze]

I think I got it now, by just removing the width % on the nav Div altogether.