Log in

View Full Version : Navbar Menu has margin or padding problem


Rayzur
03-07-2008, 06:18 AM
Hi,
I am having a margin or padding problem with a navbar menu that is under the header and above the columns. I am getting about 15px of the background color coming through on top and bottom of navbar menu. I am stumped, I am sure it is something simple but I can't seem to find it.
One more thing, I am wanting a 10px padding on the top and bottom of the body, I have it set in the body selector in the css but it is only showing on the top.
The layout can be found here. (http://www.rayswoodworks.com/test_files/mjt-3clmn-px.html)
I just checked it in IE7 and everything looks OK.
So it looks like the problems are with Firefox!

Thanks, Rayzur
rangana
03-07-2008, 06:40 AM
Try adding
margin-top:0;margin-bottom:0; in your #navbarcontainer ul.

or...you could change margin-left:0; to: margin:0 auto 0 auto;

See if it helps :D
Rayzur
03-07-2008, 04:45 PM
Thanks rangana, the change margin-left:0; to margin:0 auto 0 auto; worked fine for the navbar issue.

I still can't get the 10px margin on the bottom of the <body> in Firefox.

It looks like I got a new buggy issue in IE7 now when the window is sized down, right before min-width is reached and horizontal scroll bar is induced the header and navbar shift off to the left. Then they shift to the right when browser window is dragged larger.

IE6 stills needs to have a min/max width expression fed to it.

Any suggestions on making this work. My goal is
1. Three Equalizing Columns with header,navbar, and footer
(fixed width sidebars of say 175px, faux columns would work)

2. Min & Max widths on layout
3. Cross Browser Compatible
rangana
03-08-2008, 01:45 AM
Adding margin-bottom:10px; in the footer div would aide.
Rayzur
03-08-2008, 07:58 PM
Adding margin-bottom:10px; in the footer div would aide.

Thanks rangana, that fixed the footer margin. I still don't understand why Firefox didn't honor the <body> padding settings in the stylesheet.


It looks like I got a new buggy issue in IE7 now when the window is sized down, right before min-width is reached and horizontal scroll bar is induced the header and navbar shift off to the left. Then they shift to the right when browser window is dragged larger.


Any thoughts on what is causing the header shift issue in IE7 ?
rangana
03-11-2008, 12:42 AM
Having a fix width in your header, wrapper and navbar instead of using % will make it easy for you. ;)
Rayzur
03-11-2008, 04:01 AM
I got the IE7 header shifting problem fixed.
All I had to do was place a #wrapper div around everything. If you look at the "color coded div structure" image from the original layout (http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm). You will notice that the header, colmask, & footer are not wrapped up together, it worked fine for the full liquid layout but caused problems for the min-max layout that I was after.

Here is the min-max width version (http://www.rayswoodworks.com/test_files/mjt-3clmn-px.html) for anyone who is interested.

I have a min-max width expression in there for IE6 and it seems to be working for the width control. But there is some kind of float issue going on.

Any IE6 experts out there that can view it and debug it?