14 replies [Last post]
AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

My site looks fine with IE and my CSS is validated correctly using W3-css validator.

But when I open the site with FireFox, it's completely ruined... Sad

Here's what i mean: Try open it with FireFox....

What am i doing wrong?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: FireFox ruins my layout

AmonRa wrote:
What am i doing wrong?

Using IE as your testing browser. You should be using FF as your testing browser than working around to get IE to display right.
Then, to start with, lose display: inline from #mainContent and replace it with margin: 0 auto.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

FireFox ruins my layout

Quote:
My site looks fine with IE and my CSS is validated correctly using W3-css validator

Yes...that's true, you css does validate, but your html is not valid with an incomplete doctype. Your page is operating in quirksmode...therefore causing you trouble Smile

- r

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

FireFox ruins my layout

ragamuffin wrote:
Quote:
My site looks fine with IE and my CSS is validated correctly using W3-css validator

Yes...that's true, you css does validate, but your html is not valid with an incomplete doctype. Your page is operating in quirksmode...therefore causing you trouble Smile

- r

And what's the solution for that? I think i'm going to translate the whole thing to tables...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

FireFox ruins my layout

Hi

Follow the link in my sig

Trevor

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

FireFox ruins my layout

Quote:
And what's the solution for that? I think i'm going to translate the whole thing to tables...

Persevere Laughing out loud The easy way out is very rarely the best way.

The solution? You need to put a complete doctype in your html...you are missing the URI. Replace your current doctype with this

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

I would recommend for you to read this article to explain the importance of doctypes and web standard compliance. Smile
http://www.alistapart.com/stories/doctype/

Did Tyssen's suggestion work?

- r

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

FireFox ruins my layout

ragamuffin wrote:
Quote:
And what's the solution for that? I think i'm going to translate the whole thing to tables...

Persevere Laughing out loud The easy way out is very rarely the best way.

Surely going to table is also not the easy way out? Laughing out loud

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

FireFox ruins my layout

ragamuffin wrote:
Quote:
And what's the solution for that? I think i'm going to translate the whole thing to tables...

Persevere Laughing out loud The easy way out is very rarely the best way.

The solution? You need to put a complete doctype in your html...you are missing the URI. Replace your current doctype with this

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

I would recommend for you to read this article to explain the importance of doctypes and web standard compliance. Smile
http://www.alistapart.com/stories/doctype/

Did Tyssen's suggestion work?

- r

Well, i replaced the Doctype and I did what Tyssen said but it's not working. I have a deadline so I'm going to make this site in tables. With FireFox the entire text aligns left and the content Divs are not in the frameDivs.... grrrr

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

FireFox ruins my layout

I understand deadlines, but try one more thing. Your #container is aligned left because you have not defined it to do otherwise.

Try adding this to #container:
margin-right:auto;
margin-left:auto;

- r

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

FireFox ruins my layout

ragamuffin wrote:
I understand deadlines, but try one more thing. Your #container is aligned left because you have not defined it to do otherwise.

Try adding this to #container:
margin-right:auto;
margin-left:auto;

- r

Great Ragamuffin! That's one!

Now i'm having the following questions:

1) How can i align the main menu to bottom right of the green bar?

2) in FireFox the dotted line near 'Welkom' aligns to the right of that picture. In IE it's 'under' the 'welkom'-image.

3) in IE the picture of the photographer is IN the div, so the frame is stretching with it. In FireFox the picture is 'above' the frame, so the frame stopts but the picture is over it.

Here's a picture of how it looks in FireFox:
http://www.kostwinderholland.nl/dev/fotohenkjan/firefox.jpg

(i made some red arrows (with number of question next to it)

New version can be seen on:
http://www.kostwinderholland.nl/dev/fotohenkjan/index5.php

just curious:
Does anyone has a better way to make this site?

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

FireFox ruins my layout

Quote:
How can i align the main menu to bottom right of the green bar?

have you tried giving that div a 'float:right; width:auto;'?

Quote:
in FireFox the dotted line near 'Welkom' aligns to the right of that picture. In IE it's 'under' the 'welkom'-image.

On 'contentTitle' take off vertical-align:top and give the div the height of the image

Quote:
in IE the picture of the photographer is IN the div, so the frame is stretching with it. In FireFox the picture is 'above' the frame, so the frame stopts but the picture is over it.

On the 'maincontent' try adding 'overflow:hidden'

Let's see if any of that works. Laughing out loud

- r

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

FireFox ruins my layout

ragamuffin wrote:

1)have you tried giving that div a 'float:right; width:auto;'?

Let's see if any of that works. Laughing out loud

- r

Dear Ragamuffin,

All worked out fine! Thanks for the help. But the menu doesn't align the bottom... That's strange...

edit: I solved it with a <BR>

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

Re: FireFox ruins my layout

Tyssen wrote:
AmonRa wrote:
What am i doing wrong?

Using IE as your testing browser. You should be using FF as your testing browser than working around to get IE to display right.
Then, to start with, lose display: inline from #mainContent and replace it with margin: 0 auto.

Dear Tyssen,

Well, I want to have 2 divs next to eachother....

in fact:

<div>            HEADER               </div>
<div>menu</div>           <div>content</div>
<div>            FOOTER               </div>

And the div.menu should be strechting with the content of the div.content
Is that possible? (both have fixed wifdth)

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

FireFox ruins my layout

Quote:
Well, I want to have 2 divs next to eachother....And the div.menu should be strechting with the content of the div.content Is that possible? (both have fixed wifdth)

All you need to do is float one div left and float the other right.

div.menu {float:left; width:150px; margin-right:10px;}
div.content {float:right; width:300px;}

I would recommend doing a google search on 'faux columns' for the column stretching. Laughing out loud

- r

AmonRa
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2005-12-11
Posts: 12
Points: 0

FireFox ruins my layout

ragamuffin wrote:
Quote:
Well, I want to have 2 divs next to eachother....And the div.menu should be strechting with the content of the div.content Is that possible? (both have fixed wifdth)

All you need to do is float one div left and float the other right.

div.menu {float:left; width:150px; margin-right:10px;}
div.content {float:right; width:300px;}

I would recommend doing a google search on 'faux columns' for the column stretching. Laughing out loud

- r

Dear Ragamuffin,

Thanks for your great support. I'm going to rebuild the site entirely in CSS + HTML (without as many tables as possible). When it's completed, I will post it in this thread.

Do you have any tips for the structure of the site?