In article <44eappF1nj52U1@uni-berlin.de>,
Gérard Talbot <newsblahgroup@gtalbot.org> wrote:
[color=blue]
> Eric Lindsay wrote :[color=green]
> >
http://site.sheltersrus.com.au/
> > While I still have several problems with the CSS, the one that mainly
> > concerns me is the sidebars on the left hand side overlay the main
> > content of the page.[/color]
>
> This could be one of the IE6 float bugs.[/color]
I finally found a reference to an IE Doubled float margin bug, so maybe
that is the problem. At least I can figure out how to do a test page
for that, for when I next get access to IE.
[color=blue]
> I have tested your page with IE 7 beta 2 and everything seems ok; I do
> not see the overlapping or overlaying. I tried with several scr.
> resolutions. Your page layout is scalable too, which is good.[/color]
Thanks for testing with IE7b2. I suspect the Windows PC I have access
to is way too old to run that, even if it had internet access.
[color=blue]
> In your stylesheet, you say "IE can't handle 1em" but that's not true IMO.[/color]
All the places I mention IE problems are because I have a note (mostly
thanks to references from this group) that there may be a problem. I
try to put in a comment to remind myself why I have used a particular
method, instead of something else. I may well be unjustly blaming IE in
many of these places, but I just don't know what it will do while I am
writing a page.
[color=blue]
> Many of your css declarations are unneeded: e.g. the body element has,
> by default in all known browsers, no border. Opera 8+ recently dropped
> padding on body and IE 7 beta 2 now follows the default body margin as
> set by Firefox, Mozilla. So this is great news: all browser
> manufacturers now apply the same default margin|padding value on the
> body node.[/color]
Thanks for that advice. A lot of stuff I put in seemed based on old
notes about past problems.
[color=blue]
> Why not put your <h1> into your div id="main_text"? I see many areas
> where you can simplify a lot your stylesheet. Your stylesheet
> over-declares, over-defines rules.[/color]
It started out as a much simpler one (that worked), and then Pete wanted
to put more pictures in, and change the way the several areas were done.
I tried changing the CSS on the fly, so the current CSS is halfway
between the original, and some as yet unknown final version. I recall
the <h1>, for example, used to go across the whole page (which explains
why it wasn't in the div id="main_text") but I reduced the width when
Pete wanted a logo in the corner.
[color=blue]
> And you also try to neutralize what you believe to be bugs in IE:
> * { font-family: sans-serif; font-size: 100% ; } /* dodge IE bug? */
> If font size and family have been defined here for every elements, then
> everytime you will redefine the font size, you'll be over-declaring.[/color]
OK, thanks for that. I think I had some idea that the universal
declaration didn't actually work for every browser? That should help
clean things up.[color=blue]
>
> In your stylesheet, you removed the margin on the body node but then,
> later you add a 10% margin on your main_text div and 1% for the sidebar.
> You could have made this a lot more simpler. My reasoning is: why fight
> default rendering values in browsers when these are good after all? If
> your design is scalable, then you do not need to care/bother if the body
> margin are 15px 10px in MSIE 6 and 8px in Mozilla-based browsers.[/color]
I certainly didn't have those margins in the original. I seem to recall
thinking the page would look nicer with a wider margin, so it was
something added recently and on the fly. May even be why I hit the IE
problem.
[color=blue]
> Finally, you only need 1 floated box. Either the sidebar should be
> floated left or the main_text should be floated right: you do not need
> both main page boxes to be floated. Doing both might cause trigger
> layout bugs.[/color]
That is interesting about only needing one floating box. I have been
floating both sides of all my other pages for about four years (since
the last remake). I can't recall the circumstances, and maybe I didn't
need it then either, but I seem to recall I couldn't make it work back
then without floating both sides of the pages. In fact, I couldn't make
it work back then without having the sidebar on the right, I could never
get it working as a left sidebar back then (unless the sidebar text
preceeded the main text in the HTML). That gives me something else to
experiment with.
[color=blue]
> 1 other suggestion. You have this:
> <body>
> <div id="document">
> ...
> </div>
> </body>
>
> Why do you need the nested <div id="document"> in there? I see
> duplication of what the body node already does. Removing that <div
> id="document"> would reduce the DOM tree depth and make your page a bit
> faster to load and being parsed.[/color]
Removing that seems reasonable. I put it in the original, probably in
case I needed it for something, and never used it. Thanks for that.
In some other test cases I managed to vastly reduce the number of divs
and classes, and mostly style on elements, but that is so foreign to
most pages whose source I read that I felt perhaps I was doing something
wrong. My test case at
http://www.ericlindsay.com/palmtop/palmnote.htm
has I think one div and only a few classes. However I doubt it will
work in any version of IE.
[color=blue]
> <img src="images/logo.gif" alt="logo" width="153px" height="182px">
> HTML Tidy will report invalid width and height values here.[/color]
I am sorry, I don't understand this comment. The height and width are
what is reported for that graphic. Can you explain why they would be
invalid?
--
http://www.ericlindsay.com