471,570 Members | 1,102 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,570 software developers and data experts.

IE and margins (I suppose) again...

Sigh...

Where come those white "spacers" on IE6 from? Perfectly ok in FF, Opera,
Safari, alas IE again is choking...

Sample with inline styles:
http://web.gregorkofler.com/test.htm

I've tried all sorts of things (width, margin, etc.), alas those extra
spaces remain.

Any ideas?

Gregor


--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 16 '07 #1
23 1728
Gregor Kofler wrote:
Sigh...

Where come those white "spacers" on IE6 from? Perfectly ok in FF, Opera,
Safari, alas IE again is choking...

Sample with inline styles:
http://web.gregorkofler.com/test.htm

I've tried all sorts of things (width, margin, etc.), alas those extra
spaces remain.

Any ideas?
<http://www.positioniseverything.net/explorer/threepxtest.html>

--
Gus
Nov 17 '07 #2
On Nov 16, 6:19 pm, Gus Richter <gusrich...@netscape.netwrote:
Gregor Kofler wrote:
Sigh...
Where come those white "spacers" on IE6 from? Perfectly ok in FF, Opera,
Safari, alas IE again is choking...
Sample with inline styles:
http://web.gregorkofler.com/test.htm
I've tried all sorts of things (width, margin, etc.), alas those extra
spaces remain.
Any ideas?

<http://www.positioniseverything.net/explorer/threepxtest.html>

--
Gus
Try wrapping the area with a div and set background to match. Worked
for my pages.

Later,

a-ok-site
Nov 17 '07 #3
On Nov 16, 6:19 pm, Gus Richter <gusrich...@netscape.netwrote:
Gregor Kofler wrote:
Sigh...
Where come those white "spacers" on IE6 from? Perfectly ok in FF, Opera,
Safari, alas IE again is choking...
Sample with inline styles:
http://web.gregorkofler.com/test.htm
I've tried all sorts of things (width, margin, etc.), alas those extra
spaces remain.
Any ideas?

<http://www.positioniseverything.net/explorer/threepxtest.html>

--
Gus
I just read a post that fixed the problem for me and might help you
also http://groups.google.com/group/alt.h...4dbc43970a2778

a-ok-site
Nov 17 '07 #4
Gus Richter meinte:
Gregor Kofler wrote:
>Sigh...

Where come those white "spacers" on IE6 from? Perfectly ok in FF,
Opera, Safari, alas IE again is choking...

Sample with inline styles:
http://web.gregorkofler.com/test.htm

I've tried all sorts of things (width, margin, etc.), alas those extra
spaces remain.

Any ideas?

<http://www.positioniseverything.net/explorer/threepxtest.html>
Yep. Looks like the 3 pixel bug, *but* I've specified widths *and*
heights to all floats (and where applicable to all other box elements,
too), and some sources state, that paragraphs with text must be present
(the phenomenon in my example also occurs without text in the div
elements). Despite being such a basic example, and given the
workarounds, I still can't fix those darn 3 pixels.

Any other suggestions?

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 17 '07 #5
Gregor Kofler meinte:

[snip]
Any other suggestions?
Addendum:

I've added
http://web.gregorkofler.com/test2.htm
with absolutely positioned columns left and right and one float
remaining in the center. The "margins" of the absolutely positioned
elements are gone (naturally), but the central one remains...

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 17 '07 #6
In article <e4**************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
Gregor Kofler meinte:

[snip]
Any other suggestions?
I kind of recall that heights can trigger IE to move whole
containers those 3 pxs, (rather than just the text in these float
situations). Anyway, here is yours modified:

http://tinyurl.com/2vuwsa

Don't know if this will give some clues?

--
dorayme
Nov 18 '07 #7
dorayme meinte:
In article <e4**************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
>Gregor Kofler meinte:

[snip]
>>Any other suggestions?

I kind of recall that heights can trigger IE to move whole
containers those 3 pxs, (rather than just the text in these float
situations). Anyway, here is yours modified:

