F Gill Bates. Nuff said.
Yeah I check primarily in Firefox 3 as I go, and refresh after every little thing I do, which is usually adding padding to position things well, which I am learning now IE6 treats differently. But my biggest beef right now is that certain images, in this case my social network badges and the slideshow on index.html seem to scroll with the page
only in IE, I have no idea why because I have no such property set. My pages are validated and so is my CSS. I mean, the good news is only something like 12% of internet users use IE6, the bad is that I can't ignore such a large demographic.
If you have the time, could you just see if anything in my code would cause it to scroll like this? I'm all out of ideas
CODE
<body>
<div id="page-background"><img src="images/woodfloor.jpg" width="100%" height="100%" alt="background image" />
</div>
<div id="wrapper">
<div id="menu">
<ul id="nav">
<li id="home"><a href="index.html">
<span class="button">Home</span>
<span class="text1">The New Home of Brian Molnar</span></a></li>
<li id="news"><a href="news.html">
<span class="button">News</span>
<span class="text2">Press, Band News</span></a></li>
<li id="music"><a href="music.html">
<span class="button">Music</span>
<span class="text2">Listen, Discography, Lyrics</span></a></li>
<li id="tour"><a href="tour.html">
<span class="button">Tour</span>
<span class="text2">View our tour calendar</span></a></li>
<li id="gallery"><a href="gallery/index.html">
<span class="button">Gallery</span>
<span class="text2">Your Favorite Photos</span></a></li>
<li id="contact"><a href="contact.html">
<span class="button">Contact</span>
<span class="text3">Find us, contact us, book us</span></a></li>
</ul>
</div>
<div id="headertop"></div>
<div id="header">
<div id="welcome">
<h2>Welcome to the <br />new home of</h2>
<a href="http://www.brianmolnar.com"><img src="images/bmlogo.gif" alt="Brian Molnar Logo" /></a>
<p>The new sound on the <br />Americana clock radio as the<br /> fog of slumber lifts and we slowly<br /> awaken from the American Dream.</p>
<p>Find us on these sites:</p>
<div id="badges" >
<a href="http://www.facebook.com/home.php?#/pages/Brian-Molnar-and-The-Naked-Hearts/83200657711?ref=mf"><img src="images/badge_fb.jpg" alt="Facebook Badge" width="66" height="62" /></a>
<a href="http://www.myspace.com/brianmolnar"><img src="images/badge_ms.jpg" alt="MySpace Badge" width="67" height="62" /></a>
<a href="http://twitter.com/brianmolnar"><img src="images/badge_tw.jpg" alt="Twitter Badge" width="67" height="62" /></a>
<a href="http://www.last.fm/music/Brian+Molnar" ><img src="images/badge_fm.jpg" alt="Last.FM Badge" width="67" height="62" /></a>
<a href="http://www.youtube.com/user/brianmolnar" ><img src="images/badge_yt.jpg" alt="YouTube Badge" width="67" height="62" /></a>
<a class="badgelink" href="contact.html#rightheader">More..</a> </div>
</div>
<div id="rightheader"><h3> Sign up for our Mailing List!</h3><?php
require "hostbaby";
list_signup();
?>
<div id="fadeshow1"></div>
</div>
<div class="clear"></div>
</div>
Relevant CSS
CODE
#wrapper {
width:807px;
height:auto;
margin: auto auto;
z-index:1;
display:block;
}
/*Header graphics*/
#headertop {
background-image:url(images/headertop.gif);
background-repeat:no-repeat;
width:807px;
height:16px;
}
#header {
width:807px;
background-image:url(images/header.gif);
background-repeat:repeat-y;
}
#rightheader {
text-align: center;
width: 440px;
float: right;
margin-right: 15px;
display:inline;
overflow:hidden;
}
/*Header Content*/
#welcome {
width:340px;
float:left;
display:block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 10px;
text-align:center;
}
#welcome img {border:0;}
#welcome p{
margin-left: 0px;
}
#welcome h2 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#badges {
width: 325px;
height: auto;
float:left;
display:inline;
margin-left: 10px;
}
#badges p{
display:inline;
float:left;
width:auto;
}
#badges img{
position:relative;
float: left;
width: 64px;
height: 64px;
margin:0;
border:0;
}
.badgelink{
float:right;
color:#FFFFFF;
text-decoration: none;
width:auto;
}
.badgelink a:hover{
color:#330000;
text-decoration: underline;
}
Any suggestions you could give me will help a load, I am still relatively new at this stuff. Thanks for the assistance!