Left padding and IE

[geniolatenio]

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]

So.. no one can solve this problem?

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

Bye

geniolatenio

 

[dorayme]

So.. no one can solve this problem?

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

Bye

geniolatenio

what problem?

 

[Adrienne Boswell]

Gazing into my crystal ball I observed geniolatenio

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.

 

[geniolatenio]

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]

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

Bye

geniolatenio

 

[Beauregard T. Shagnasty]

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%.

 

[geniolatenio]

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

 

[Beauregard T. Shagnasty]

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?

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

 

[josh]

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

 

[geniolatenio]

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]

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

 

[Jose]

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

 

[Beauregard T. Shagnasty]

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.

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

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.

 

[geniolatenio]

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 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]

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

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

 

[josh]

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.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed geniolatenio

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.

 

[josh]

Why not try something like this:
http://css.maxdesign.com.au/listamatic/horizontal02.htm

That is a more common way of applying your design. I think the key is
that "li" is a block level element displayed inline.

 

[dorayme]

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 [/QUOTE]

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