line break problem

[thescientist]

www.classicimpressionsbyrebecca.comOn my new site, I have this stupid IE//FF problem that causes/doesn't cause a line break (or something) in between the banner and the rollover/image links below it. In IE 7 there is a line and in FF 3 there isn't, which is the way I want it. Any ideas?heres there code<div id="headie_container"><center><h2>C L A S S I C  / I M P R E S S I O N S  / by R E B E C C A </h2></center><img src="images/banner_top.gif" border="0" alt="Banner"/><a href="index.html" onmouseover="roll('home_button', 'images/home_on.gif')" onmouseout="roll('home_button', 'images/home_off.gif')"><img src="images/home_off.gif" border="0" name="home_button" alt="Home"/></a><a href="about.html" onmouseover="roll('about_button', 'images/about_on.gif')" onmouseout="roll('about_button', 'images/about_off.gif')"><img src="images/about_off.gif" border="0" name="about_button" alt="About"/></a><a href="pictures.html" onmouseover="roll('pictures_button', 'images/pictures_on.gif')" onmouseout="roll('pictures_button', 'images/pictures_off.gif')"><img src="images/pictures_off.gif" border="0" name="pictures_button" alt="Pictures"/></a><a href="contact.html" onmouseover="roll('contact_button', 'images/contact_on.gif')" onmouseout="roll('contact_button', 'images/contact_off.gif')"><img src="images/contact_off.gif" border="0" name="contact_button" alt="Contact"/></a><br /><br /></div>if you want the js code for the image rolloever, thats here<script language="javascript" type="text/javascript"><!--function roll(img_name, img_src) { document[img_name].src = img_src; }//--></script>i've run both my xhtml and css through the validator and both came out clean. if the code look jumbled its only because that's the way I got it to work so all the rollovers would remain inline.

[jeffman]

In the short run, try deleting the line break between your banner image tag and your first <a> tag. IE7 is interpreting that as a space that must be rendered.In the long run, try putting the banner in a unique div and the links in a unique div.And start working towards a strict doctype instead of transitional. :)Oh! Do your users a favor and preload your rollover images. You probably have stopped noticing, because they are cached on your computer, but the first time a user rolls over a link, there is a NOTICEABLE wait for the rollover image to load. It really spoils the effect.Javascript for that (don't put it in a function):ro[0] = new Image();ro[0].src = "images/home_on.gif";etc. for all 4

[thescientist]

thanks for the advice, although I don't see a <BR> tag anywhere in my code except for at the end. how do I preload images?

[jeffman]

I didn't mean a <br> tag. I mean you literally hit the return key after the banner image tag and entered a line break in your source code. Put your cursor in there and delete it so that this tag and the next tag actually touch each other. (Just like you did with the anchors and images.)Also, I gave you the code you need to preload an image. It's at the bottom of my post. And here it is again, only this time I did it for all four images. Just paste these four lines into the top of your javascript. They'll actually download the images into your browser's cache, where they will be waiting for your user to trigger the rollover.ro[0] = new Image();ro[0].src = "images/home_on.gif";ro[1] = new Image();ro[1].src = "images/about_on.gif";ro[2] = new Image();ro[2].src = "images/pictures_on.gif";ro[3] = new Image();ro[3].src = "images/contact_on.gif";

[thescientist]

I didn't mean a <br> tag. I mean you literally hit the return key after the banner image tag and entered a line break in your source code. Put your cursor in there and delete it so that this tag and the next tag actually touch each other. (Just like you did with the anchors and images.)Also, I gave you the code you need to preload an image. It's at the bottom of my post. And here it is again, only this time I did it for all four images. Just paste these four lines into the top of your javascript. They'll actually download the images into your browser's cache, where they will be waiting for your user to trigger the rollover.ro[0] = new Image();ro[0].src = "images/home_on.gif";ro[1] = new Image();ro[1].src = "images/about_on.gif";ro[2] = new Image();ro[2].src = "images/pictures_on.gif";ro[3] = new Image();ro[3].src = "images/contact_on.gif";

muschos gracias man, thanks!