Stephen Poley schreef:
On 30 Sep 2006 18:20:33 -0700, "Roderik" <em******@gmail .comwrote:
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;widt h: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.
