Styling in Firefox

**Rik Wasmus** · Oct 16 '07, 02:45 PM

Re: Styling in Firefox

On Tue, 16 Oct 2007 16:27:42 +0200, Jon <JonMYates@gmai l.comwrote:

Hello all.
>
I'm having some problem with CSS errors.
>
In IE, everything looks great, but in FF the footer is appearing in
the middle of the site.
>
The link which is causing the problems is below:
>
www dot nantwichonline dot com/Establishment.a spx?id=1
>
You can see that the orange links appear in the middle of the screen,
but should be at the bottom.
>
I've replaced the . with dot as I don't wish look like I'm trying to
drive taffic.
>
Can anyone please advise as I'm pulling my hair out!

Fix these first:

Validation Results - W3C Markup Validator

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nantwichonline.com%2FEstablishment.aspx%3Fid%3D1

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

The quick reason for different behaviour besides tagsoup btw: MSIE
incorrectly stretches the container to contain floats, Firefox doesn't.
--
Rik Wasmus

**Janusz 'Kali' Kaliszczak** · Oct 16 '07, 02:45 PM

Re: Styling in Firefox

Jon pisze:

Hello all.
>
I'm having some problem with CSS errors.
>
In IE, everything looks great, but in FF the footer is appearing in
the middle of the site.
>
The link which is causing the problems is below:
>
www dot nantwichonline dot com/Establishment.a spx?id=1
>
You can see that the orange links appear in the middle of the screen,
but should be at the bottom.
>
I've replaced the . with dot as I don't wish look like I'm trying to
drive taffic.
>
Can anyone please advise as I'm pulling my hair out!
>
Thanks,
>
Jon
>

in:

..post {...} in style.css

get rid of: height:160px;

and add: overflow:hidden ;
to force float clearing.

And read this:

Position Is Everything - Coding and Computing Tips & Tutorials. Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.

http://www.positioniseverything.net/easyclearing.html

Coding and Computing Tips & Tutorials. Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.

to read how floats behave

--
Janusz 'Kali' Kaliszczak
Hint: OdpisujÄ…c na priva zdebuguj adres

**Beauregard T. Shagnasty** · Oct 16 '07, 03:05 PM

Re: Styling in Firefox

Jon wrote:

I'm having some problem with CSS errors.

Your CSS validates, but your (X)HTML has errors.

<http://validator.w3.or g/check?verbose=1 &uri=http%3A%2F %2Fwww.nantwich online.com%2FEs tablishment.asp x%3Fid%3D1>
"This page is not Valid XHTML 1.0 Strict!
Result: Failed validation, 29 Errors"

In IE, everything looks great, but in FF the footer is appearing in
the middle of the site. The link which is causing the problems is below:
>
www dot nantwichonline dot com/Establishment.a spx?id=1
>
You can see that the orange links appear in the middle of the screen,
but should be at the bottom.

First things first. Fix the errors and try again. Not all browsers
compensate for author mistakes in the same fashion.

Oh, and please fix the font size, so the majority of humans with average
eyesight can read it. font: 0.74em is only 3/4th of my default size.

http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

**Jonathan N. Little** · Oct 16 '07, 03:55 PM

Re: Styling in Firefox

Jon wrote:

Hello all.
>
I'm having some problem with CSS errors.
>
In IE, everything looks great, but in FF the footer is appearing in
the middle of the site.

Not is IE7, looks just like FF! (Looks a you "wish" in IE6), but your in
quirks mode so chances are it ain't going to happen. Need to fix your
makeup.

Validation Results - W3C Markup Validator

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nantwichonline.com%2FEstablishment.aspx%3Fid%3D1

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

[Invalid] Markup Validation of
http://www.nantwichonline.com/Establishment.aspx?id=1 - W3C Markup Validator

>
The link which is causing the problems is below:
>
www dot nantwichonline dot com/Establishment.a spx?id=1
>
You can see that the orange links appear in the middle of the screen,
but should be at the bottom.
>
I've replaced the . with dot as I don't wish look like I'm trying to
drive taffic.

No need we can see this is a legitimate question, no real need to munge
the address.

>
Can anyone please advise as I'm pulling my hair out!

Also markup is just....hmmm well not really very good. You create pseudo
heading with <band 's where you should use <h#>, stuff like this:



Overly complicated nested <div>'s and 's

Here is a bad start:

body {
padding: 0;
margin: 0;
font: 0.74em Arial, Helvetica, sans-serif;
^^^^
Don't start out with micro text...

and all your block are defined in pixels, guess what happens when you
enlarge the text?

So the point of my litany here is you could spend a tremendous amount of
time chasing the one(or more factors) that is causing the problem. I'd
say better to start a fresh, and do so more simply and with semantic
markup. Avoid quirks mode because once triggered inter-browser
inconsistency will be lost. Fix your errors. Do not design with IE6 and
then check with Firefox for problems but start the other way around.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Jon** · Oct 16 '07, 06:45 PM

Re: Styling in Firefox

On 16 Oct, 16:54, "Jonathan N. Little" <lws4...@centra lva.netwrote:

Jon wrote:

Hello all.

>

I'm having some problem with CSS errors.

>

In IE, everything looks great, but in FF the footer is appearing in
the middle of the site.

>
Not is IE7, looks just like FF! (Looks a you "wish" in IE6), but your in
quirks mode so chances are it ain't going to happen. Need to fix your
makeup.
>
http://validator.w3.org/check?verbos...2Fwww.nantwich...
[Invalid] Markup Validation ofhttp://www.nantwichonl ine.com/Establishment.a spx?id=1- W3C Markup Validator
>
>
>

The link which is causing the problems is below:

>

www dot nantwichonline dot com/Establishment.a spx?id=1

>

You can see that the orange links appear in the middle of the screen,
but should be at the bottom.

>

I've replaced the . with dot as I don't wish look like I'm trying to
drive taffic.

>
No need we can see this is a legitimate question, no real need to munge
the address.
>
>
>

Can anyone please advise as I'm pulling my hair out!

>
Also markup is just....hmmm well not really very good. You create pseudo
heading with <band 's where you should use <h#>, stuff like this:
>

>
Overly complicated nested <div>'s and 's
>
Here is a bad start:
>
body {
padding: 0;
margin: 0;
font: 0.74em Arial, Helvetica, sans-serif;
^^^^
Don't start out with micro text...
>
and all your block are defined in pixels, guess what happens when you
enlarge the text?
>
So the point of my litany here is you could spend a tremendous amount of
time chasing the one(or more factors) that is causing the problem. I'd
say better to start a fresh, and do so more simply and with semantic
markup. Avoid quirks mode because once triggered inter-browser
inconsistency will be lost. Fix your errors. Do not design with IE6 and
then check with Firefox for problems but start the other way around.
>
--
Take care,
>
Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com

Thank you to everyone who has help. We've fixed a number of issues and
are working though the rest.

All the best,

Jon

Styling in Firefox

Styling in Firefox

Comment

Comment

Comment

Comment

Comment