SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dont understand onmouseout event +

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    * html #navbar a {margin-top:0}
    I'm not sure why you need the negative margin anyway!

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    e.g.
    Code:
    <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

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Rasmus,
    Code:
    <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

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It isn't invalid. But if you are trying to seperate content from style, you should avoid inline stylesheets as much as possible.
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes I just left inline to show you . Just set up a another class and add it it the existing one.
    Code:
    div class="b4b4b4 anotherclass" etc........
    Hope that helps.

    Paul

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "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?

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <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

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hmm use this instead :
    Code:
    #spacer {background:white}
    It'll carry more weight

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •