Magic Border Of The Unexpected Variety

Discussion in 'HTML' started by Blinky the Shark, Apr 17, 2006.

  1. I've got a weird one for you.

    On my main page: http://blinkynet.net/

    With Firefox, if I left click anywhere on the page, the thin black border
    of the first photo (Cousin Stinky) disappears, and the image shifts just
    that tiny amount up and left to compensate. The caption also moves just a
    hair with it.

    With Konqueror, the same thing happens plus the adjacent lines in
    the paragraph in which the image appears shifts a hair to the left as well.

    None of that in Opera.

    Whuh?


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
    Coming Soon: Filtering rules specific to various real news clients
     
    Blinky the Shark, Apr 17, 2006
    #1
    1. Advertising

  2. Blinky the Shark

    Martin Jay Guest

    In message <>,
    Blinky the Shark <> writes
    >I've got a weird one for you.
    >
    >On my main page: http://blinkynet.net/
    >
    >With Firefox, if I left click anywhere on the page, the thin black border
    >of the first photo (Cousin Stinky) disappears, and the image shifts just
    >that tiny amount up and left to compensate. The caption also moves just a
    >hair with it.


    It's this line at the bottom of your CSS that's causing the effect:

    :active IMG { border: none }

    To me, it appear to be a correct action.
    --
    Martin Jay
     
    Martin Jay, Apr 17, 2006
    #2
    1. Advertising

  3. Blinky the Shark wrote:
    > I've got a weird one for you.
    >
    > On my main page: http://blinkynet.net/
    >
    > With Firefox, if I left click anywhere on the page, the thin black border
    > of the first photo (Cousin Stinky) disappears, and the image shifts just
    > that tiny amount up and left to compensate. The caption also moves just a
    > hair with it.
    >
    > With Konqueror, the same thing happens plus the adjacent lines in
    > the paragraph in which the image appears shifts a hair to the left as well.
    >
    > None of that in Opera.


    I think in your CSS:

    :link IMG {

    border : none;

    }
    :visited IMG {

    border : none;

    }
    :active IMG {

    border : none;

    }

    where you have pseudo-classes not attach to any element or class so that
    Firefox et al. will view it as a wildcard and apply to such non-link
    elements as DIV, P, LI and all...and the BODY perhaps? And ':active' on
    a link traps when your have 'mousedown' event, so I assume that Firefox
    is interpreting your CSS as

    BODY:active IMG { border : none; }

    so a 'mousedown' anywhere on the BODY will remove a border on any IMG
    that is child of the BODY thus changing its spacing if the image had a
    border causing the jittery reflow...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 17, 2006
    #3
  4. Jonathan N. Little wrote:

    > Blinky the Shark wrote:
    >> I've got a weird one for you.
    >>
    >> On my main page: http://blinkynet.net/
    >>
    >> With Firefox, if I left click anywhere on the page, the thin black
    >> border of the first photo (Cousin Stinky) disappears, and the image
    >> shifts just that tiny amount up and left to compensate. The caption
    >> also moves just a hair with it.
    >>
    >> With Konqueror, the same thing happens plus the adjacent lines in the
    >> paragraph in which the image appears shifts a hair to the left as well.
    >>
    >> None of that in Opera.

    >
    > I think in your CSS:
    >
    > :link IMG {
    >
    > border : none;
    >
    > }
    > :visited IMG {
    >
    > border : none;
    >
    > }
    > :active IMG {
    >
    > border : none;
    >
    > }
    >
    > where you have pseudo-classes not attach to any element or class so that
    > Firefox et al. will view it as a wildcard and apply to such non-link
    > elements as DIV, P, LI and all...and the BODY perhaps? And ':active' on a
    > link traps when your have 'mousedown' event, so I assume that Firefox
    > is interpreting your CSS as
    >
    > BODY:active IMG { border : none; }
    >
    > so a 'mousedown' anywhere on the BODY will remove a border on any IMG that
    > is child of the BODY thus changing its spacing if the image had a border
    > causing the jittery reflow...


    Thanks, and thanks to all. Methinks I should've figured that out. :-/


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
    Coming Soon: Filtering rules specific to various real news clients
     
    Blinky the Shark, Apr 17, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,264
    tshad
    Jan 31, 2005
  2. MarionEll
    Replies:
    0
    Views:
    440
    MarionEll
    Sep 30, 2003
  3. Replies:
    2
    Views:
    14,132
    Prgodis
    Aug 20, 2006
  4. Alf P. Steinbach

    Ways to solve a puzzle in C++ -- variety

    Alf P. Steinbach, Oct 10, 2005, in forum: C++
    Replies:
    27
    Views:
    1,325
    Branimir Maksimovic
    Oct 13, 2005
  5. Giles Bowkett
    Replies:
    9
    Views:
    409
    Giles Bowkett
    Dec 17, 2007
Loading...

Share This Page