http://tinyurl.com/2vuwsa

Don't know if this will give some clues?
Thanks, dorayme for the feedback. My current solution is more
"substantial" and works pretty well in FF, Safari, Opera and - nearly - IE.

http://web.gregorkofler.com/test2.htm

It has some div-soup overhead (some divs could be replaced by simple
background images, but this way the structure is clearer), however, it
zooms pretty nice. One IE quirk remains: Since the 100%-height is being
calculated some time before other elements are considered (or so it
seems), the 100%-high left and right shadows are cut off, when the page
contains overflowing content.

Any more suggestions for a (simple?) solution of that? After half a day
of layouting (which seems ridiculous given the few lines of markup),
I've run out of ideas...

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 18 '07 #8
In article <99**************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
dorayme meinte:
In article <e4**************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
Gregor Kofler meinte:

[snip]

Any other suggestions?
I kind of recall that heights can trigger IE to move whole
containers those 3 pxs, (rather than just the text in these float
situations). Anyway, here is yours modified:

http://tinyurl.com/2vuwsa

Don't know if this will give some clues?

Thanks, dorayme for the feedback. My current solution is more
"substantial" and works pretty well in FF, Safari, Opera and - nearly - IE.

http://web.gregorkofler.com/test2.htm
Well, I would have to look harder at your new url to see better
the connections between it and the problem you had before. I was
saying before that those white gaps you had were being triggered
by your height settings in IE 6 and that some removal of them and
readjustments can get rid of them... Good old IE, the trouble it
puts us all to!

--
dorayme
Nov 18 '07 #9
dorayme meinte:
>http://web.gregorkofler.com/test2.htm

Well, I would have to look harder at your new url to see better
the connections between it and the problem you had before. I was
saying before that those white gaps you had were being triggered
by your height settings in IE 6 and that some removal of them and
readjustments can get rid of them...
I had heights defined, result was still negative. Hence I resorted to
absolute positioning. Works and the markup is still justifiable. (At one
point I tried tables, but ran into other problems - I suppose I've
become pretty bad at layouting with tables; I suppose VK lacks
understanding of that).
Good old IE, the trouble it puts us all to!
Without it, webdesign would be a cinch...

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 18 '07 #10
In article <e0**************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
dorayme meinte:
http://web.gregorkofler.com/test2.htm
Well, I would have to look harder at your new url to see better
the connections between it and the problem you had before. I was
saying before that those white gaps you had were being triggered
by your height settings in IE 6 and that some removal of them and
readjustments can get rid of them...

I had heights defined
Yes, I know, and I was saying that exactly *this* is what was
causing trouble, heights can trigger the IE bug in the original
case, I removed heights on the crucial bits in my example just to
demo it. Perhaps it was not clear because I also had to
reconfigure a couple of things.

Anyway, I am not disputing there would be other workarounds and
in your hands, I am sure some absolute positioning will be fine.

--
dorayme
Nov 18 '07 #11
dorayme meinte:
Yes, I know, and I was saying that exactly *this* is what was
causing trouble, heights can trigger the IE bug in the original
case, I removed heights on the crucial bits in my example just to
demo it. Perhaps it was not clear because I also had to
reconfigure a couple of things.
Ah - I see. No not really. Once the "green" is removed from "mainmenu"
the gaps are back.

And
http://www.positioniseverything.net/...reepxtest.html
states that one *has* to define heights.
Anyway, I am not disputing there would be other workarounds and
in your hands, I am sure some absolute positioning will be fine.
It's just that this something seemingly very basic, yet I can't get it
right - I suppose my earlier webpages always had the virtue of not
needing floats where gaps would stick out...

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 18 '07 #12
In article <47***************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
dorayme meinte:
Yes, I know, and I was saying that exactly *this* is what was
causing trouble, heights can trigger the IE bug in the original
case, I removed heights on the crucial bits in my example just to
demo it. Perhaps it was not clear because I also had to
reconfigure a couple of things.

