Left padding and IE

Discussion in 'HTML' started by geniolatenio, Mar 3, 2006.

  1. geniolatenio

    geniolatenio Guest

    Hello guys, I have a rather strange problem with IE (googled for it to
    no avail)

    I have these two styles in the css file, right?

    #menu { left:13px; padding:13px 0 14px 247px; white-space:nowrap }

    #menu a { padding:13px 11px 13px 11px }

    (I have removed some items that are not relevant to the problem)

    The menu DIV contains some anchors, it's something like

    <div id="menu">
    <a href="">1</a>
    <a href="">2</a>
    </div>

    Now, everything's fine in firefox and opera, if I resize the window
    the menu will stay where it has to stay.
    When I test it in IE, though, the menu "flips down" for some unknown
    reason. Here's the snapshot of both browsers, where you can see that
    IE pushes down the menu when resizing the window.

    http://incarta.altervista.org/problem1.gif

    So I put the "height:13px" in the #menu style. The problem now
    changes:

    this is when window is fully open:
    http://incarta.altervista.org/ie_normal.gif

    this is when window has been resized:
    http://incarta.altervista.org/ie_resize.gif

    That's a 16px difference!

    My solution was to put an invisible element <span
    id="invisible">X</span> before the first <a> tag and it worked. But I
    think this is not the correct solution.

    What's the right way to fix this problem? Or is it a problem that IE
    has so any workaround will do?

    Thanx everybody!

    geniolatenio

    Bye

    geniolatenio
    geniolatenio, Mar 3, 2006
    #1
    1. Advertising

  2. geniolatenio

    geniolatenio Guest

    So.. no one can solve this problem?

    I thought you all were kind of css gurus here..

    Bye

    geniolatenio
    geniolatenio, Mar 5, 2006
    #2
    1. Advertising

  3. geniolatenio

    dorayme Guest

    In article <>,
    geniolatenio <> wrote:

    > So.. no one can solve this problem?
    >
    > I thought you all were kind of css gurus here..
    >
    > Bye
    >
    > geniolatenio


    what problem?

    --
    dorayme
    dorayme, Mar 5, 2006
    #3
  4. Gazing into my crystal ball I observed geniolatenio
    <> writing in
    news::

    > Hello guys, I have a rather strange problem with IE (googled for it to
    > no avail)
    >
    > I have these two styles in the css file, right?
    >
    > #menu { left:13px; padding:13px 0 14px 247px; white-space:nowrap }
    >
    > #menu a { padding:13px 11px 13px 11px }
    >
    > (I have removed some items that are not relevant to the problem)
    >
    > The menu DIV contains some anchors, it's something like
    >
    ><div id="menu">
    > <a href="">1</a>
    > <a href="">2</a>
    ></div>
    >
    > Now, everything's fine in firefox and opera, if I resize the window
    > the menu will stay where it has to stay.
    > When I test it in IE, though, the menu "flips down" for some unknown
    > reason. Here's the snapshot of both browsers, where you can see that
    > IE pushes down the menu when resizing the window.
    >
    > http://incarta.altervista.org/problem1.gif
    >
    > So I put the "height:13px" in the #menu style. The problem now
    > changes:
    >
    > this is when window is fully open:
    > http://incarta.altervista.org/ie_normal.gif
    >
    > this is when window has been resized:
    > http://incarta.altervista.org/ie_resize.gif
    >
    > That's a 16px difference!
    >
    > My solution was to put an invisible element <span
    > id="invisible">X</span> before the first <a> tag and it worked. But I
    > think this is not the correct solution.
    >
    > What's the right way to fix this problem? Or is it a problem that IE
    > has so any workaround will do?
    >
    > Thanx everybody!
    >


    It would help if you would also provide a URL. There may be other problems
    not seen here that could be in the source.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Mar 6, 2006
    #4
  5. geniolatenio

    geniolatenio Guest

    On Mon, 06 Mar 2006 00:07:49 GMT, Adrienne Boswell
    <> wrote:

    >It would help if you would also provide a URL. There may be other problems
    >not seen here that could be in the source.


    Ok, so here's the url http://incarta.altervista.org/indextemp.html (i
    haven't uploaded the img folder so you won't see the images, don't
    think that's a problem). The html up there is the one with my
    temporary fix (read below). To reproduce the error, just remove the
    <span id="invisible">X</span> in the html body.

    And I re-post the problem for those who didn't read it..

    Thanks a lot!

    -----------------------------------

    Hello guys, I have a rather strange problem with IE (googled for it to
    no avail)

    I have these two styles in the css file, right?

    #menu { left:13px; padding:13px 0 14px 247px; white-space:nowrap }

    #menu a { padding:13px 11px 13px 11px }

    (I have removed some items that are not relevant to the problem)

    The menu DIV contains some anchors, it's something like

    <div id="menu">
    <a href="">1</a>
    <a href="">2</a>
    </div>

    Now, everything's fine in firefox and opera, if I resize the window
    the menu will stay where it has to stay.
    When I test it in IE, though, the menu "flips down" for some unknown
    reason. Here's the snapshot of both browsers, where you can see that
    IE pushes down the menu when resizing the window.

    http://incarta.altervista.org/problem1.gif

    So I put the "height:13px" in the #menu style. The problem now
    changes:

    this is when window is fully open:
    http://incarta.altervista.org/ie_normal.gif

    this is when window has been resized:
    http://incarta.altervista.org/ie_resize.gif

    That's a 16px difference!

    My solution was to put an invisible element <span
    id="invisible">X</span> before the first <a> tag and it worked. But I
    think this is not the correct solution.

    What's the right way to fix this problem? Or is it a problem that IE
    has so any workaround will do?

    Bye

    geniolatenio
    geniolatenio, Mar 6, 2006
    #5
  6. geniolatenio

    geniolatenio Guest

    So this left padding problem with IE, in the end, IS too complicated
    even for you guys.. damn.. I'm fuxxed!

    Bye

    geniolatenio
    geniolatenio, Mar 7, 2006
    #6
  7. geniolatenio wrote:

    > So this left padding problem with IE, in the end, IS too complicated
    > even for you guys.. damn.. I'm fuxxed!


    I don't see a problem. No, it is not too complicated.

    http://k75s.home.att.net/show/geniolatenio.jpg

    ...though I would not do the layout as you are. I would use em instead of
    px for just about every measurement in your style sheet. And I would
    drop Verdana; google for the reasons. I would also set the font size to
    100%.

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Mar 7, 2006
    #7
  8. geniolatenio

    geniolatenio Guest

    On Tue, 07 Mar 2006 14:30:24 GMT, "Beauregard T. Shagnasty"
    <> wrote:

    >geniolatenio wrote:
    >
    >> So this left padding problem with IE, in the end, IS too complicated
    >> even for you guys.. damn.. I'm fuxxed!

    >
    >I don't see a problem. No, it is not too complicated.


    that's the "fixed" version, the one with the workaround.. here, i've
    uploaded the "not working" version here..
    http://incarta.altervista.org/indexok.html

    but at this point I suppose it really is an IE problem..no one can
    solve it

    >..though I would not do the layout as you are. I would use em instead of
    >px for just about every measurement in your style sheet. And I would
    >drop Verdana; google for the reasons. I would also set the font size to
    >100%.


    mmm.. may I ask you why not the px? The menu has to be that size, I'm
    using pixels only for the menu because if I let the user change the
    size it'll screw the layout..

    Bye

    geniolatenio
    geniolatenio, Mar 8, 2006
    #8
  9. geniolatenio wrote:

    > On Tue, 07 Mar 2006 14:30:24 GMT, "Beauregard T. Shagnasty"
    > <> wrote:
    >
    >>geniolatenio wrote:
    >>
    >>> So this left padding problem with IE, in the end, IS too complicated
    >>> even for you guys.. damn.. I'm fuxxed!

    >>
    >> I don't see a problem. No, it is not too complicated.

    >
    > that's the "fixed" version, the one with the workaround.. here, i've
    > uploaded the "not working" version here..
    > http://incarta.altervista.org/indexok.html


    This link looks the same to me, in Firefox and IE6.

    > but at this point I suppose it really is an IE problem..no one can
    > solve it


    That old browser has lots of problems, eh?

    >> ..though I would not do the layout as you are. I would use em instead
    >> of px for just about every measurement in your style sheet. And I
    >> would drop Verdana; google for the reasons. I would also set the
    >> font size to 100%.

    >
    > mmm.. may I ask you why not the px?


    IE users with vision problems will not be able to resize it, so they can
    read it, when px (or pt) is used. If you use percentages (or em), they
    will be able to resize ... (and even with px, users of all modern
    browsers can resize - Firefox: press Control-Plus a few times)

    > The menu has to be that size, I'm using pixels only for the menu
    > because if I let the user change the size it'll screw the layout..


    ...then the rest of the design is wrong, too. Google for liquid or fluid
    design. Zillions of pages, including this very good one:

    http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Mar 8, 2006
    #9
  10. geniolatenio

    josh Guest

    It appears to be the left and right padding and border you have given
    to the #menu a, #menu a:hover, #menu a.acceso that is causing the
    problem
    josh, Mar 8, 2006
    #10
  11. geniolatenio

    geniolatenio Guest

    >> http://incarta.altervista.org/indexok.html
    >
    >This link looks the same to me, in Firefox and IE6.


    did you resize the page in IE? like making it pretty small.. as soon
    as you hit the rightmost part of the menu with the right border of the
    browser, the menu comes down a bit..

    >IE users with vision problems will not be able to resize it, so they can
    >read it, when px (or pt) is used. If you use percentages (or em), they
    >will be able to resize ... (and even with px, users of all modern
    >browsers can resize - Firefox: press Control-Plus a few times)


    Yes, I understand the point and I could even agree to it, but this is
    the age-old problem of either having a website accessible to everyone,
    modifying the layout in order to accomodate that, or trying to have it
    accessible at the most with some design exceptions.. unfortunately I
    want to have that background image going from the top of the page to
    the bottom.. I tried to make it by using a div, absolute position and
    z-index:1 (it has to stay behind everything else) stretching from top
    to bottom, but it just doesn't stretches.. any ideas?
    Anyway, back to the design issue: by letting the user change the pixel
    size, the menu text becomes bigger and the "on" stage of each item
    becomes larger, making it larger than the background image.. and this
    looks like a mistake..

    Means that if I could have this DIV go from top to bottom, resizing
    itself so that it changes depending on the content of the page, I
    could remove the px (I just noticed that firefox lets me change the
    font size anyway)..

    Or do you know of any solution to this? I'm one of those who thinks
    that a website should be visible almost the same way on all different
    browser, accessible to most, but at the same time I shouldn't forget
    what I like and how I'd like a website to be.. the example you gave
    me, the http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html, is a
    good example of flexibility, but the design really sucks.

    I agree that functionality is important, but the eye needs to be
    satisfied as well.

    Bye

    geniolatenio
    geniolatenio, Mar 8, 2006
    #11
  12. geniolatenio

    geniolatenio Guest

    On 7 Mar 2006 22:18:37 -0800, "josh" <> wrote:

    >It appears to be the left and right padding and border you have given
    >to the #menu a, #menu a:hover, #menu a.acceso that is causing the
    >problem


    yes.. mmm.. you're right, I removed it and it worked.. any suggestion
    on how to obtain what I have now without using the padding? I tried
    using the margin value but the problem still exist.. though I don't
    understand why the problem goes away if add the invisible <div> before
    the menu..

    Bye

    geniolatenio
    geniolatenio, Mar 8, 2006
    #12
  13. geniolatenio

    Jose Guest

    > Anyway, back to the design issue: by letting the user change the pixel
    > size, the menu text becomes bigger and the "on" stage of each item
    > becomes larger, making it larger than the background image.. and this
    > looks like a mistake..


    If the user needs to change the text size (pixels are a fixed size :),
    then the most important thing becomes legibility and usability, and the
    user has indicated a willingness to sacrifice some prettiness to make
    the site usable. That is a valid and worthwhile trade.

    > I'm one of those who thinks
    > that a website should be visible almost the same way on all different
    > browser


    I think this is not a good way to think. "Sort of mostly the same way
    on similar equipment" is a better way to think. There are good reasons
    why a site =should= look different on different display devices, and for
    people with different desires.

    The user's preferences should be paramount. Always.

    Jose
    --
    Money: what you need when you run out of brains.
    for Email, make the obvious change in the address.
    Jose, Mar 8, 2006
    #13
  14. geniolatenio wrote:

    >>> http://incarta.altervista.org/indexok.html

    >>
    >>This link looks the same to me, in Firefox and IE6.

    >
    > did you resize the page in IE? like making it pretty small.. as soon
    > as you hit the rightmost part of the menu with the right border of
    > the browser, the menu comes down a bit..


    Yes, it does. With a width of near 900px. (or wider than maybe a third
    of your visitors' resolution)

    Consider that most visitors will not be resizing their windows. Many
    don't know how. So whatever size they are when they arrive, they will
    stay. And see the menu buttons in one way only. If they are using the
    still-common 800x600 screen with browser maximized, there is no chance
    they will see what you consider to be a problem.

    Generally speaking, only us authors fool around with different browsers
    and sizes. Visitors will only ever use one browser.

    >> IE users with vision problems will not be able to resize it, so they
    >> can read it, when px (or pt) is used. If you use percentages (or
    >> em), they will be able to resize ... (and even with px, users of all
    >> modern browsers can resize - Firefox: press Control-Plus a few
    >> times)

    >
    > Yes, I understand the point and I could even agree to it, but this is
    > the age-old problem of either having a website accessible to
    > everyone, modifying the layout in order to accomodate that, or trying
    > to have it accessible at the most with some design exceptions..


    Wouldn't you think that impaired vision visitors are used to having
    pages fall apart at increased sizes? <g>

    > unfortunately I want to have that background image going from the top


    I don't see any images on the page ...
    http://incarta.altervista.org/img/logo.gif is a 404 for example.

    > of the page to the bottom.. I tried to make it by using a div,
    > absolute position and z-index:1 (it has to stay behind everything
    > else) stretching from top to bottom, but it just doesn't stretches..
    > any ideas? Anyway, back to the design issue: by letting the user
    > change the pixel size, the menu text becomes bigger and the "on"
    > stage of each item becomes larger, making it larger than the
    > background image.. and this looks like a mistake..


    Not to a person with impaired vision.

    > Means that if I could have this DIV go from top to bottom, resizing
    > itself so that it changes depending on the content of the page, I
    > could remove the px (I just noticed that firefox lets me change the
    > font size anyway)..


    Firefox is a smart browser. :)

    > Or do you know of any solution to this? I'm one of those who thinks
    > that a website should be visible almost the same way on all different
    > browser, accessible to most, but at the same time I shouldn't forget


    Maybe if your images were displayed, some of us may see a better
    solution.

    > what I like and how I'd like a website to be.. the example you gave
    > me, the http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html, is
    > a good example of flexibility, but the design really sucks.


    The page is meant to impart information, not to be pretty.

    > I agree that functionality is important, but the eye needs to be
    > satisfied as well.


    Sure, just so long as accessibility isn't affected.

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Mar 8, 2006
    #14
  15. geniolatenio

    geniolatenio Guest

    On Wed, 08 Mar 2006 17:14:42 GMT, Jose <>
    wrote:

    >If the user needs to change the text size (pixels are a fixed size :),
    >then the most important thing becomes legibility and usability, and the
    >user has indicated a willingness to sacrifice some prettiness to make
    >the site usable. That is a valid and worthwhile trade.


    sure thing.. but if a user uses eudora AND ie, there's a bug with
    eudora that brings the size of IE text down.. and that's something
    that involves people who don't need to change the font size.. apart
    from this extreme example, what I'm worried about is the web designers
    themselves. An example is my actual situation: I'm learning css and
    xhtml so that I can get some minor jobs from a web designer.. now,
    this web designer designer can come to visit my pages and start
    playing around with font sizes to see if everything's alright and
    suddenly the menu is screwed up because of something.. he/she asks me
    what the problem is and I can't answer.. that's not very nice.. and
    that's why I'm willing to either have my problem fixed OR have the
    fonts in pixels..

    >> I'm one of those who thinks
    >> that a website should be visible almost the same way on all different
    >> browser

    >
    >I think this is not a good way to think. "Sort of mostly the same way
    >on similar equipment" is a better way to think.


    sounds the same to me.. I test my sites on 5 browsers and want to see
    it the same way on all of them.. to me, this is a good way of
    thinking..

    >The user's preferences should be paramount. Always.


    You think so? That's why movies suck as well as music, especially here
    in Italy.. because the market is too focused on what the user wants..
    the user's preference is paramount, sure, but there's always a margin,
    and that's the web designer's preference..

    Bye

    geniolatenio
    geniolatenio, Mar 9, 2006
    #15
  16. geniolatenio

    geniolatenio Guest

    >stay. And see the menu buttons in one way only. If they are using the
    >still-common 800x600 screen with browser maximized, there is no chance
    >they will see what you consider to be a problem.


    are you saying that I shouldn't be worried about this problem? Well,
    that's good to me.. the problem is the following (as I wrote in
    another reply).
    my actual situation: I'm learning css and
    xhtml so that I can get some minor jobs from a web designer.. now,
    this web designer designer can come to visit my pages and start
    playing around with font sizes to see if everything's alright and
    suddenly the menu is screwed up because of something.. he/she asks me
    what the problem is and I can't answer.. that's not very nice.. and
    that's why I'm willing to either have my problem fixed OR have the
    fonts in pixels..

    >Wouldn't you think that impaired vision visitors are used to having
    >pages fall apart at increased sizes? <g>


    good point.. but not appliable to web designers who want to see how I
    code :)

    >> unfortunately I want to have that background image going from the top

    >
    >I don't see any images on the page ...
    >http://incarta.altervista.org/img/logo.gif is a 404 for example.


    right.. sorry about that.. I've uploaded the bg image I'm talking
    about..

    >The page is meant to impart information, not to be pretty.


    Mmm.. we're going into philosophy here.. I could reply that all the
    websites are meant to impart information and not to be pretty :)

    Anyway.. you're helping me a lot and giving me a good idea of what the
    situation is between designers.. give me a couple of weeks and I too
    will be totally on your side :)

    Bye

    geniolatenio
    geniolatenio, Mar 9, 2006
    #16
  17. geniolatenio

    josh Guest

    geniolatenio wrote:
    > yes.. mmm.. you're right, I removed it and it worked.. any suggestion
    > on how to obtain what I have now without using the padding? I tried
    > using the margin value but the problem still exist.. though I don't
    > understand why the problem goes away if add the invisible <div> before
    > the menu..


    I wanted to mention that I'm looking at it and have a few ideas I'm
    checking (since I can see that you are working on it at this instant
    cause of the changes in your page).

    You should also look closely at what some of the other people are
    recomending with the text size. It seems that you are viewing it as an
    argument of whether or not to sacrifice design for maximum legibility
    and usability. I think that you are missing the point that your design
    WILL BREAK in many browsers under certain conditions You can't control
    the user's computer, you can only build your site so that it won't
    break. Your design can easily be better by using em sizing so that it
    still looks good if it isn't displayed exactly how you designed it.
    josh, Mar 9, 2006
    #17
  18. Gazing into my crystal ball I observed geniolatenio
    <> writing in
    news::

    > what I'm worried about is the web designers
    > themselves. An example is my actual situation: I'm learning css and
    > xhtml so that I can get some minor jobs from a web designer.. now,
    > this web designer designer can come to visit my pages and start
    > playing around with font sizes to see if everything's alright and
    > suddenly the menu is screwed up because of something.. he/she asks me
    > what the problem is and I can't answer


    A _good_ web designer will definately change the font sizes to be sure that
    1) they do scale
    2) scaling does not cause the page to break badly

    As others have said, the WWW is fluid, not a piece of paper.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Mar 9, 2006
    #18
  19. geniolatenio

    josh Guest

    josh, Mar 9, 2006
    #19
  20. geniolatenio

    dorayme Guest

    In article <>,
    geniolatenio <> wrote:

    > >Wouldn't you think that impaired vision visitors are used to having
    > >pages fall apart at increased sizes? <g>

    >
    > good point.. but not appliable to web designers who want to see how I
    > code :)


    If a good web designer sees your "code", you would want to be
    catering for more than his eyesight...

    --
    dorayme
    dorayme, Mar 9, 2006
    #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. Dave
    Replies:
    7
    Views:
    5,642
    Joe Smith
    Jul 22, 2004
  2. RA
    Replies:
    1
    Views:
    363
  3. Ike

    left-padding ints

    Ike, Sep 7, 2005, in forum: Java
    Replies:
    3
    Views:
    6,031
  4. Tony M
    Replies:
    5
    Views:
    2,042
    Tony M
    Sep 7, 2005
  5. FingersMeArse
    Replies:
    1
    Views:
    98
    Grant Wagner
    Dec 1, 2004
Loading...

Share This Page