Adding Rollover Images underneath Titleimage

[gregmlb]

Could one of the vB4 wizards here please coach me? I am converting a vb3.8.6 forum over to vB4.1.0PL2, and am attempting to work my way through the various cosmetic issues. TheLastSuperMan was extremely helpful with columnizing my forum ? so that part is done. What I need to do next is add a number of rollover images (each being a link), along with some javascript (google ad) underneath the titleimage, and above the navbar.

Here is a screenshot that shows what my next goal is ? the top image is from my working 3.8.6 forum, and the bottom image is a current snapshot of the 4.1.0PL2 version (which is running as a test forum in a password-protected directory on a different domain of mine):



You can see the working 3.8.6 version of the forum here, if you wish:
http://www.midlifebachelor.com/forum...isplay.php?f=2

FIRST ? THE ROW OF ROLLOVER IMAGES (AT TOP)
I?m not working on the "woman of the month" rollover nor the google ad just yet ? first I'm focusing just on the row of rollover images (each a link) at the top (underneath the titleimage) ... which look like "buttons" for home, news, etc. I've tried to get this working two different ways ? and I'm not quite there yet. Being new to CSS, I'm positive this is where my issue is. Here are the two ways I've tried thus far:

1) Tried creating a float left "row" where the images appear next to each other. Problem with this approach is that if the user narrows the window, the link images wraparound underneath (and I don't want them to ? I need them to stay fixed). Have tried using clear right, clear left, clear both ? and it doesn't seem to work, so maybe I'm doing something wrong.

2) Tried using absolute positioning ? and I would think that would work, but it seems to want to place the link images on top of one other (when they should be next to one another).

In all cases, javascript controls the animation of these link images ? which pre-loads two different images for each link when the page loads, and also flashes a second image when a mouseover event occurs (plus some other stuff).

Here are descriptions with screenshots and code of what I see, and where I need the coaching:

FLOAT LEFT ROW APPROACH
Here is what it looks like using the "float left row approach":

Perfect when the browser window is wider than the titleimage and all of the rollover links:



but when the browser is narrowed, then the rollover link images wraparound underneath (which I do not want), plus it moves the "Forum" and "What?s New?" navbar links to the right (also not wanted), as shown here:



Here is the code associated with the above "float left row approach" as I?m calling it:

Added to additional.css

div.linkrow {
height:auto;
width:1019;
float:left;
}

div.linkrow linkrow {
display:inline;
overflow:hidden;
clear:right;
}

Note that changing clear:right to clear:left or clear:both does not fix this. Also note that I did not include the javascript function source in the above ? just to keep things simple here, but it appears in the header template, just above the linkrow divs.

Bottom of header template:

<div class="linkrow">
<a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/buttons/mlb_home_on.png',1)"><img src="../images/buttons/mlb_home.png" alt="Home" name="Home" width="54" height="35" border="0" id="Home" /></a>
</div>

<div class="linkrow">
<a href="../news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/buttons/mlb_news_on.png',1)"><img src="../images/buttons/mlb_news.png" alt="News" name="News" width="54" height="35" border="0" id="News" /></a>
</div>

<div class="linkrow">
<a href="../datingadvice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Dating Advice','','../images/buttons/mlb_mldatingadvice_on.png',1)"><img src="../images/buttons/mlb_mldatingadvice.png" alt="Midlife Dating Advice" name="Midlife Dating Advice" width="108" height="35" border="0" id="Midlife Dating Advice" /></a>
</div>

<div class="linkrow">
<a href="../article.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Short Midlife Articles','','../images/buttons/mlb_articles_on.png',1)"><img src="../images/buttons/mlb_articles.png" alt="Short Midlife Articles" name="Short Midlife Articles" width="108" height="35" border="0" id="Short Midlife Articles" /></a>
</div>

<div class="linkrow">
<a href="../askmlb/askmlb.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ask Midlife Bachelor','','../images/buttons/mlb_ask_mlb_on.png',1)"><img src="../images/buttons/mlb_ask_mlb.png" alt="Ask Midlife Bachelor" name="Ask Midlife Bachelor" width="114" height="35" border="0" id="Ask Midlife Bachelor" /></a>
</div>

<div class="linkrow">
<a href="../crisis/crisis-intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Your Midlife Crisis','','../images/buttons/mlb_mlcrisis_on.png',1)"><img src="../images/buttons/mlb_mlcrisis.png" alt="Your Midlife Crisis" name="Your Midlife Crisis" width="102" height="35" border="0" id="Your Midlife Crisis" /></a>
</div>

<div class="linkrow">
<a href="../health.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Health Challenges','','../images/buttons/mlb_health_on.png',1)"><img src="../images/buttons/mlb_health.png" alt="Midlife Health Challenges" name="Midlife Health Challenges" width="108" height="35" border="0" id="Midlife Health Challenges" /></a>
</div>

<div class="linkrow">
<a href="../polls.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Polls','','../images/buttons/mlb_polls_on.png',1)"><img src="../images/buttons/mlb_polls.png" alt="Midlife Bachelor Polls" name="Midlife Bachelor Polls" width="59" height="35" border="0" id="Midlife Bachelor Polls" /></a>
</div>

<div class="linkrow">
<a href="../forums" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Discussion Forums','','../images/buttons/mlb_forums_on.png',1)"><img src="../images/buttons/mlb_forums.png" alt="Midlife Bachelor Discussion Forums" name="Midlife Bachelor Discussion Forums" width="103" height="35" border="0" id="Midlife Bachelor Discussion Forums" /></a>
</div>

<div class="linkrow">
<a href="../feedback.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reader Feedback','','../images/buttons/mlb_feedback_on.png',1)"><img src="../images/buttons/mlb_feedback.png" alt="Reader Feedback" name="Reader Feedback" width="108" height="35" border="0" id="Reader Feedback" /></a>
</div>

<div class="linkrow">
<a href="../contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Midlife Bachelor','','../images/buttons/mlb_contactmlb_on.png',1)"><img src="../images/buttons/mlb_contactmlb.png" alt="Contact Midlife Bachelor" name="Contact Midlife Bachelor" width="99" height="35" border="0" id="Contact Midlife Bachelor" /></a>
</div>

<br /><br />

ABSOLUTE POSITIONING APPROACH
And here is what happens when I try absolute positioning:



Here is the code from my stab at absolute positioning ?

additional.css

homelink {
postion:absolute;
width:54; 
height:35;
top: 70;
left:0;
}

newslink {
postion:absolute;
width:54; 
height:35;
top: 70;
left:55;
}

bottom of header template

<div class="homelink">
<a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/buttons/mlb_home_on.png',1)"><img src="../images/buttons/mlb_home.png" alt="Home" name="Home" width="54" height="35" border="0" id="Home" /></a>
</div>

<div class="newslink">
<a href="../news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/buttons/mlb_news_on.png',1)"><img src="../images/buttons/mlb_news.png" alt="News" name="News" width="54" height="35" border="0" id="News" /></a>
</div>

Note that I did not include the javascript function source in the above ? just to keep things simple here, but it appears in the header template, just above the homelink and newslink divs.

Which of the two above approaches should I use for the row of links/rollover images? Can you tell me if you see anything obvious that I'm missing that would make one of the above approaches work? Seems like the "float left row approach" would be the better one to pursue ? but I cannot seem to stop the wraparound. Any suggestions on how to fix this would be greatly appreciated ? thanks!