Ah - I see. No not really. Once the "green" is removed from "mainmenu"
the gaps are back.
OK, but it is the appearance we are partly wanting to solve to
cope with IE 6, no? I address the puzzle you have in mind a bit
below. But, for now, notice how - at http://tinyurl.com/2vuwsa -
between the red and the left blue, the gap is gone and *here*
there is no question of the green fudging the story.

It was to do with your height settings and once on that trail,
having removed one gap I got impatient with this bug and just got
the look I thought you wanted overall, hoping the removal of the
height evident would give you a lead. (Truth is that I personally
avoid all tight designing to get any exact look.)

Sure, leave or take away the green on mainmenu but look what
happens when you add what you had to mine, namely mainmenu
{...height: 10em;} The gap suddenly comes back in IE 6! So this
height is triggering the gap. It may have no rhyme or reason, but
is something that needs avoiding for IE 6.

But lets get down to basics and abstract from achieving your
overall aim with all the elements. Take a look at:

http://tinyurl.com/384anl

and see how it is the height spec on the static container to the
right of the float in both the last two of the four cases that
trigger the trouble with IE 6.

A container develops height naturally with inline content. But if
you give it an explicit width, you trigger IE 6 to make it take
up the space that is right of the float and it adds that pesky
3px gap. Giving a left margin for the float to sit in or not,
makes no difference to this business.
And
http://www.positioniseverything.net/...reepxtest.html
states that one *has* to define heights.
Well, this is not correct in the situation we are exploring.

Anyway, I am not disputing there would be other workarounds and
in your hands, I am sure some absolute positioning will be fine.

It's just that this something seemingly very basic, yet I can't get it
right - I suppose my earlier webpages always had the virtue of not
needing floats where gaps would stick out...
--
dorayme
Nov 19 '07 #13
dorayme meinte:
OK, but it is the appearance we are partly wanting to solve to
cope with IE 6, no? I address the puzzle you have in mind a bit
below. But, for now, notice how - at http://tinyurl.com/2vuwsa -
between the red and the left blue, the gap is gone and *here*
there is no question of the green fudging the story.
Ah, yes.
It was to do with your height settings and once on that trail,
having removed one gap I got impatient with this bug and just got
the look I thought you wanted overall, hoping the removal of the
height evident would give you a lead. (Truth is that I personally
avoid all tight designing to get any exact look.)
Right. But then: All those fancy shadows, 3D-FX, rounded corners and all
the ...er... nice things wanted by designers and (the accordingly
primed) customers are gone...
Sure, leave or take away the green on mainmenu but look what
happens when you add what you had to mine, namely mainmenu
{...height: 10em;} The gap suddenly comes back in IE 6! So this
height is triggering the gap. It may have no rhyme or reason, but
is something that needs avoiding for IE 6.

But lets get down to basics and abstract from achieving your
overall aim with all the elements. Take a look at:

http://tinyurl.com/384anl
and see how it is the height spec on the static container to the
right of the float in both the last two of the four cases that
trigger the trouble with IE 6.
Good example, thanks.
A container develops height naturally with inline content. But if
you give it an explicit width, you trigger IE 6 to make it take
up the space that is right of the float and it adds that pesky
3px gap. Giving a left margin for the float to sit in or not,
makes no difference to this business.
I realized that.
>And
http://www.positioniseverything.net/...reepxtest.html
states that one *has* to define heights.

Well, this is not correct in the situation we are exploring.
Obviously. Thanks for putting in so much effort.

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 19 '07 #14
dorayme meinte:

[the evilness of web design]

Well, I've given in and done something utterly despicable: layout
tables. Well, only one. And only for the vertical shadows.
However, it's pretty consistent on Opera, Safari 3, FF, and IE (I'll
ignore the minuscule issues here and there).

http://web.gregorkofler.com/test4.htm

