20 replies [Last post]
valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

Hello.

Anyone want to take a look at my CSS and see if anything is wrong? In IE the page looks like it should, but in firefox some part moves down. I have "float: left;" and i dont want to use absolute.

Url: Http://ikt-student.hivolda.no/~berentse/layers/index.php

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE vs Firefox

Welcome!

Usually when you join forums, it's a good idea to read the stickies at the tops of the boards.

Go and have a look at the two main ones, specially the bits about doctypes and validation, add in the code, and let us know what happens to IE.

Verschwindende wrote:
  • CSS doesn't make pies

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

Thx for the answer. You see i started with CSS yesterday and had no idea what was wrong.

You mean i have to add this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE vs Firefox

Yes Laughing out loud Add that, and it will force IE into Standards Mode. Let us know when you've done that, and we can help fix the problem.

Verschwindende wrote:
  • CSS doesn't make pies

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

Added.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE vs Firefox

That was quick Laughing out loud Alright, gimme a minute, I'll have a looksee.

/edit

wrong way round, should be this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

try that. Let me know when its done.

Verschwindende wrote:
  • CSS doesn't make pies

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

There we go.. The box jumps down in IE now..

hmm..

Any ideas?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE vs Firefox

Tis unsual. If you edit #meny to say this:

#meny {
	height: 370px;
f
	width: 199px;

add a random character, it works . . . tis VERY unusual. Lemme look some more.

Verschwindende wrote:
  • CSS doesn't make pies

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

It made the meny take all the space in the "main container".

The #hoveddel is still under.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 1 day ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE vs Firefox

hmmmm, worked for me.

I'll keep looking; in the meantime, maybe someone else knows what the problem is?

Verschwindende wrote:
  • CSS doesn't make pies

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

Thx for taking the time!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 51 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

IE vs Firefox

The random character between rulesets also worked; well and truly weird.

Not floating the text area also works;

#hoveddel {
    height: 370px;
    margin-left: 210px;
    background-color: #000000;
	border-top: none #000000;
	border-right: 1px solid #666666;
	border-bottom: none #000000;
	border-left: none #000000;
    }

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

Yes it makes the #hoveddel move up, but it still looks bad.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 51 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

IE vs Firefox

valkyr wrote:
Yes it makes the #hoveddel move up, but it still looks bad.
??? It looks like what you coded would look if it worked—at least in Firefox[1]. You must define your terms and indicate which browser is doing what. It's too soon to say anything about the coding detail while you depend on fixed heights to keep things lined up. The mismatched background colors don't help, while the floats aren't properly enclosed except in IE due that browser's buggy behavior.

What you have is a very usual two column + header + footer that is made overly complicated by a lack of understanding the float property and the various methods of clearing/enclosing floats.

Study 2 column -- apparent equal height and enclosing float elements for the things you need for this page. Follow and study all links, too.

gary

[1] If you develop against a bug-ridden, non-compliant, obsolete browser like IE, you will write buggy code. Firefox is the best of breed at this time.

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

valkyr
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-01
Posts: 8
Points: 0

IE vs Firefox

Thx.

Well i think the page looks the same in IE as Firefox now. Just played around with the W and H.

Thx all! "2"

http://ikt-student.hivolda.no/~berentse/layers/

Tinohead
Offline
newbie
Aberdeen
Last seen: 8 years 38 weeks ago
Aberdeen
Joined: 2006-02-10
Posts: 3
Points: 0

IE vs Firefox

It sounds like this website is laid out in the same way as the one I'm having problems with, so I wanted to read those articles gary, but the links dont work for me. Can anyone else read them?

Cheers

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

IE vs Firefox

There seems to be an re-occurring problem with this site Smile (I fixed up a bb code error, but links are still broken: garyblue.port5.webdev ? )

I would advise- as good as Gary's examples are- that you study floats and layouts at somewhere like P.I.E which is a site renowned for it's understanding of these matters.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 51 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

IE vs Firefox

I cannot imagine how I managed to mess the links up that badly. I even got my first fixit attempt wrong. Sad The links are working now, which is why I should always copy and paste.

Hugo is right. You should definitely read the more authoritative explanations. My demos are simple examples, from which you can compare the book larnin' to the practical.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

IE vs Firefox

I'm the fool as I changed it to a directory slash but forgot to add .com :roll: no wonder it still wouldn't work, I really do need to take my brain out and give it a good dusting down.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 51 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

IE vs Firefox

Hah! If you'd kept your fingers away from the keyboard, the world, including myself, could have gone on thinking I was the idjit.Tongue But now we know.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

IE vs Firefox

Laughing out loud oh no I explained that badly, you were indeed the idjit you thought yourself to be I just attempted to write the url in the address bar of the browser to find the correct path, you did indeed make as much of a mess of things as you originally thought, then I attempted to doubly compound things but sensibly decided to backbutton my way out of trouble, I guess I should have just kept quiet Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me