Improve company productivity with a Business Account.Sign Up

x
?
Solved

Floating mouseover images next to each other

Posted on 2008-06-12
3
Medium Priority
?
394 Views
Last Modified: 2008-06-20
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
Comment
  • 2
3 Comments
 

Expert Comment

by:jonojones78
ID: 21767868
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
 

Author Comment

by:CreativewithTechnology
ID: 21768460
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
 

Accepted Solution

by:
CreativewithTechnology earned 0 total points
ID: 21768492
I've managed to resolve this by adding clear: both to the topNavWrap DIV.
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

595 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question