Stylesheets - What do I need to do to get IE5 and Opera to display my page?

Author

What do I need to do to get IE5 and Opera to display my page?

Alan Silver

2006-04-05, 7:18 pm

Hello,

Well, after almost completing my very first real CSS-only design, I'm
just trying to iron out the last problems. You can see a mock-up of the
page at
http://www.kidsinaction.org.uk/freds/freds-css.html

All HTML and CSS validate without warning. If you use FF (I have 1.0.7)
or IE6, it looks fine (from a technical point of view - you might not
like my design!!), but in Opera and IE5, it does not look how I
expected.

In Opera 8.53, the top div (#header) does not reach the top of the
window, leaving a green band across the top of the page. I have set the
margin and padding for both html and body to zero, and the #header div
has margins of zero as well, so I can't see where this gap comes from.

In IE5, the header part is fine, but the main content div (#main) is
lower down the page than I intended. In FF and IE6, the top of the #main
div is right below the search box, whereas in IE5 it moves further down.
This is not a huge problem, but I would like to remove the extra space
if I can.

Any ideas what I have done wrong, or what browser issues I may have hit?
More to the point, what can I do to work around them?

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

The Major

2006-04-05, 7:18 pm

>Well, after almost completing my very first real CSS-only design, I'm
>just trying to iron out the last problems. You can see a mock-up of the
>page at
>http://www.kidsinaction.org.uk/freds/freds-css.html
>
>All HTML and CSS validate without warning. If you use FF (I have 1.0.7)
>or IE6, it looks fine (from a technical point of view - you might not
>like my design!!), but in Opera and IE5, it does not look how I expected.
>
>In Opera 8.53, the top div (#header) does not reach the top of the
>window, leaving a green band across the top of the page. I have set the
>margin and padding for both html and body to zero, and the #header div
>has margins of zero as well, so I can't see where this gap comes from.
>
<Snip>
>Any ideas what I have done wrong, or what browser issues I may have
>hit? More to the point, what can I do to work around them?

I duplicate the problem with Opera 8 -- but the cure seems to be to
download Opera 9 (beta) which is now my everyday browser -- the problem
is NOT to be seen in that. Can't help with IE5, I'm happy to say!
--
Chris Hughes
"I don't know anything about music. In my line you don't have to". (Elvis Presley)
http://www.epicure.demon.co.uk

Alan Silver

2006-04-05, 7:18 pm

In article <CZRMSCE+z9MEFw7Z@nospamthankyou.spam>, Alan Silver
<alan-silver@nospam.thanx.invalid> writes
<snip>
>In Opera 8.53, the top div (#header) does not reach the top of the
>window, leaving a green band across the top of the page. I have set the
>margin and padding for both html and body to zero, and the #header div
>has margins of zero as well, so I can't see where this gap comes from.

Well, I found the problem here. Due tothe fact that this page will
eventually be part of an ASP.NET site, I had added a <form> tag that
enclosed pretty much the whole content of the <body>. I discovered that
Opera adds a margin to a ,form> and that was what was creating the gap.

I just changed the first CSS bit to...

html, body, form {
margin: 0;
padding: 0;
}

and it fixed it.

Any help on the IE5 problem would be appreciated.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver

2006-04-05, 7:18 pm

In article <nk04X9xSW+MEFwt5@epicure.demon.co.uk>, The Major
<The.Major@farnsebarnse.demon.co.uk> writes
>I duplicate the problem with Opera 8 -- but the cure seems to be to
>download Opera 9 (beta) which is now my everyday browser -- the problem
>is NOT to be seen in that.

As I posted afterwards, the Opera problem turned out to be a margin on
the <form> element. That was easy to fix!!

It would be nice to ignore an issue in one version of a browser and just
assume that people will download the latest version, but the real world
doesn't work that way. As it happened, the problem here was a simple
oversight by me, based on a perfectly reasonable default setting for a
margin that seems to be unique to Opera (up to version 8 at least). Had
this been a more insidious problem, I could not have simply ignored it
and expected people to use a later version.

> Can't help with IE5, I'm happy to say!

I'm not happy about it. No, I don't use IE5, but some people still do.

Thanks anyway.

--
Alan Silver
(anything added below this line is nothing to do with me)

Stephen Poley

2006-04-06, 4:54 am

On Wed, 5 Apr 2006 16:06:38 +0100, Alan Silver
<alan-silver@nospam.thanx.invalid> wrote:

>Well, after almost completing my very first real CSS-only design, I'm
>just trying to iron out the last problems. You can see a mock-up of the
>page at
>http://www.kidsinaction.org.uk/freds/freds-css.html
>

>In IE5, the header part is fine, but the main content div (#main) is
>lower down the page than I intended. In FF and IE6, the top of the #main
>div is right below the search box, whereas in IE5 it moves further down.
>This is not a huge problem, but I would like to remove the extra space
>if I can.

I haven't installed IE5 on this computer, so can't check it myself.
However are you aware of the old Internet Explorer box model and the
Tantek hack used to copy with IE5 foibles? If not, you could do a web
search on them.

Having said that, I think that IE5 can now be considered an old (not to
mention broken) browser, and the number of users is decreasing quite
fast. Pages still need to be readable in IE5, but if they are
cosmetically a bit less attractive I would suggest that really doesn't
matter much any more.

--
Stephen Poley

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

Alan Silver

2006-04-06, 7:08 pm

In article <ra9932psau98jchtal14gu825rvqrb80bb@4ax.com>, Stephen Poley
<sbpoleySpicedHamTrap@xs4all.nl> writes
>On Wed, 5 Apr 2006 16:06:38 +0100, Alan Silver
><alan-silver@nospam.thanx.invalid> wrote:
>
>
>
>I haven't installed IE5 on this computer, so can't check it myself.
>However are you aware of the old Internet Explorer box model and the
>Tantek hack used to copy with IE5 foibles? If not, you could do a web
>search on them.

Thanks. I was sure it was some sort of IE5 bug, but without knowing
which one, it was hard to track down. Now I have some words to use for a
search, I should be able to track this one down.

>Having said that, I think that IE5 can now be considered an old (not to
>mention broken) browser, and the number of users is decreasing quite
>fast. Pages still need to be readable in IE5, but if they are
>cosmetically a bit less attractive I would suggest that really doesn't
>matter much any more.

Probably. I guess it depends on how complex the hack is. The problem
isn't very serious, so if it's going to involve anything complex to fix
it, I won't bother. If it's simple, I might as well.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

dwight.stegall@gmail.com

2006-04-08, 6:43 pm

ie measures the box model differently than the others do. ie measures
from outside border to outside border. other browsers do it differently
and the box model ends up smaller in the other browsers.

here is a flash tutorial on how to fix the box model in ie
http://www.idest.com/csshacks/demos.htm

box model hack examples. click on "Chapter 3: Hiding Css From Newer
Browsers"
http://www.idest.com/csshacks/files.htm

also see
http://centricle.com/ref/css/filters/

this might be a bit intense for a newbie to follow
http://css-discuss.incutio.com/?page=BoxModelHack

if you still don't understand it join http://www.cssdiscuss.org/ it's a
css email list. get a throw away email address just for this list.
you'll get about a dozen emails from them maybe more. they help newbies
and professionals.