Internet Explorer 6/7 Ignoring Left Padding on One Element?

Discussion in 'HTML' started by Vik Rubenfeld, Jan 17, 2008.

  1. I have links on the top of my home page. Each link has a background
    image (a bullet) and the text of the link. The div for the text has a
    left padding of 30px to keep it from landing on top of the bullet in the
    background image. This is working perfectly on Mac Firefox and Safari,
    but is not yet working on IE 6/7. Oddly, the padding is ignored on the
    first link, but works properly on the other links.

    Here's a link to a .gif showing what it looks like:

    http://www.market-research-services.com/For_Distribution/ie_padding_anoma
    ly.gif

    Here's the HTML:

    <div id="fz_menu">
    <div id="fz_menuin">
    <strong class='selected'>Home</strong><span class='hidden'> |
    </span><a href="http://www.example.com/usda_foods/" >Food
    List</a><span class='hidden'> |
    </span><a href="http://www.example.com/foods_I_add/" >Foods I
    Add</a><span class='hidden'> |
    </span><a href="http://www.example.com/my_food_plan/" >My Food
    Plan</a><span class='hidden'> |
    </span><a href="http://www.example.com/food_menu_manager/" >My
    Menu Manager</a><span class='hidden'> |
    </span><a href="http://www.example.com/my_food_diary/" >My Food
    Diary</a><span class='hidden'> |
    </span><a href="http://www.example.com/forum/index.php"
    >Community</a>


    </div>
    </div>

    And here's the CSS:

    /* fz_menu */

    #fz_menu {
    position:absolute; z-index:100;
    top:0; left:16px;
    width:60%; height:75px;
    margin:0; padding:0 0 0 25px;
    font-size: 90%;
    font-weight: bold;
    background: url('/images/FZ-Logo-4b.gif') top left no-repeat;
    }
    #fz_menuin {
    position:absolute; left:10px; bottom: 0; b\ottom:3px;
    width:150%; padding: 0; paddin\g-top: 3px;
    text-align:left;
    white-space:nowrap;
    border-top: 1px solid #6291CA;
    }
    #fz_menu a, #fz_menu .selected {
    _width:1em;
    margin: 0 0 0 10px; padding: 0 10px 0 30px; paddin\g: 5px 10px 5px
    30px;
    color:#ff8000;
    background: url('/images/sqr-blue.gif') 10px 50% no-repeat;
    white-space:nowrap;
    }
    #fz_menu .selected {
    color: #6291CA;
    }
    #fz_menu a:hover {
    color:white;
    background: #6291CA url('/images/sqr-orange.gif') 10px 50% no-repeat;
    }

    ..hidden { display:none }

    How can I fix this?

    Thanks very much in advance to all for any info!
     
    Vik Rubenfeld, Jan 17, 2008
    #1
    1. Advertising

  2. Vik Rubenfeld

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 17 Jan 2008 17:44:07
    GMT Vik Rubenfeld scribed:

    > I have links on the top of my home page. Each link has a background
    > image (a bullet) and the text of the link. The div for the text has a
    > left padding of 30px to keep it from landing on top of the bullet in

    the
    > background image. This is working perfectly on Mac Firefox and Safari,
    > but is not yet working on IE 6/7. Oddly, the padding is ignored on the
    > first link, but works properly on the other links.
    >
    > Here's a link to a .gif showing what it looks like:
    >
    > http://www.market-research-

    services.com/For_Distribution/ie_padding_anoma
    > ly.gif
    >
    > Here's the HTML:
    >
    > <div id="fz_menu">
    > <div id="fz_menuin">
    > <strong class='selected'>Home</strong><span class='hidden'> |
    > </span><a href="http://www.example.com/usda_foods/" >Food
    > List</a><span class='hidden'> |
    > </span><a href="http://www.example.com/foods_I_add/" >Foods I
    > Add</a><span class='hidden'> |
    > </span><a href="http://www.example.com/my_food_plan/" >My Food
    > Plan</a><span class='hidden'> |
    > </span><a href="http://www.example.com/food_menu_manager/" >My
    > Menu Manager</a><span class='hidden'> |
    > </span><a href="http://www.example.com/my_food_diary/" >My Food
    > Diary</a><span class='hidden'> |
    > </span><a href="http://www.example.com/forum/index.php"
    >>Community</a>

    >
    > </div>
    > </div>
    >
    > And here's the CSS:
    >
    > /* fz_menu */
    >
    > #fz_menu {
    > position:absolute; z-index:100;
    > top:0; left:16px;
    > width:60%; height:75px;
    > margin:0; padding:0 0 0 25px;
    > font-size: 90%;
    > font-weight: bold;
    > background: url('/images/FZ-Logo-4b.gif') top left no-repeat;
    > }
    > #fz_menuin {
    > position:absolute; left:10px; bottom: 0; b\ottom:3px;
    > width:150%; padding: 0; paddin\g-top: 3px;
    > text-align:left;
    > white-space:nowrap;
    > border-top: 1px solid #6291CA;
    > }
    > #fz_menu a, #fz_menu .selected {
    > _width:1em;
    > margin: 0 0 0 10px; padding: 0 10px 0 30px; paddin\g: 5px 10px 5px
    > 30px;
    > color:#ff8000;
    > background: url('/images/sqr-blue.gif') 10px 50% no-repeat;
    > white-space:nowrap;
    > }
    > #fz_menu .selected {
    > color: #6291CA;
    > }
    > #fz_menu a:hover {
    > color:white;
    > background: #6291CA url('/images/sqr-orange.gif') 10px 50% no-

    repeat;
    > }
    >
    > .hidden { display:none }
    >
    > How can I fix this?
    >
    > Thanks very much in advance to all for any info!


    "Home" isn't a link.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 17, 2008
    #2
    1. Advertising

  3. Vik Rubenfeld

    Vik Guest

    Neredbojias <> wrote:

    > "Home" isn't a link.


    True, but, on pages of the site where it is a link, the same thing
    happens.

    What could be causing this?
     
    Vik, Jan 17, 2008
    #3
  4. Vik Rubenfeld

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 17 Jan 2008 22:52:45 GMT
    Vik scribed:

    > Neredbojias <> wrote:
    >
    >> "Home" isn't a link.

    >
    > True, but, on pages of the site where it is a link, the same thing
    > happens.
    >
    > What could be causing this?


    Have you an example?

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 18, 2008
    #4
  5. Neredbojias <> wrote:

    > Have you an example?


    Surely. You can see it at flavorzoom.com. Thanks very much in advance
    for any thoughts!
     
    Vik Rubenfeld, Jan 18, 2008
    #5
  6. Vik Rubenfeld

    GTalbot Guest

    On 17 jan, 12:44, Vik Rubenfeld <> wrote:

    > I have links on the top of my home page. Each link has a background



    > How can I fix this?
    >
    > Thanks very much in advance to all for any info!


    Vik,

    Would it be possible for you to
    - fix the validation markup errors in your webpage, all of them
    - then fix the CSS errors in your CSS code, all of them, in particular
    the ones targeting IE as CSS hacks
    - then provide the URL of (temporary or current) webpage where the
    problem may still be occuring

    It is useless to post code if we do not have access to the whole code
    loaded on a web-accessible webpage. Sometimes, it could even be
    necessary to check the HTTP headers of the server...

    Regards, Géard
     
    GTalbot, Jan 18, 2008
    #6
  7. GTalbot <> wrote:

    > Vik,
    >
    > Would it be possible for you to
    > - fix the validation markup errors in your webpage, all of them
    > - then fix the CSS errors in your CSS code, all of them, in particular
    > the ones targeting IE as CSS hacks
    > - then provide the URL of (temporary or current) webpage where the
    > problem may still be occuring
    >
    > It is useless to post code if we do not have access to the whole code
    > loaded on a web-accessible webpage. Sometimes, it could even be
    > necessary to check the HTTP headers of the server...
    >
    > Regards, Géard


    You are quite right. I have put up a small test file at:

    http://flavorzoom.com/anomaly.html

    This has just the CSS and the HTML needed to demonstrate the anomaly. I
    validated it at http://validator.w3.org/.

    As before, the page looks as it is expected to in Mac Firefox and
    Safari, but not in IE 6/7.

    Thank you very much in advance for any thoughts on what could be causing
    this!
     
    Vik Rubenfeld, Jan 18, 2008
    #7
  8. Vik Rubenfeld

    rf Guest

    "Vik Rubenfeld" <> wrote in message
    news:-sjc.supernews.net...
    > GTalbot <> wrote:


    > http://flavorzoom.com/anomaly.html


    Resize the window, at around 1000 pixels wide and larger the problem
    disappears. Now, resize the window very slowly around the width where the
    problem appears/disappears. At one particular width the entire menu
    disappears.

    This could be a manifestation of the peek-a-boo bug. Google for it, it's
    quite well known.

    --
    Richard.
     
    rf, Jan 18, 2008
    #8
  9. Vik Rubenfeld

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 00:25:40 GMT
    Vik Rubenfeld scribed:

    > Neredbojias <> wrote:
    >
    >> Have you an example?

    >
    > Surely. You can see it at flavorzoom.com. Thanks very much in advance
    > for any thoughts!


    Hmm, works fine for me in SeaMonkey. Oh, right, the prob is in IE. Hmm
    again, works in IE 7. (Don't have ie6.) Did you fix it?

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 18, 2008
    #9
  10. Vik Rubenfeld

    Ed Guest

    On 18/01/08 06:59, Vik Rubenfeld wrote:
    > GTalbot <> wrote:
    >
    >> Vik,
    >>
    >> Would it be possible for you to
    >> - fix the validation markup errors in your webpage, all of them
    >> - then fix the CSS errors in your CSS code, all of them, in particular
    >> the ones targeting IE as CSS hacks
    >> - then provide the URL of (temporary or current) webpage where the
    >> problem may still be occuring
    >>
    >> It is useless to post code if we do not have access to the whole code
    >> loaded on a web-accessible webpage. Sometimes, it could even be
    >> necessary to check the HTTP headers of the server...
    >>
    >> Regards, Géard

    >
    > You are quite right. I have put up a small test file at:
    >
    > http://flavorzoom.com/anomaly.html
    >
    > This has just the CSS and the HTML needed to demonstrate the anomaly. I
    > validated it at http://validator.w3.org/.
    >
    > As before, the page looks as it is expected to in Mac Firefox and
    > Safari, but not in IE 6/7.
    >
    > Thank you very much in advance for any thoughts on what could be causing
    > this!


    OK, you validated the HTML. But did you validate the CSS? Some errors
    show up at:

    http://jigsaw.w3.org/css-validator/


    Ed
     
    Ed, Jan 18, 2008
    #10
  11. Vik Rubenfeld, Jan 18, 2008
    #11
  12. In article <lUYjj.4727$>,
    "rf" <> wrote:

    > > http://flavorzoom.com/anomaly.html

    >
    > Resize the window, at around 1000 pixels wide and larger the problem
    > disappears. Now, resize the window very slowly around the width where the
    > problem appears/disappears. At one particular width the entire menu
    > disappears.
    >
    > This could be a manifestation of the peek-a-boo bug. Google for it, it's
    > quite well known.


    Researching the peek-a-boo bug led me to this page -
    http://www.thescripts.com/forum/thread468484.html. Based on the
    experience of the poster there, I added:

    html {
    margin: 0px;
    padding: 0px;
    }

    body {
    margin: 0px;
    padding: 0px;
    background: #FFFFFF ;
    }

    ....and it fixed it!

    Adding that code to my main CSS file hasn't yet fixed my production
    page, so I need to validate all the CSS and html there now - I may have
    some more questions when doing that. But this appears to be the fix.

    Thanks very much to all here for your help!
     
    Vik Rubenfeld, Jan 18, 2008
    #12
  13. Okay, this seems very odd.

    I've been working on tracking down what was still wrong with the CSS on
    my production page, and what I've found seems unusual. I've replicated
    it on two small test pages.

    http://www.flavorzoom.com/anomaly.html is fine and looks as expected.

    http://www.flavorzoom.com/anomaly_b.html has the image for the left-most
    link ("Home") missing (in IE6).

    The only difference between the two files, is a font-family
    specification for the html:

    font-family: Arial, Helvetica, sans-serif;

    What could explain this?
     
    Vik Rubenfeld, Jan 18, 2008
    #13
  14. Vik Rubenfeld

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 17:48:53 GMT
    Vik Rubenfeld scribed:

    > Okay, this seems very odd.
    >
    > I've been working on tracking down what was still wrong with the CSS on
    > my production page, and what I've found seems unusual. I've replicated
    > it on two small test pages.
    >
    > http://www.flavorzoom.com/anomaly.html is fine and looks as expected.
    >
    > http://www.flavorzoom.com/anomaly_b.html has the image for the left-most
    > link ("Home") missing (in IE6).
    >
    > The only difference between the two files, is a font-family
    > specification for the html:
    >
    > font-family: Arial, Helvetica, sans-serif;
    >
    > What could explain this?


    Try moving that to body: (only). Maybe IE balks at html: styles.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 18, 2008
    #14
  15. Neredbojias <> wrote:

    > Try moving that to body: (only). Maybe IE balks at html: styles.


    I moved it to body, but the result is the same. (????)
     
    Vik Rubenfeld, Jan 18, 2008
    #15
  16. Solved! It was a hasLayout issue. I added:

    display:inline-block;

    ....in .selected and in #fz_menuin a, and it fixed it.
     
    Vik Rubenfeld, Jan 18, 2008
    #16
  17. Update: it fixed it in IE6 and Mac FireFox, but broke it in Safari 3, as
    can be seen in the demo link I posted (which I have now updated) -

    http://www.flavorzoom.com/anomaly_b.html

    Is there a way to address the hasLayout issue that will also work in
    Safari?
     
    Vik Rubenfeld, Jan 18, 2008
    #17
  18. Vik Rubenfeld

    Ben C Guest

    On 2008-01-18, Vik Rubenfeld <> wrote:
    > Update: it fixed it in IE6 and Mac FireFox, but broke it in Safari 3, as
    > can be seen in the demo link I posted (which I have now updated) -
    >
    > http://www.flavorzoom.com/anomaly_b.html
    >
    > Is there a way to address the hasLayout issue that will also work in
    > Safari?


    Why all those inline-blocks set to width: 1em? That makes them all
    scrunched-up in browsers that support inline-block.

    I don't know if this is the anomaly you're referring to.
     
    Ben C, Jan 18, 2008
    #18
  19. Ben C <> wrote:

    > Why all those inline-blocks set to width: 1em? That makes them all
    > scrunched-up in browsers that support inline-block.
    >
    > I don't know if this is the anomaly you're referring to.


    That fixed it. Thanks very much!
     
    Vik Rubenfeld, Jan 18, 2008
    #19
  20. Vik Rubenfeld

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 19:58:25 GMT
    Vik Rubenfeld scribed:

    > Neredbojias <> wrote:
    >
    >> Try moving that to body: (only). Maybe IE balks at html: styles.

    >
    > I moved it to body, but the result is the same. (????)


    Well, I'm nonplussed. The only thing I can think of to do is to capture
    your source and test it on my box, which I shall do a bit later if rf or
    somebody intelligent doesn't solve it first. Benvenuto.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 18, 2008
    #20
    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. cmay
    Replies:
    0
    Views:
    1,136
  2. news.frontiernet.net
    Replies:
    6
    Views:
    1,125
    news.frontiernet.net
    Apr 16, 2004
  3. Replies:
    12
    Views:
    943
    Jonathan N. Little
    Aug 19, 2006
  4. Ed Hauptman
    Replies:
    7
    Views:
    1,021
    Ed Hauptman
    Aug 7, 2009
  5. John Smith
    Replies:
    1
    Views:
    145
    Evertjan.
    Mar 12, 2005
Loading...

Share This Page