• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

Floating mouseover images next to each other

http://ne3d.cwtclients.co.uk/index.html

The link above shows a site we're working on, which has mouseover images for the top navigation. In IE7 these show fine, but in FF the last 3 items seem to move onto the next line but continue in the correct position horizontally.

I can't for the life of me figure out why this is happening.

Could someone please take a look?
.topNavWrap {
	width: 100%;
	height: 30px;
	margin: 0px 0px 10px 0px;
	background-color: #66FF00;
	}
	
.topNavWrap img {
	float: left;
	}
 
<div class="topNavWrap">
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/top-nav-home-on.png',1)"><img src="images/top-nav-home-off.png" alt="Homepage" name="home" width="165" height="30" border="0" id="home" /></a>
                <img src="images/top-nav-split.png" alt="Split" />
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/top-nav-services-on.png',1)"><img src="images/top-nav-services-off.png" alt="Services" name="services" width="152" height="30" border="0" id="services" /></a>
                <img src="images/top-nav-split.png" alt="Split" />
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/top-nav-portfolio-on.png',1)"><img src="images/top-nav-portfolio-off.png" alt="Portfolio" name="portfolio" width="155" height="30" border="0" id="portfolio" /></a>
                <img src="images/top-nav-split.png" alt="Split" />
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clients','','images/top-nav-clients-on.png',1)"><img src="images/top-nav-clients-off.png" alt="Clients" name="clients" width="153" height="30" border="0" id="clients" /></a>
                <img src="images/top-nav-split.png" alt="Split" />
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('workforus','','images/top-nav-work-for-us-on.png',1)"><img src="images/top-nav-work-for-us-off.png" alt="Work for us" name="workforus" width="166" height="30" border="0" id="workforus" /></a>
                <img src="images/top-nav-split.png" alt="Split" />
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/top-nav-contact-on.png',1)"><img src="images/top-nav-contact-off.png" alt="Contact" name="contact" width="154" height="30" border="0" id="contact" /></a>
            </div>

Open in new window

0
CreativewithTechnology
Asked:
CreativewithTechnology
  • 2
1 Solution
 
jonojones78Commented:
Looks like your images are just too big for the width you set. Hard code the width of the top bar, adding a pixel each time to the width, starting at the width of tall the images added together.
0
 
CreativewithTechnologyAuthor Commented:
I originally thought that the images were slightly too big, but if that's the case, why isn't it not just the last image that's on the new line, surely images 4 and 5 should still appear on the right line, as they fit, it's just the last one that wouldn't.
0
 
CreativewithTechnologyAuthor Commented:
I've managed to resolve this by adding clear: both to the topNavWrap DIV.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now