Calling all CSS Nerds

gibbons

gibbons

En-Route
Joined
Feb 12, 2005
Messages
3,385
Location
Rogers, Arkansas
Display Name
Display name:
iRide
I'm not much of a CSS guy, but I'm trying. I've got a class I'm using in a menu which works great in IE 7 and Firefox, but Safari on the Mac doesn't seem to like it.

When I move the mouse over the menu item it starts moving to the right. As long as I hold the mouse over it it continues to move to the right. Pretty strange. I suspect it's the "padding-left", but I don't really know.

.menu2_mouseover {BACKGROUND-COLOR: #0e044d; padding-left: 7px; font-size: 10pt; font-weight: normal; color: #ffffff; text-decoration: none; cursor: pointer; cursor: hand;}

I thought Firefox 2.0.0.4 and Safari 2.0.4 would act pretty much the same. Not.

Thanks for any advice you can give.

ps... you can try it here if you have a Mac. Put your cursor over the "Mission Statement" link under "Home".

Ingram Comets FC
 
gibbons said:
I'm not much of a CSS guy, but I'm trying. I've got a class I'm using in a menu which works great in IE 7 and Firefox, but Safari on the Mac doesn't seem to like it.

When I move the mouse over the menu item it starts moving to the right. As long as I hold the mouse over it it continues to move to the right. Pretty strange. I suspect it's the "padding-left", but I don't really know.

.menu2_mouseover {BACKGROUND-COLOR: #0e044d; padding-left: 7px; font-size: 10pt; font-weight: normal; color: #ffffff; text-decoration: none; cursor: pointer; cursor: hand;}

I thought Firefox 2.0.0.4 and Safari 2.0.4 would act pretty much the same. Not.

Thanks for any advice you can give.

ps... you can try it here if you have a Mac. Put your cursor over the "Mission Statement" link under "Home".

Ingram Comets FC
Click to expand...

Yep. Weird.

Safari doesn't use the Gecko engine like Firefox/Mozilla. It's based on the KDE Konquerer code, which prolly means that Konqueror has the same problem.
 
Last edited:
Same in Konqueror.

FWIW, I hear of LOTS of issues with Safari. Somethingawful's forums just went insanely nutty after a recent upgrade for Safari users.

edit: also, no, I don't know the solution. I never much got into CSS unfortunately.
 

Attachments

  • konqueror.jpg
    konqueror.jpg
    145.2 KB · Views: 9
I've queried my CSS guru (and a mac/safari user). Standby...
 
Ok, Chip. I'm not a CSS guy, so I might lose this in the translation.

He said that Safari uses a completely different javascript rendering engine than the other browsers...so the way that you're trying to do the mouseover with a mixture of CSS and javascript is causing it to "re-fire" the mouseover repeatedly. It just keeps applying it over and over (causing it to move across the page).

He said that you should try applying a class out of your CSS to your TD tags instead of trying to do it with the javascript the way that you're doing it.

He suggested that you replace...
Code: 
<TD align="left" target="_self" valign="left" class="menu2_mouseout" onmouseover=
with...
Code: 
<TD align="left" target="_self" valign="left" class="sidemenu" onmouseover=
and put a class called "sidemenu" into your CSS containing the properties of how you want your link to appear.

Something along the lines of ...


Code: 
td.sidemenu a:link
{
    ~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~~~~~
}

td.sidemenu a:hover
{
    ~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~~~~~
}
Does that get you anywhere? I told him that I might have him elaborate with you a little bit further if you can't figure it out from this butchered translation.

P.S. Obviously "~~~~~" means CSS properties. :)
 
That's what it looks like to me, too. Try removing the JavaScript and using CSS's hover facilities.
 
OK. That makes sense but I'm going to have to work on it.

I'm really excited about spending a few hours reworking my code for the six people who use Safari on the Mac. :(
 
No problem, Chip.

Let me know if you need more help. The guy works at my company, I'm sure I could talk him into poking at it a little bit more if you need more insight.
 
You must log in or register to reply here.
Back
Top