Previous Message
Next Message

Problem aligning the tops of the side navigation and the main content

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/
Previous Message
Next Message