Solved

Floating mouseover images next to each other

Posted on 2008-06-12
3
377 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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)

770 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