Solved

Floating mouseover images next to each other

Posted on 2008-06-12
3
369 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 Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
updateParent() HTML Javascript 21 61
Remove 'disabled' attribute 6 27
css question 1 33
Bootstrap input box width 2 15
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

762 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

20 Experts available now in Live!

Get 1:1 Help Now