|
| |
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
 |
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...  
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
|
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
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...)
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
. 
