Re: IE and margins (I suppose) again...

#1

Gregor Kofler wrote:

Quote:

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

#2

On Nov 16, 6:19 pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

Quote:

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/...reepxtest.html

--
Gus

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

Later,

a-ok-site

#3

On Nov 16, 6:19 pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

Quote:

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/...reepxtest.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

#4

In article <e4c01$473f2a73$557f26fa$2336 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

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

#5

In article <99ee3$47409268$557fb564$4987 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

dorayme meinte:
In article <e4c01$473f2a73$557f26fa$2336 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

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

#6

In article <e0043$4740a5ad$557fb564$2310 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

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

#7

Gregor Kofler wrote:

Quote:

dorayme meinte:

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

There is a good chance that you will feel insulted in what I will say
here, but you really should scrap all your stuff and start again. You
don't have a solid grasp of the basics and are messing with a
complication of the shadow thingy. The good thing is that I will show
you how to proceed properly from scratch. Difficulty in deciding how to
proceed and frustration in obtaining desired results often leads to
grasping toward absolute positioning for help. This is wrong. Do not use
absolute positioning unless you understand it and when you really have
to use it. In this case you don't have to use it, so don't.

Try what I tell you and you may discover a real gem. Think along these
lines:

A layout is needed which will be flexible such that any screen size will
see it without a horizontal scrollbar.
Think boxes, boxes, boxes. That is: divs, divs, divs.
Then use up some paper drawing up boxes for the layout desired, which in
this case is:

+---------+-------+---------------------------+---------+

Quote:

Then think about horizontal dimensions, keeping flex in mind. In this
case it is something like this:

Quote:

------- "wrapper" width:76%; ---->|
!centered!

+---------+-------+---------------------------+---------+

Quote:

The first child (div) of the wrapper div will contain the headerLogo.gif
and the Horizontal Nav.

The second child (div) of the wrapper div will contain the
icon_aktuell.gif which will be floated left,
followed by a div containing the Headline with main body text which will
simply "flow" to the right of the float.
This div will have a margin-left applied at least for the amount of the
width of the gif image to prevent it from
shrinkwrapping around the image.

The third child (div) of the wrapper div will be the footer.

Note that the only defined width is 76% for that of the wapper div.
The wrapper div will always be 76% of whatever the screen width is.
The sideborders will always be 12% of whatever the screen width is.

There is no absolute positioning used (avoid this like the plague 99% of
the time). In fact there is no positioning declared whatsoever and the
default of static is used. Notice the flex in viewing it in different
window sizes and compare to the no-flex of what you presently have. Once
you have the page completed using the layout and procedure I show, then,
and only then work on applying the shadow thingy. I'm certain that you
will find it easier.

Oh, I forgot to mention that you should stop defining width:100% and
height:100% all the time. Don't use either at all if you're going to try
it my way.

--
Gus
Viel Glück

#8

In article <47cc7$4740ca51$557fb564$23188 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

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.

Quote:

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.

Quote:

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

#9

In article <6b387$47414b8c$557f1545$1107 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

dorayme meinte:

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

Yes, you are right, and while I do respect and often admire many
of the efforts by others to achieve these things, I am not
prepared to do the hard work needed for the juggling, (having to
so constantly remind myself of all the browser variations and
work arounds).

It is a matter of choice, not necessarily between good and bad.
After you ensure a reasonably meaningful document, how to style
it depends to a large extent on your memory capacities and
aesthetics. I like plain. Also I have to constantly relearn hacks
and workarounds so I naturally gravitate to designs where fancy
and workarounds are to a minimum.

In a way, looser designs, where it does not matter if there are
few pixels here or there difference between browsers is not so
bad, because what you get is at a cheaper price. It is very much
better value for a customer because it is quicker and easier to
implement and maintain and update over time (in which browsers
change and so on...). And there are simple ways of masking
browser differences that do not involve heavier workarounds. Take
the phenomenon we have been discussing, I would avoid a colour
scheme where the difference shows up as white gaps rather than go
to the trouble of "really" getting rid of the gaps.

The other thing I have got the impression of is that it is easy
to buy into a lot of extra work when you start assigning heights
to elements (other than images and such like). Again, my choice
is to let the content do the talking on height. I do not deny, on
the other hand, one does see clever designs that use heights to
great effect, but it is a tricky tool.

--
dorayme

#10

In article <92dde$47429b09$557f1545$19420 (AT) news (DOT) inode.at>,
Gregor Kofler <usenet (AT) gregorkofler (DOT) at> wrote:

Quote:

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