[SOLVED] Help with positioning in FireFox and IE

CoolBreeze · #1 Oct 4th, 2007, 23:40

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 · #2 Oct 4th, 2007, 23:46

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

CoolBreeze · #3 Oct 4th, 2007, 23:54

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 · #4 Oct 5th, 2007, 01:08

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

CoolBreeze · #5 Oct 5th, 2007, 01:39

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 · #6 Oct 5th, 2007, 01:52

Quote:

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.

Quote:

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 · #7 Oct 5th, 2007, 02:00

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 · #8 Oct 5th, 2007, 02:10

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 · #9 Oct 5th, 2007, 02:16

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 · #10 Oct 5th, 2007, 11:42

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 · #11 Oct 6th, 2007, 00:30

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] css positioning issue	danny322	Web Page Design	4	Nov 23rd, 2007 13:32
[SOLVED] txt positioning in a div	danny322	Web Page Design	2	Nov 13th, 2007 12:39
[SOLVED] positioning problem (ie and ff)	danny322	Web Page Design	4	Nov 9th, 2007 15:31
Firefox Positioning Problems	mikka23	Web Page Design	8	Nov 17th, 2006 09:37
IE/Firefox positioning problems	jordan8201	Web Page Design	11	Dec 6th, 2005 18:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Help with positioning in FireFox and IE