IE Shows Spaces Between Boxes

Discussion in 'HTML' started by VUNETdotUS, Nov 7, 2007.

  1. VUNETdotUS

    VUNETdotUS Guest

    Hello,
    IE shows spaces between a few boxes made of ul-li elements in CSS
    unlike Firefox. I tried padding/margin in different places but cannot
    fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
    menu over link "My Test"
    Please, recommend a fix for IE. The menu keeps disappearing because of
    the gaps (spaces) when moving mouse up and down.
    Thanks.
    VUNETdotUS, Nov 7, 2007
    #1
    1. Advertising

  2. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    > Hello,
    > IE shows spaces between a few boxes made of ul-li elements in CSS
    > unlike Firefox. I tried padding/margin in different places but cannot
    > fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
    > menu over link "My Test"
    > Please, recommend a fix for IE. The menu keeps disappearing because of
    > the gaps (spaces) when moving mouse up and down.


    Since this is an 'on hover' effect only, it's difficult to trouble
    shoot with the usual browser plugins. How about giving the same
    example with static code? (i.e. the result of the csshover.htc)

    --
    Els http://locusmeus.com/
    Els, Nov 7, 2007
    #2
    1. Advertising

  3. VUNETdotUS wrote:
    > Hello,
    > IE shows spaces between a few boxes made of ul-li elements in CSS
    > unlike Firefox. I tried padding/margin in different places but cannot
    > fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
    > menu over link "My Test"
    > Please, recommend a fix for IE. The menu keeps disappearing because of
    > the gaps (spaces) when moving mouse up and down.
    > Thanks.
    >


    You're in quirks mode IE will use old non-standard rendering. First
    switch to the 4.01 strict doctype. Remove all those z-index properties
    they are not needed. Many times to successfully debug you need to
    *remove* not *add* things...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 7, 2007
    #3
  4. VUNETdotUS

    Els Guest

    Jonathan N. Little wrote:

    > VUNETdotUS wrote:
    >> Hello,
    >> IE shows spaces between a few boxes made of ul-li elements in CSS
    >> unlike Firefox. I tried padding/margin in different places but cannot
    >> fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
    >> menu over link "My Test"
    >> Please, recommend a fix for IE. The menu keeps disappearing because of
    >> the gaps (spaces) when moving mouse up and down.
    >> Thanks.
    >>

    >
    > You're in quirks mode IE will use old non-standard rendering. First
    > switch to the 4.01 strict doctype. Remove all those z-index properties
    > they are not needed. Many times to successfully debug you need to
    > *remove* not *add* things...


    As far as I can see, his page is rendered in standards mode; a
    transitional doctype doesn't mean quirksmode. Only IE5 does quirksmode
    on this page, but it would do that on a Strict page too.

    --
    Els http://locusmeus.com/
    Els, Nov 7, 2007
    #4
  5. VUNETdotUS

    VUNETdotUS Guest

    On Nov 7, 11:13 am, "Jonathan N. Little" <>
    wrote:
    > VUNETdotUS wrote:
    > > Hello,
    > > IE shows spaces between a few boxes made of ul-li elements in CSS
    > > unlike Firefox. I tried padding/margin in different places but cannot
    > > fix it. The URL ishttp://www.vunet.us/wic/test/ztop.asp, see pop-up
    > > menu over link "My Test"
    > > Please, recommend a fix for IE. The menu keeps disappearing because of
    > > the gaps (spaces) when moving mouse up and down.
    > > Thanks.

    >
    > You're in quirks mode IE will use old non-standard rendering. First
    > switch to the 4.01 strict doctype. Remove all those z-index properties
    > they are not needed. Many times to successfully debug you need to
    > *remove* not *add* things...
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    I removed most z-indexes, removed .htc file, changed doctype to
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    .... same thing. Only when I am over "right div" bar, IE7 does not hide
    menu.
    Sorry, I did not changed my example online: no access at the time. I
    implemented your suggestions locally by copying code.
    Isn't it some CSS box properties I need to look at?
    Thanks.
    VUNETdotUS, Nov 7, 2007
    #5
  6. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    > Sorry, I did not changed my example online: no access at the time. I
    > implemented your suggestions locally by copying code.
    > Isn't it some CSS box properties I need to look at?


    Now that I know it's not the htc file, I copied your page locally, and
    found what's causing it: white space between the <li> elements. I'm
    not sure if there is another way to get rid of it without a lot of
    hacking, but if you just put the <li> elements connected, the space is
    gone.
    Like so:
    <ul>
    <li><a....>AAAAAA</a></li
    ><li><a....>BBBBBB</a></li
    ><li><a....>CCCCCC</a></li
    ><li><a....>DDDDDD</a></li
    ><li><a....>EEEEEE</a></li>

    </ul>

    (or just all on one line, but this way it is easier to read)

    --
    Els http://locusmeus.com/
    Els, Nov 7, 2007
    #6
  7. Els wrote:
    > VUNETdotUS wrote:
    >
    >> Sorry, I did not changed my example online: no access at the time. I
    >> implemented your suggestions locally by copying code.
    >> Isn't it some CSS box properties I need to look at?

    >
    > Now that I know it's not the htc file, I copied your page locally, and
    > found what's causing it: white space between the <li> elements. I'm
    > not sure if there is another way to get rid of it without a lot of
    > hacking, but if you just put the <li> elements connected, the space is
    > gone.
    > Like so:
    > <ul>
    > <li><a....>AAAAAA</a></li
    > ><li><a....>BBBBBB</a></li
    > ><li><a....>CCCCCC</a></li
    > ><li><a....>DDDDDD</a></li
    > ><li><a....>EEEEEE</a></li>

    > </ul>
    >
    > (or just all on one line, but this way it is easier to read)
    >


    IE whitespace bug.. Worst when in quirks mode.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 7, 2007
    #7
  8. VUNETdotUS

    Els Guest

    Jonathan N. Little wrote:

    > IE whitespace bug.. Worst when in quirks mode.


    But IE wasn't in quirks mode :p

    --
    Els http://locusmeus.com/
    Els, Nov 7, 2007
    #8
  9. VUNETdotUS

    VUNETdotUS Guest

    On Nov 7, 12:29 pm, Els <> wrote:
    > VUNETdotUS wrote:
    > > Sorry, I did not changed my example online: no access at the time. I
    > > implemented your suggestions locally by copying code.
    > > Isn't it some CSS box properties I need to look at?

    >
    > Now that I know it's not the htc file, I copied your page locally, and
    > found what's causing it: white space between the <li> elements. I'm
    > not sure if there is another way to get rid of it without a lot of
    > hacking, but if you just put the <li> elements connected, the space is
    > gone.
    > Like so:
    > <ul>
    > <li><a....>AAAAAA</a></li
    > ><li><a....>BBBBBB</a></li
    > ><li><a....>CCCCCC</a></li
    > ><li><a....>DDDDDD</a></li
    > ><li><a....>EEEEEE</a></li>

    > </ul>
    >
    > (or just all on one line, but this way it is easier to read)
    >
    > --
    > Els http://locusmeus.com/


    WOW! Deepest thanks. IE...
    VUNETdotUS, Nov 7, 2007
    #9
    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. gce
    Replies:
    0
    Views:
    755
  2. Stefan Mueller
    Replies:
    5
    Views:
    12,356
    jamesxa
    Jun 16, 2009
  3. John B. Matthews
    Replies:
    4
    Views:
    654
    John B. Matthews
    Sep 12, 2008
  4. Cal Who
    Replies:
    4
    Views:
    385
    Cal Who
    May 17, 2010
  5. Gianni

    IE shows false and Firefox shows true

    Gianni, Jul 10, 2009, in forum: Javascript
    Replies:
    3
    Views:
    440
    Thomas 'PointedEars' Lahn
    Jul 10, 2009
Loading...

Share This Page