IE image position

Hi,

My logo images are positioned some more to the right in IE6 than in
FF1.5. I like them to be as shown in FF1.5. Does anyone have a clue,
why they are positioned differently in IE?
Problem description and example can be found at:

http://www.kinderuitje.nl/problem.html

Thx

Roderik schreef:

Hi,

My logo images are positioned some more to the right in IE6 than in
FF1.5. I like them to be as shown in FF1.5. Does anyone have a clue,
why they are positioned differently in IE?
Problem description and example can be found at:

http://www.kinderuitje.nl/problem.html

Thx

A scaled down version with css inside and without header, footer, leftt
and right column can be found at:

http://www.kinderuitje.nl/problem2.html

Here you see almost no difference between IE and FF, but that might be
because it already takes all the space available. In Opera it is
obviuously quite different.
Any suggestions for a solution or work-around without tables?

On 30 Sep 2006 18:20:33 -0700, "Roderik" <emmerink (AT) gmail (DOT) com> wrote:

Roderik schreef:

My logo images are positioned some more to the right in IE6 than in
FF1.5. I like them to be as shown in FF1.5. Does anyone have a clue,
why they are positioned differently in IE?
Problem description and example can be found at:

http://www.kinderuitje.nl/problem.html

A scaled down version with css inside and without header, footer, leftt
and right column can be found at:

http://www.kinderuitje.nl/problem2.html

Here you see almost no difference between IE and FF, but that might be
because it already takes all the space available. In Opera it is
obviuously quite different.
Any suggestions for a solution or work-around without tables?

Well, I had a go at working out what was going on, but frankly it's a
mess. You've got position: relative scattered around all over the place,
some position: absolute which you probably don't need, float: right
within unsized float: left, "float: left; width: 100%" which isn't
obviously useful, margin and padding 0 on all elements, which is not
going to be helpful with paragraphs and lists, #header defined multiple
times ...

To be honest it looks to me as if you've just thrown things together in
the hope that something will work.

I suggest you throw everything away and start again, adding only those
properties which you understand. In particular don't use "position"
unless you understand exactly what it's doing and, especially, why you
need it. Most pages can be put together very nicely without "position".

--
Stephen Poley

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

Stephen Poley schreef:

On 30 Sep 2006 18:20:33 -0700, "Roderik" <emmerink (AT) gmail (DOT) com> wrote:

Roderik schreef:

My logo images are positioned some more to the right in IE6 than in
FF1.5. I like them to be as shown in FF1.5. Does anyone have a clue,
why they are positioned differently in IE?
Problem description and example can be found at:

http://www.kinderuitje.nl/problem.html

A scaled down version with css inside and without header, footer, leftt
and right column can be found at:

http://www.kinderuitje.nl/problem2.html

Here you see almost no difference between IE and FF, but that might be
because it already takes all the space available. In Opera it is
obviuously quite different.
Any suggestions for a solution or work-around without tables?

Well, I had a go at working out what was going on, but frankly it's a
mess. You've got position: relative scattered around all over the place,
some position: absolute which you probably don't need, float: right
within unsized float: left, "float: left; width: 100%" which isn't
obviously useful, margin and padding 0 on all elements, which is not
going to be helpful with paragraphs and lists, #header defined multiple
times ...

To be honest it looks to me as if you've just thrown things together in
the hope that something will work.

I think I am quite experienced in the use of CSS (but just not enough
to understand all the differences for the top browsers), the basic
three column layout comes from a template, but the rest is written by
myself, not copied from examples.

I suggest you throw everything away and start again, adding only those
properties which you understand.
In particular don't use "position"
unless you understand exactly what it's doing and, especially, why you
need it. Most pages can be put together very nicely without "position".

--
Stephen Poley

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

Things might be defined several times because I simplified to code here
to make it easier to get help. There are actually two stylesheets and
soms server-side generated css inline.
One of the stylesheets is for presentation/style and the other one is
for layout purpose.
I thought that it was a good thing to explicitly define how things
should be positioned, absolute/relative.
The float:left;width:100% is not so useful that's true, I might change
that.
I really like all margins and padding to be 0 by default, else you wont
get your text exacly to the corner of a div, so it fits pixel perfect
with the background in several cases. The faux columns idea will
automatically generate the idea of a margin to paragraphs in a column.
Since all pages come from the database it is sometimes necessary to
serve style code for elements which are not available on every page. I
think that is a better idea than to make all styles page-specific for
about 1000 pages.
But anyway, the only problem with the page as in problem.html is the
position of the float in the middle in relation to the image inside. I
don't see why I should rebuild my css. I am trying to isolate the
middle column to find where the problem comes from, why the browsers
have a different interpretation of my code.
And If I can't fix it, I can always place the image in a table and the
position will be right in all browsers, but I prefer divs since it is
no table data (although that might be debatable). Another reason is
that I want to learn from my mistakes and there prefer to solve them
instead of using a work-around.
Suggestions on what might cause the different behaviour (for example
the far too small background behind the image in Opera or the position
of the image logo, most clearly in problem.html) are welcome and
appreciated.

Roderik wrote:

A scaled down version with css inside and without header, footer, leftt
and right column can be found at:

http://www.kinderuitje.nl/problem2.html

Reduce the CSS to a minimal case, too, not just the HTML. The answer may
even reveal itself when you do that.

I think I am quite experienced in the use of CSS (but just not enough
to understand all the differences for the top browsers),

Um, those seem to be conflicting statements.

the basic three column layout comes from a template

Perhaps you aimed for a layout too complex for your CSS skill level, or
started with a bad template. Keep it simple, especially if you aren't
quite sure what you're doing.

Regardless, you've ended up with a mess of "div soup", which is tough to
decipher and maintain. It's semantically poor, too, so you have
potential accessibility problems on top of it.

Things might be defined several times because I simplified to code here
to make it easier to get help.

700 lines of CSS and 50 lines of HTML doesn't seem very simplified to
me. Simplify the CSS. Better yet, delete all of it then add back
selectors and properties one at a time so you can see for yourself how
elements are affected in different browsers. That's a pretty good way to
learn, too.

I really like all margins and padding to be 0 by default, else you wont
get your text exacly to the corner of a div, so it fits pixel perfect

Attempts at a "pixel perfect" layout are doomed to failure. If you give
the idea up, you will save yourself heaps of frustration.

But anyway, the only problem with the page as in problem.html is the
position of the float in the middle in relation to the image inside.

No, that is not the only problem, but it seems to be the only issue you
are willing to discuss.

I don't see why I should rebuild my css.

Because it's overly complicated and hard to understand and maintain?

I want to learn from my mistakes

Good. In that case, you shouldn't just dismiss the advice given to you.
Mr Poley gave you some good suggestions. Give them some consideration.

--
Berg

On 2006-10-01, Roderik <emmerink (AT) gmail (DOT) com> wrote:
[snip]

I thought that it was a good thing to explicitly define how things
should be positioned, absolute/relative.

Most things are position: static by default though. Only use
absolute/relative or fixed if you have a reason to I would say.