Anyway, it was just a breeze given compared to the ordeal of adapting
the layout of other websites too horrific to mention here (at least it
was paid pretty well).
The above layout is still simple enough, satisfies the customer,
validates, and keeps its shape nicely when enlarged, hence I can live
with the result and the effort put into it.

Gregor


--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 19 '07 #15
Gregor Kofler wrote:
Gus Richter meinte:
>A layout is needed which will be flexible such that any screen size
will see it without a horizontal scrollbar.

What does that mean? The font might become unreadably small...
Unreadably small? No.

Think flexible design, and see this:
http://k75s.home.att.net/fontsize.html
Besides the advice to use "font-size: 100%;", notice how the page flows
as you adjust your browser window width.

--
-bts
-Motorcycles defy gravity; cars just suck
Nov 19 '07 #16
Beauregard T. Shagnasty meinte:
Gregor Kofler wrote:
>Gus Richter meinte:
>>A layout is needed which will be flexible such that any screen size
will see it without a horizontal scrollbar.
What does that mean? The font might become unreadably small...

Unreadably small? No.
ACK. You'r right. Anyway, I'd prefer getting rid of left and right
filler columns first without sacrficing a central content area.
Think flexible design, and see this:
http://k75s.home.att.net/fontsize.html
Already seen before (in one of those "What's-wrong-with-Verdana"
discussions).
Besides the advice to use "font-size: 100%;", notice how the page flows
as you adjust your browser window width.
While I like proportional scaling of webpages, I'm no fan of
flexible-width text areas. Text in wide blocks is frequently difficult
to read, therefore I tend to limit the width of text blocks to - say -
50 or 60em.

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 20 '07 #17
In article <92***************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
Beauregard T. Shagnasty meinte:
[snip]
>
Besides the advice to use "font-size: 100%;", notice how the page flows
as you adjust your browser window width.

While I like proportional scaling of webpages, I'm no fan of
flexible-width text areas. Text in wide blocks is frequently difficult
to read, therefore I tend to limit the width of text blocks to - say -
50 or 60em.
But the width of the text block isn't your problem - it's effectively
decided by individual users viewing the web site with their preferred
window size, their preferred font size, and their preferred monitor
display settings. I'm not saying you shouldn't set a maximum width
if you really _want_ to, just pointing out that you don't really _need_
to.

I can see limiting the minimum width, however - things can get a little
too funky that way!

(And there's a useful script within the Skidoo 3-column layout
example that lets you persuade IE to respect it...)
Nov 20 '07 #18
David Stone meinte:
But the width of the text block isn't your problem - it's effectively
decided by individual users viewing the web site with their preferred
window size, their preferred font size, and their preferred monitor
display settings. I'm not saying you shouldn't set a maximum width
if you really _want_ to, just pointing out that you don't really _need_
to.
Agreed. But my pages are paid for.

What I mean: Convincing customers to "buy" browser compatibility,
scalability, lean design, accessibility at the cost of a more or less
reduced "Photoshop"-design is hard, very hard for most of the time. Many
of the principles advocated in this or similar NGs are rendered useless,
once a (normally rather expensive) graphic designer (sometimes even
claiming to be "webdesigners") comes into play (producing sleek looking
layouts on PowerPoint slides).

Once I got into in argument with the responsible designer, why I used
divs and floats and plain text (yikes!) on this page
http://www.licht-blick.at (one of my first commercial jobs) - since I
would only be able to achive his pixel-exact layout with graphics
instead of text for menus and the like. The "killer argument":
apple.com, gmx.de and other big names are doing it this way...

Bottom line: I like flexible designs, which scale nicely. The layout
that started the thread is probably the best I can do, to satisfy both
my standard and the expectations of the customer. And those expectations
are biased towards the dark side by big webpages (like the ones VK
advocates two threads above this one).

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 20 '07 #19
On 2007-11-19, Gregor Kofler wrote:
>
dorayme meinte:

[the evilness of web design]

