CSS hover issue (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

rdouglass -> CSS hover issue (10/31/2005 15:13:45)

Hi All,

I am bound and determined to learn this CSS stuff well so I undertook a project to convert my new (up and coming) home page to all CSS. I had 5 "rules" I imposed on myself:

1. No JavaScript
2. No tables
3. Looks presentable at 800x600 but scales up well.
4. User feedback (mouseovers)
5. *NO* IE hacks

This is what I came up with:

http://www.rogerdouglass.com/default2.asp

Everything seems to be working well except for 1 glitch. In FF, my center "mouseover" items dont work properly unless you enter the hover from left to right and exit from right to left.

If you load my page (in any browser) and just roll the mouse over the nav links on the left, they work just fine. Displaying and hiding as expected.

If you do the same thing to the links in the center of the page (use Philosophy, Products, and FAQ's for an example) in FF, it only works properly if you start your cursor from the left, enter the link moving to the right, and exit moving back to the left. Try it and you'll see what I mean. IE users don't see it 'cause it seems to work fine in IE (will wonders never cease [;)])

It is the exact same CSS as used in the nav links (except a name change or two) and I cannot figure out why it behaves like that.

I could see if it works that way all the time but again, it works fine when the cursor is entering from the left and exiting to the left. I suspect it has something to do with the box model and layers but I can't seem to track it down. I tried decreasing my <div> sizes thinking they were overlapping or something funky like that but that didn't help.

I really am not interested in any JavaScripts or IE hacks since I'm trying to keep this within my self-imposed rules. I know I can fix it with JS but I want to be able to support browsers that have JS off and have the page look the same.

I guess I'll consider an IE hack if I absolutely have to... [8|] [:D] [:D]

As a side note, I'm really beginning to like this CSS stuff. Once you understand the box model, layers, and absolute / relative stuff; you can do some pretty neat things. Take a look at this page and you'll see what I mean. It's not the most impressive Home Page but it is kinda' neat when you consider you won't find a <script> or <table> tag in the whole thing.



Tailslide -> RE: CSS hover issue (10/31/2005 15:52:28)

Roger

Just a quick point as I'm off out - although you can apply a CSS class to as many items on a page as you like, a CSS id must be unique - it looks like (at a quick glance) you've applied the same id to several different divs which may well cause you problems.



rdouglass -> RE: CSS hover issue (10/31/2005 16:06:17)

quote:

you've applied the same id to several different divs


Yup. Did that on purpose but they are the same way with the nav section.

Do you think I'd be better off changing them to classes? Do you think it would eliminate that issue? I made them id's for a specific reason but I'm not tied to it.



womble -> RE: CSS hover issue (10/31/2005 16:37:37)

I can't see it would make any difference (except that it wouldn't validate with multiple identical ids), but can't figure out what might be causing it. will ponder further.

/knew css would get you in the end [:)][;)]



jaybee -> RE: CSS hover issue (10/31/2005 17:57:57)

I had a problem when I accidentally put an id in a page twice so try making them classes.

The id attribute automatically turns the element into an anchor to which you can direct a link. If you have two on a page it gets all confusled.



rdouglass -> RE: CSS hover issue (10/31/2005 19:02:56)

I think I have removed all duplicate id's - i converted them to classes. I still have a few id's but they are unique.

However I still have the same issue. Any other ideas?

As to the page looks, any comments? Again, I'm trying to stay away from scripts so any ideas anyone has I'm game.

Anyone else try this? ...to make a "respectable" page with no script? Am I wasting my time? (I am learning quite a bit of CSS...)



womble -> RE: CSS hover issue (10/31/2005 19:21:10)

The page looks great! And I'm impressed that it's all css! My latest project, I'm trying to do all css, but had to use a little javascript in the end [&o].

Still can't work out what's going on with the hover though...



jaybee -> RE: CSS hover issue (10/31/2005 19:24:02)

I'll take a look in the morning when I'm a bit more awake.

I've done loads of sites with no JS. My own site is pure css other than 3 mouseovers on the contact page which I stuck in quickly and keep meaning to remove.



womble -> RE: CSS hover issue (10/31/2005 19:30:07)

Roger, have you changed anything? I've just tried it again, and it's working whichever way you move the cursor over it! [sm=boogie.gif]

I was using the 'outline selected element' on the FF web developers toolbar, and at first wondered if it was anything to do with the different cursor (couldn't see how it could be, but who knows?), but I reloaded it, refeshed and tried again and it still does it!


<edit>Did find this on my travels, and wondered if it could be something to do with the z-index?</edit>



rdouglass -> RE: CSS hover issue (10/31/2005 21:06:29)

quote:

Roger, have you changed anything? I've just tried it again,


Actually did just change it. It did have to do with the z index but rather indirectly.

The problem was related to the size of my <div> containing the text that displayed on the hover. I narrowed my <div> by 100px and shifted same <div> right by 100px.
See, for that <div> to work properly, I had to either use a high z-index or place it last on the page. Since it was layered above the link, I was actually hiding the link when the <div> was display: inline;

So the only way the browser realized I was off the link was to move left completely off the <div>. As I said, shrunk the <div> and shifted right. Problem solved.

It was what I suspected - layers and box sizes.

Regardless, I still am becoming fond of this CSS stuff.

Thanks to you all three for your direction. [:)]

Now off to see if I can get it to validate....[:o]



jaybee -> RE: CSS hover issue (11/1/2005 4:32:51)

OK, so I won't look at it. [:D]

CSS becomes personal after a while. You'll get hooked.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625