Sent by Josue Martinez on 16 September 2005 18:06
I managed to align the side navigation and main content along a
horizontal line in Firefox. However, in IE6 Win the alignment is
broken.
I guess it's because the side navigation is closer to the top in
Firefox (and I don't know why). I should mention that I used more divs
than I thought I would need precisely so I could position everything
with pixel-precision. Feel free to also comment on the html markup.
Here's a link to the html file in question http://216.180.231.91/~jnmartin/
and here is the text in the style
sheet------------------------------------------------------
/*++++++++++++++++++++++++++++++++ styles for
html elements*/
html, body {
margin: 0;
padding: 0;
}
body {
color: white;
background: url(images/bg_image.gif) fixed;
font-family:"Times New Roman", Times, "New York", serif;
text-align: center;
}
h1 {
font: 900 italic 16px "Times New Roman", Times, "New York", serif;
letter-spacing: 0.11em;
}
#content p {
line-height: 148%;
}
/*++++++++++++++++++++++++++++++ end of styles for html elements*/
/*++++++++++++++++++++++++++++++++++++++++++ navigation menus*/
#navmain{
position: absolute;
top:120px;
margin: 0;
padding: 0;
z-index: 999;
}
#navmain li {
list-style: none;
float: left;
margin-left: 2px;
padding-left: 16px;
font-size: 15px;
line-height:20px;
white-space: nowrap;
background: #00005a url(images/tab_bg.gif) 0 100% no-repeat;
}
#navmain a{
display: block;
float: left;
padding: 0 18px 3px 0;
text-decoration: none;
font-weight: bold;
background: #00005a url(images/tab_bg.gif) 100% 100% no-repeat;
color: #57b8ad;
width: .1em;
}
html>body #navmain a {width: auto;} /*fixes IE6 hack */
/*This comment hides the rule from IE5-Mac\*/
#navmain a {float: none;} /*End IE5-Mac hack\*/
#navmain a:hover {
color: white;
}
#navsec {
position: absolute;
top: 150px;
left: -33px;
list-style: none;
}
* html #navsec a {
width: 100px;
}
#navsec a {
font-size: 12px;
line-height:28px;
letter-spacing: 0.07em;
color: #57b8ad;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
background-color: #000036;
margin-top: 1px;
margin-bottom: 3px;
padding-left: 10px;
border: 2px solid black;
}
#navsec a:hover {
color: white;
}
/*++++++++++++++++++++++++++++++++++++++ ends nav menus*/
/*+++++++++++++++++++++++++++++++ div positioning and styling*/
#bigcontainer {
text-align: left;
position: relative;
width: 567px;
background: #00005a;
margin: 20px auto;
padding: 0;
}
#smallcontainer {
position: relative;
top: 10px;
border: 1px solid yellow;
}
#pageheader {
position: absolute;
top: 0;
width: 567px;
height: 120px;
margin:0;
padding: 0;
background: #000036 url(images/banner.gif) left top no-repeat;
z-index: 1000;
}
#pageheader span {
display: none;
}
#content{
background: #000036 url(images/content_bg.gif) top no-repeat;
width: 400px;
position: relative;
top: 138px;
left:130px;
margin-top:30px;
padding: 10px;
border: 2px solid black;
}
/*++++++++++++++++++++++++++++++++++ ends positioning*/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/