Fine in IE, wrong in FF (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

TygerTyger -> Fine in IE, wrong in FF (2/25/2005 6:54:17)

This is my first venture into CSS so forgive me if the code is bad. I just did my first entirely CSS page and to my amazement it looks exactly as I want in IE, and completely up the creek in FF. I added in some box-model/-moz-box-model stuff as nothing more than a guess, but it didn't make a difference unless I was doing it wrong.

Can anyone shed some light on what I've done wrong?

edited by c1sissy as per request of poster.
Tables/Divs bit is at the bottom.

Many thanks.



c1sissy -> RE: Fine in IE, wrong in FF (2/27/2005 7:11:19)

Hi TygerTyger,
Welcome to Outfront.
First you need to validate your page, its not showing up as validated
http://validator.w3.org/check?uri=http%3A%2F%2Fbpit.red-tyger.com%2Fcontactus.php

Your css does show as its validated.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fvalidator.w3.org%2Fcheck%3Furi%3Dhttp%253A%252F%252Fbpit.red-tyger.com%252Fcontactus.php&usermedium=all

Now, the next thing I need to warn you about is that the -moz-box model stuff is css3 and is only a working draft right now. What that means is that what they are doing right now might not be within the css3 working module. Even though it validates right now, it might not when they are finished with the next level of css.

Work on validating your html. Once you do that, then see what happens with your page.



Giomanach -> RE: Fine in IE, wrong in FF (2/27/2005 8:13:53)

TygerTyger

I've kust looked through your CSS, and you are relying far too much on positioning, And it doesn't quite render right in IE on my machine.

Your problem is the mounds of positioning. OK, so others will disagree with me, but that's your problem, and your design can be done with a small fraction of positioning, if any at all. You've alos floated most of your DIVs, which will be be causing no end of problems.

It renders fairly well in Opera, but not quite how you would want it.

Let me play with the CSS, and I'll see what I can do with it, and I'll get it to display right in all browsers for you ;)

Dan

PS: It does validate



TygerTyger -> RE: Fine in IE, wrong in FF (2/27/2005 8:26:28)

Yes it validates now because I was just this minute messing around with it. It probably changed several times while you were looking lol. There is a lot more positioning in there than there was, mainly because I haven't got the hang of it and was messing around. I seem to have made it a lot worse, and completely changed my original problem, sorry. It was the 'bars' I was changing though, the form itself hasn't changed at all and still looks exactly right except in Firefox.

No pressure to help at all, I try to learn by doing and getting wrong. However it would be exceptionally kind of you if you had anything at all to point me the right way.

Thank you very much everyone helping so far.



Giomanach -> RE: Fine in IE, wrong in FF (2/27/2005 10:28:45)

http://outfront.giomanach.com/TygerTyger/rework.htm

How's that look?

From my end, it works in FF1.01, Mozzy 1.7, NN7.2, Opera 7.54, and IE6.

If you look at the stylesheet: http://outfront.giomanach.com/TygerTyger/css.css

You'll see I've put it all in a container DIV - this was needed to keep it all inline with everything. I have also recoded the form layout to use a table rather than DIVs as this was another problem, that's what was knocking out of place in FF for the most part.

There is also no positioning on the page now, yes I have used floats, but if you look at the coding, I have also nested the rows. This makes for a lot less coding and a lot less work.

I haven't put the JS back in, I have left that for you to do; I have merely got your HTML/CSS altered to allow you to have a cross browser web page.

It's available here for download: http://outfront.giomanach.com/TygerTyger/tygertyger.zip

When creating a design like yours, try and use the flow of the document, rather than the flow of your mind, you will find it a lot easier to get your head round.

And IMO, positioning isn't everything, try and use it as little as possible, only use it when you have no other way. Again, that's my opinion, so don't put me through the Cheese Grater for saying it

HTH

Dan



TygerTyger -> RE: Fine in IE, wrong in FF (2/27/2005 11:18:41)

You are a wonderful, wonderful person thank you so much. It gives me something to fiddle around with myself as well, learn a little more. As I say that was my first CSS attempt, I used no tables because I originally tried to do it the hard way and aimed for strict compliant, of course with JS I couldn't do it anyway. And I'm with you on positioning actually, I just didn't know enough about how to do it without yet. Now I do :)

I'll leave the assisted author comment in ;) if you would like me to add a link too just let me know. I do have one question if I may, in FF what looks like a line break appears between the grey dashed bordered div and the third row bar at the bottom, I can't see anything in the code to explain it?



Giomanach -> RE: Fine in IE, wrong in FF (2/27/2005 11:21:49)

quote:

<br clear="all" />

My Bad... Just remove that and all should be fine

<edit>
I removed it and it looks as it should ;)
</edit>



TygerTyger -> RE: Fine in IE, wrong in FF (2/27/2005 11:50:35)

I noticed that one ;) I was going to fix it myself. What I actually meant was there's an unexplained gap again at the bottom, this time minus corresponding code as far as I can see.

http://red-tyger.com/images/screenshot.jpg



jaybee -> RE: Fine in IE, wrong in FF (2/27/2005 12:15:10)

quote:

You are a wonderful, wonderful person thank you so much.


Oh, now don't go saying things like that! We'll never hear the end of it. Can't you just edit it to "Thanks, that's really good" or something? [;)]



dpf -> RE: Fine in IE, wrong in FF (2/27/2005 12:35:47)

quote:

We'll never hear the end of it.
yea...from jaybee herself..<hehe>



Giomanach -> RE: Fine in IE, wrong in FF (2/27/2005 13:37:28)

quote:

ORIGINAL: TygerTyger

I noticed that one ;) I was going to fix it myself. What I actually meant was there's an unexplained gap again at the bottom, this time minus corresponding code as far as I can see.

http://red-tyger.com/images/screenshot.jpg

To that one, I haven't a clue[:D]

I think it's a rendering problem universally, but I might be wrong



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125