dont understand onmouseout event +

[rmca]

hello

on this site http://home1.stofanet.dk/samtaletera...20sam/dex.html
i have two problems

1) the onmouseout event on the #navbar tag doesnt work perfectly: if i only had one chunk of navigation links, it would, but the space between them activates the onmouseout event - which i dont want it to

i want the onmouseout event to be activated when i mouse of the css box #navbar: not when i mouse off any of the content in #navbar
that means that the onmouseout event shouldnt be activated when i mouse over the padding in the #navbar or when i mouse over the <br /> bit between the chunks of links

can this be done?
is that another trigger event that i need?

2) in ie the top border of the top chunk of links is hidden
this im sure corresponds to the #navbar a having a margin-top of -1px, but that doesnt hide the top border in firefox or opera

is there any way i can tell ie not to hide it?

thanks a bunch
rasmus

[Paul O'B]

Hi,

2) Use the star (universal) selector hack to offer ie only code:

* html #navbar a {margin-top:0}

I'm not sure why you need the negative margin anyway!

Paul

[jamslam]

1. All you're doing is changing the background color, there is no need for javascript in this scenario. Just use the :hover psuedo class on the a element to change background colors.

2. well, don't make it have a margin-top of -1px

[rmca]

i need the -1px margin-top in order to make sure that the actual dividing border between the links are not double - since they all have borders on all four sides and adjacent borders add width to each other

it is not a straight a:hover event: notice that 1) there is a downstate of the first button on page load, 2) this downstate isnt visible when i hover another button, and 3) that when i dont hover any buttons anymore, that the downstate reapears

i cant set the margin-top to 0 in ie, because it doesnt only affect the 1st link but also all the others (and thus rendering the dividing borders double)

i cant just a:hover, because i want the additional functionality described above

thank you for your answers, but they dont satisfy my needs yet
i hope there is a solution

cheers
rasmus

[earther]

i need the -1px margin-top in order to make sure that the actual dividing border between the links are not double - since they all have borders on all four sides and adjacent borders add width to each other

Why not just eliminate the top or bottom border for either one of the two adjacent <div>. For example:
{border-width: 1px 1px 1px 1px ;} and {border-width: 0px 1px 1px 1px ;}

I do this all the time and it works perfectly. The only time I ever need a negative margin is to make css work in NN 4x.

[Paul O'B]

Hi,

Instead of the break in the middle of the links just put another div to hold the mouses attention.

e.g.

<div class="b4b4b4" style="background:#fff" id="spacer" onmouseover="P7_swapClass(0,'spacer','fff','b4b4b4','div')">&nbsp;</div>

Something like that should work.

(Your rollovers seem like a lot of work for a minimal effect of turning the active state off while the mouse goes down the list. I actually prefer the standard css way where the active link stays highlighted while you rollover other links and of course they work when javascript is disabled unlike your version - just a thought )

Your border problem is better fixed as Earther mentioned above and just style the offending divs to have one less (or transparent) border.

Paul

[rmca]

i tryed before with a div spacer, but it seems that if that spacer doesnt have class="b4b4b4" and swap to .fff onmouseover (that means it is identical to all the others) it seems it is interpreted to be a different pool of swap classes
the effect is that it doesnt fix the problem caused by <br /> and the white space (spacer) changes to .b4b4b4 onmouseover (which i would consider an additional problem)
i replicated this nonfix and problem just now

i will try out the border fix to see if it works

thanks so much
rasmus

[rmca]

yeah the border fix works fine
for some reason i cant get the template to update my files, so you wont be able to see the difference
(its probably because the whole site is a duplicate and not the original that has a traditional a:hover and active link that stays highlighted)

thanks
rasmus

[Paul O'B]

Hi Rasmus,

<div class="b4b4b4" style="background:#fff" id="spacer" onmouseover="P7_swapClass(0,'spacer','fff','b4b4b4','div')">&nbsp;</div>

The above code seemed to work perfectly for me when I tried it locally (but i may be missing something ). I gave it the class of b4b4b4 and just hard coded the background color with the inline style and then swapped the spacer id with the active id as per the other links.

Paul

[rmca]

oh i missed the style spec
is this sort of inline style valid?
it validates allright both in css and html, but i seem to recall inline style specs to be bad form
is that so?

thank you very much
rasmus

[LeeCHeSSS]

It isn't invalid. But if you are trying to seperate content from style, you should avoid inline stylesheets as much as possible.

[Paul O'B]

Yes I just left inline to show you . Just set up a another class and add it it the existing one.

div class="b4b4b4 anotherclass" etc........

Hope that helps.

Paul

[LeeCHeSSS]

Note that IE will happily annoy you when you use multiple classnames and create CSS selectors like ".classA.classB" (element that belongs to both classes)

[rmca]

"Note that IE will happily annoy you when you use multiple classnames and create CSS selectors like ".classA.classB" (element that belongs to both classes)"

what does that mean?

[rmca]

<div class="fff b4b4b4" id="spacer" onmouseover="P7_swapClass(0,'spacer','fff','b4b4b4','div')"></div>
doesnt work: it looks fine onload and onmouseover (#fff), but when i mouse off it swaps to #b4b4b4
see http://home1.stofanet.dk/samtaletera...20sam/dex.html
thanks

[Paul O'B]

Hmm use this instead :

#spacer {background:white}

It'll carry more weight

Paul