Well, I've given in and done something utterly despicable: layout
tables. Well, only one. And only for the vertical shadows.
However, it's pretty consistent on Opera, Safari 3, FF, and IE (I'll
ignore the minuscule issues here and there).

http://web.gregorkofler.com/test4.htm

Anyway, it was just a breeze given compared to the ordeal of adapting
the layout of other websites too horrific to mention here (at least it
was paid pretty well).
The above layout is still simple enough, satisfies the customer,
validates, and keeps its shape nicely when enlarged, hence I can live
with the result and the effort put into it.
But it is not readable when I have a window less than about 1200px.

<http://cfaj.freeshell.org/testing/gregor.jpg>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Nov 20 '07 #20
Chris F.A. Johnson meinte:
But it is not readable when I have a window less than about 1200px.
<http://cfaj.freeshell.org/testing/gregor.jpg>
Come on - huge font sizes + (actually not that) small screen. You can
still scroll, which means it *is* readable (in this case the left
submenu area would move out of the viewport, but the text fits in
nicely). Yes, if the width would be in percent you would not need to
scroll. But - depending on the percentage of the left and right
"artwork" strips the text area would become very small, the line lengths
very short (which will inevitable produce problems - at least from the
standpoint of the customer - with other content on the pages and the menus).

Gregor
--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 20 '07 #21
In article <84***************************@news.inode.at>,
Gregor Kofler <us****@gregorkofler.atwrote:
Chris F.A. Johnson meinte:
But it is not readable when I have a window less than about 1200px.
<http://cfaj.freeshell.org/testing/gregor.jpg>

Come on - huge font sizes + (actually not that) small screen. You can
still scroll, which means it *is* readable (in this case the left [snip]
One datum:

My personal monitor is set to 1152 x 720, and the font size in FF is
set at 16 units (whatever units FF uses.) That works for my eyesight.

I could probably read the text on the original page with a slightly
smaller font, but not much smaller - the text in the jpg cited above
is close to my preferred size. I could set my monitor to display
1440 x 900, but then I'd have to increase the system and application
font sizes for it to be comfortable reading file names, menu items, etc.

And yes, I DO have my reading glasses on!
Nov 20 '07 #22
Gregor Kofler wrote:
Chris F.A. Johnson meinte:
> But it is not readable when I have a window less than about 1200px.
<http://cfaj.freeshell.org/testing/gregor.jpg>

You can
still scroll, which means it *is* readable
Um, weren't you the one who mentioned a few posts back about lines of
text too long to read? That last version of your test page is pretty bad
in that respect.

BTW, having to scroll horizontally to read text is a bloody awful thing
to do to your users. :-(
(in this case the left
submenu area would move out of the viewport, but the text fits in
nicely).
Not in my browser window. Not even close. Your refusal to let the
navigation menu wrap to multiple lines is perplexing. It would solve so
many problems.

--
Berg
Nov 20 '07 #23
Bergamot meinte:
Gregor Kofler wrote:
>(in this case the left
submenu area would move out of the viewport, but the text fits in
nicely).

Not in my browser window. Not even close. Your refusal to let the
navigation menu wrap to multiple lines is perplexing. It would solve so
many problems.
It wraps, but since the bottom alignment done via - yikes - absolute
positioning...

Christ!

I wanted to get rid of a IE float bug, and now I'm in for the
"get-whacked-for-your-layout-is-not-flexible" treatment. I already said,
I'll look into it. Ok!? *OK*!?

Darn usenet.

Gregor

<mumble>As if there weren't enough websites out there, worth ranting
about...</mumble>

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Nov 20 '07 #24

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Frances Del Rio | last post: by
8 posts views Thread by Tinus | last post: by
7 posts views Thread by tm | last post: by
reply views Thread by Todd | last post: by
7 posts views Thread by steve | last post: by
5 posts views Thread by Anne DeBlois | last post: by
1 post views Thread by pdm | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Vinnie | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.