By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,242 Members | 1,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,242 IT Pros & Developers. It's quick & easy.

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

P: n/a
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)
Apr 5 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
>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
Apr 5 '06 #2

P: n/a
In article <CZ**************@nospamthankyou.spam>, Alan Silver
<al*********@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)
Apr 5 '06 #3

P: n/a
In article <nk**************@epicure.demon.co.uk>, The Major
<Th*******@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)
Apr 5 '06 #4

P: n/a
On Wed, 5 Apr 2006 16:06:38 +0100, Alan Silver
<al*********@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/
Apr 6 '06 #5

P: n/a
In article <ra********************************@4ax.com>, Stephen Poley
<sb******************@xs4all.nl> writes
On Wed, 5 Apr 2006 16:06:38 +0100, Alan Silver
<al*********@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.


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)
Apr 6 '06 #6

P: n/a
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.

Apr 8 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.