Audra,
Thanks for the suggestion. The server the site is on is whack and not
refreshing properly because I have removed the header div (and actually the
wrapper as well). Here is the real code both xhtml and css:
XHTML:
<body id="navon_home">
<div id="logo">
Mid-City Lumber Co. LTD.
</div>
<!--end logo-->
<div id="masthead"> </div>
<!-- end masthead -->
<div id="navbar">
<script type="text/javascript" src="scripts/top_nav.js"></script>
</div>
<!-- end navbar -->
</body>
~~~~~~~~~~~~~~~~~~~`
CSS:
body#navon_home #navbar li#home a, {
background: #252958 url(../img/navon.jpg) repeat-x;
}
body {
text-align: center;
background: #dee2b7 url(../img/bg.jpg) repeat-x;
}
/******************************
Master Styles
*******************************/
html, body, div, p {
font-family: Georgia, "Times New Roman", Times, serif;
color: #444;
}
html {
font-size: 100%;
height: 100%;
margin-bottom: 1px;
}
a {
color: #741b09;
text-decoration: underline;
outline: none;
}
a:hover {
color: #666;
text-decoration: none;
}
#logo {
position: absolute;
top: 20px;
margin: 0 auto;
width: 209px;
height: 72px;
}
#masthead {
position: absolute;
top: 150px;
margin: 0 auto;
width: 760px;
height: 200px;
background: url(../img/header.jpg) no-repeat !important;
}
h1 {
margin: 0;
position: absolute;
left: 0;
width: 209px;
text-indent: -9999px;
}
h1 a {
display: block;
background: url(../img/logo.gif) no-repeat; /*for Internet Explorer 6*/
height: 72px;
}
/******************************
Navigation Styles
*******************************/
#navbar {
margin: 0;
padding: 0;
width: 760px;
height: 30px;
background: url(../img/navbar.jpg) no-repeat;
position: absolute;
top: 120px;
}
#navbar ul {
margin: 0 3px;
padding: 0;
list-style: none;
font-size: .90em;
}
#navbar li {
margin: 0;
padding: 0;
float: left;
white-space: nowrap;
}
#navbar li a {
height: 18px;
display: block;
float: left;
padding: 5px 10px;
margin: 0;
color: #FBFBF2;
text-align: center;
text-decoration: none;
border-right: 1px solid #19283b;
border-left: 1px solid #bcc5d0;
}
#navbar li a:hover {
color: #fff;
background: url(../img/navon.jpg) repeat-x 0 -30px;
}
#navbar li#home a {
border-left: none;
}
#navbar li#contact a {
border-right: none;
}
Thanks for the help!
Jeralyn
----- Original Message ----
From: Audra Coldiron <[EMAIL PROTECTED]>
To: Jeralyn Merideth <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org
Sent: Monday, June 11, 2007 7:27:53 PM
Subject: Re: [css-d] Having problems getting proper alignment in IE
Jeralyn Merideth wrote:
> Maybe I have looked at it too long and I'm overlooking the obvious. I
> have tried everything I know to get the masthead and main nav
> properly lined up with the bg image in IE. Firefox looks fine. Also,
> the image I created for "current" shows up in IE on the home link but
> not in Firefox. Anyone have suggestions on how to fix this as well?
>
> http://www.mclumber.com/new/index.htm#
I didn't have time to test, but it probably has to do with your empty
#header div. IE will put a space there unless you place an empty
comment inside the div. Try that and see:
<div id="header"><!-- empty comment --></div>
AC
--
Audra Coldiron
Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com
KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
____________________________________________________________________________________
Pinpoint customers who are looking for what you sell.
http://searchmarketing.yahoo.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
