Andrew Hoy wrote:
> Hi Everyone,
>
> I'm trying to make a navigation bar that sits at the bottom of a header
> div. It works well in Firefox et al, but in IE6 the header itself is
> stretched down below the navigation bar, and the top of the body is pushed
> up under the header (so that the text is cut off). I took out all the extra
> CSS to try and show the problem, and there is a screenshot of what IE6 is
> doing. I searched for similar problems, but didn't have any luck. Any
> suggestions on how to fix this or where to look for more information about
> similar problems?
>
> http://msurveyz.com
>
> Thanks in advance!
> Andrew
>
Yikes! It is all over the map in compliant browsers. Mac Opera/10.5 and
Mac Safari/4.0.4 are only two among them. IE/6 is a relatively minor issue.
I guess the biggest issue is the absoute positioning from top and the
negative absoute positioning drove some browsers and me goofy.
Re-write these selectors to read only as follows:
#body {
overflow: hidden
border: 1px solid red;
width: 700px;
margin: 20px auto;
text-align: justify;
}
#header {
position: relative;
border: 1px solid red!important;
background: url('head_bac.png') repeat-y;
padding: 10px 20px 0px 20px;
}
#logo img { display:block;}
#tagline {
border: 1px solid blue!important;
width: 645px;
z-index: 5;
position: relative;
bottom: 35px;
left: 50px;
padding-left: 30px;
color: #000;
}
Add these selectors:
* html #tagline { width: 640px;}
h2 {margin: 0;}
Add the borders on these so you can see what is going on:
#tagline .p1 {
border: 1px solid red;
font-style: italic;
font-weight: bold;
}
#tagline .p2 {
border: 1px solid red;
font-weight: bold;
}
And add these selectors:
ul.nav_menu {margin: -20px 0 0 0; padding: 0;border: 1px solid fuchsia;
overflow: hidden;}
* html ul.nav_menu {position:relative; zoom: 1;}
* html #links ul.nav_menu { margin-left:405px;width: 270px; float: none; }
* html #user_action {width: 700px; }
Quick checked in Opera, Safari, Firefox, Opera, Google Chrome, and IE
6/7/8.
If you get stuck see:
html
<http://chelseacreekstudio.com/ca/cssd/m.htm>
the stylesheets are here
<http://chelseacreekstudio.com/ca/cssd/m_files/>
(it may be good idea to put all your styles in one style sheet)
Best,
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
