3 replies [Last post]
brettallica
Offline
newbie
Santa Cruz
Last seen: 11 years 34 weeks ago
Santa Cruz
Timezone: GMT-8
Joined: 2009-02-17
Posts: 2
Points: 0

Hi guys,

First post here.

I'm sure my question has a super easy solution, so pardon me if it's lame or whatever. I did a lot of Google searching and have found nothing that addresses my issue directly.

So here's what's happening. I'm coaching/managing my son's single-a baseball team, and I've decided to have a nice little fun spot on my site for it. I have a mouseover effect taking place on an image in the navigation bar on the left of the page. The mouseover effect is such that the the swapped image is longer than the original. This is intentional, as I want the image to "grow" when you hover over it. This "growing" effect is supposed to result in the image going outside the navigation div that's housing it. It works just as it should in Firefox, Safari, and Opera. It does not work on Internet Explorer...surprise surprise.

For a clearer explanation of what I'm trying to do, check out the site itself: http://angels.brettroby.com/ There will be more buttons and more content coming soon, but I got stuck on this issue and would like to wait before continuing.

My goal is for this to work on Internet Explorer; that's it. I hope it's doable, because I really like the concept of it.

If it's proper etiquette to post the code, please let me know and I'll do so.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hello and welcome to CSS

Hello and welcome to CSS Creator.

Its ok to post code, but links are much better than code and any one here should be able to quickly get a look at the code, both html and css, from the link. Tools like firebug mean we can quickly investigate exactly what is happening in a way that just simply isn't possible by reading html and/or css.

The only thing, this isn't really a site check. Site check is aimed at requesting critiques of completed or almost completed sites. I'll move it to another forum after you've seen this reply, just so you don't think your post has been lost or censored.

Your issue.

One of the big differences between IE6 and other current browsers is the way it handles overflow:visible. Overflow is the property that determine what happens when content is larger than the space available. Visible is its default value. In FF and other "compliant" browsers, overflow:visible means "go ahead and draw the content outside the space available, don't worry if it clashes with other content". That is the behaviour you want.

In IE6, overflow:visible means, expand the element to fit the content and shuffle around all the other elements on the page to make way for this change. This isn't what you want.

One way to get the effect you are after in IE and in other browsers is to use position:absolute on the menu item element. You will need to be careful as switching the link to position:absolute could result in the menu collapsing as the browser won't know what height things are.

Try something like the following. Note, I've swapped your p elements for a list as its generally thought that a menu is a list of links rather than several paragraphs. When you use a list for a menu, you will need styles to turn off the default list styles and to cancel the default left indenting.

<ul class="navi">
  <li><a ... ></a></li>
  ...
</ul>
 
ul.navi { 
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
ul.navi li {
  height: 31px;
  margin: 0;
  padding: 5px;
  position: relative;
}
ul.navi a {
  position: absolute;
}

Typically, we wouldn't use javascript for rollovers. If you want to try a CSS rollover, give each LI element a unique "id" value. Then for each li# a set the background to be your rollover image. Create an li# a:hover rule to increase the width of the a element to match the rollover image width so the background will be completely visible and create third rule to make li# a:hover img {visibility:hidden;} . On hover this will hide the normal image, revealing the background. Because its CSS it'll work even if people have javascript disabled. And because the background image was present (even though covered up) it will be already loaded, so there will be no delay while the rollover image is loaded.

brettallica
Offline
newbie
Santa Cruz
Last seen: 11 years 34 weeks ago
Santa Cruz
Timezone: GMT-8
Joined: 2009-02-17
Posts: 2
Points: 0

First of all, I apologize

First of all, I apologize for posting in the improper forum. I didn't really know where this belonged, so I plopped it here. I'll try to be better about that in the future.

Second, thank you for the awesome explanation of the issue at hand. I had no idea about any of this, so your words and time are definitely appreciated.

Third, thank you for the code. That worked beautifully on the first try with no tweaking at all! Great idea to go with the list format, too. One reason I didn't choose to go with a list format at first is because I wanted the buttons to be aligned a certain way in relation to the header at the top of the main body. The list format kind of messes with that, but I'll work on its properties in the stylesheet and see if I can correct that.

Thanks again. I really appreciate it.

jocuri
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2009-05-18
Posts: 1
Points: 0

Hello there,I just want to

Hello there,I just want to say Hi as a new member