I seem to be running into problems when I try viewing pages at my site http://site.sheltersrus.com.au/ using this stylesheet http://site.sheltersrus.com.au/sheltersrus.css in Internet Explorer 6.
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. These are divs that float the sidebar left and the
main content right. I thought I had only assigned about 97% of the width
of the page. On a Macintosh, Firefox 1.5, Opera 8.52 and Safari 2 all
seem to be happy about the page width.
I have used HTML 4.01 Strict, so I thought IE6 would render in Standard
compliance mode, so this should eliminate the Box Model bug. The HTML
and CSS validate. StyleMaster doesn't complain about possible browser
problems in my CSS, except for Netscape 4.
Any suggestions about whether I have something totally misguided in my
CSS, or whether I am encoutering some IE only problem?
-- http://www.ericlindsay.com 4  1573 
Eric Lindsay wrote : I seem to be running into problems when I try viewing pages at my site
http://site.sheltersrus.com.au/ using this stylesheet
in Internet Explorer 6.
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.
This could be one of the IE6 float bugs.
These are divs that float the sidebar left and the main content right. I thought I had only assigned about 97% of the width
of the page. On a Macintosh, Firefox 1.5, Opera 8.52 and Safari 2 all
seem to be happy about the page width.
I have used HTML 4.01 Strict, so I thought IE6 would render in Standard
compliance mode, so this should eliminate the Box Model bug.
Yes, most of what is known as the box model implementation but not
everything (like floats, overflow=visible and other known bugs related
to box model).
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.
In your stylesheet, you say "IE can't handle 1em" but that's not true IMO.
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.
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.
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.
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.
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.
The HTML and CSS validate. StyleMaster doesn't complain about possible browser
problems in my CSS, except for Netscape 4.
Any suggestions about whether I have something totally misguided in my
CSS, or whether I am encoutering some IE only problem?
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.
<img src="images/logo.gif" alt="logo" width="153px" height="182px">
HTML Tidy will report invalid width and height values here.
Gérard
--
remove blah to email me
In article <44************@uni-berlin.de>,
Gérard Talbot <ne***********@gtalbot.org> wrote: Eric Lindsay wrote : 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.
This could be one of the IE6 float bugs.
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.
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.
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.
In your stylesheet, you say "IE can't handle 1em" but that's not true IMO.
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.
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.
Thanks for that advice. A lot of stuff I put in seemed based on old
notes about past problems.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<img src="images/logo.gif" alt="logo" width="153px" height="182px">
HTML Tidy will report invalid width and height values here.
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
In article <1p****************@markparnell.com.au>,
Mark Parnell <we*******@clarkecomputers.com.au> wrote: Deciding to do something for the good of humanity, Eric Lindsay
<NO**********@ericlindsay.com> declared in
comp.infosystems.www.authoring.stylesheets:
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?
Width and height of an image is in pixels by default[1] - just use
width="153" height="182".
[1] They are of type "length":
http://www.w3.org/TR/html401/sgml/dtd.html#Length
D'oh! I knew that. I think I just had senior moment (or I've been
writing px too often in CSS). Thanks.
-- http://www.ericlindsay.com This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Bryan R. Meyer |
last post by:
Hello Everyone,
The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. ...
|
by: Jane Withnolastname |
last post by:
I am trying to re-work an old site by replacing the html with css.
On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:...
|
by: Harlan Messinger |
last post by:
What am I not understanding about the definition of { position: absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These...
|
by: rajek |
last post by:
I posted a similar question yesterday, but didn't get an answer that
resolved the issue. (Thanks to those who tried though.)
The background: I've read in books and online that if you have one...
|
by: NS |
last post by:
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
|
by: Charles Harrison Caudill |
last post by:
with tables there is a clean and algorithmic way to organize things, but with
css which is, once you get it working, much cleaner, I have to tweak and patch
and hope and pray and curse before...
|
by: Rob R. Ainscough |
last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world
of control positioning in MultiViews (ASP 2.0). I came across this to help
me explain (or attempt to anyway) why my web...
|
by: Alan Silver |
last post by:
Hello,
Having been a light reader of this ng for a few months now (after
several years absence), I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here....
|
by: TheCeej |
last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm...
|
by: Mark |
last post by:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html
<div class='thumb'><a href='image.jpg'><img...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
