Accessibility

CSS Advisor

Rollover image changes size and position in Internet Explorer

by ttlRC on December 5, 2012 Avg Rating 1.0 (1)   |   Log in to rate post.

Tagged with Explorer 8.0 , Position , Explorer 7.0 , Width/Height , Background

Problem

I have a row of rollover images that act as the navigation buttons of my website. They're all positioned perfectly in Safari and Chrome, but the last in the row drops below in Internet Explorer.

Solution

It seems the images don't fit within the width of the containing box in IE. This is the area where the solution must lie.

Detailed description

Further to the brief description, I've included the link to my site here: http://www.robch.co.uk - the navigation fits fine in Safari and Chrome, but like I say, not in IE.

 

The css code for the surrounding content box is:

#Contentbox {

Width: 923px;

height: 497px;

background: #5c5c5c;

margin-top: 18px;

margin-left: auto;

margin-right: auto;

box-shadow: 0px 0px 17px 3px #a8a8a8;

}

 

The HTML for the content within this, including rollover buttons is:

<div id="Contentbox"><img src="/Images/HomeB2.jpg" width="215" height="41" /><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutRoll','','Images/AboutB2.jpg',1)"><img src="Images/AboutB1.jpg" width="246" height="41" id="AboutRoll" /></a><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('PortfolioRoll','','Images/PortfolioB2.jpg',1)"><img src="Images/PortfolioB1.jpg" width="226" height="41" id="PortfolioRoll" /></a><a href="social.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SocialRoll','','Images/SocialB2R.jpg',1)"><img class="social" src="Images/SocialB1.jpg" width="236" height="41" id="SocialRoll" /></a>

      

      <div id="slidecontain">

      <div class="flexslider">

  <ul class="slides">

    <li>

      <img src="woothemes-FlexSlider-54e6d31/luminaireslide.jpg" />

    </li>

    <li>

      <img src="woothemes-FlexSlider-54e6d31/digitalslide.jpg" />

    </li>

    <li>

      <img src="woothemes-FlexSlider-54e6d31/chairslide.jpg" />

    </li>

    <li>

    <img src="woothemes-FlexSlider-54e6d31/cellslide.jpg"/>

    </li>

  </ul>

</div>

</div>

 

Thanks.

 




Text ID: ROLLOVER_IMAGE_CHANGES_SIZE_AND_POSITION_IN_INTERNET_EXPLORER



Comments (0)

To add a comment, please Log in.








CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)