Solved

Floating mouseover images next to each other

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help position a graphic properly via CSS 4 23
CSS Font Arial Narrow 1 26
Popup to change image and store url in database 2 30
Basic JavaScript Question 3 38
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now