Stylesheets - Styling in Firefox

Author

Styling in Firefox

Jon

2007-10-16, 6:20 pm

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.aspx?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

Rik Wasmus

2007-10-16, 6:20 pm

On Tue, 16 Oct 2007 16:27:42 +0200, Jon <JonMYates@XXXXXXXXXX> 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.
>
> The link which is causing the problems is below:
>
> www dot nantwichonline dot com/Establishment.aspx?id=3D1
>
> 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:
http://validator.w3.org/check?verbo...%2Fwww.nantwic=
honline.com%2FEstablishment.aspx%3Fid%3D1

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

2007-10-16, 6:20 pm

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.aspx?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:
http://www.positioniseverything.net/easyclearing.html
to read how floats behave

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

Beauregard T. Shagnasty

2007-10-16, 6:20 pm

Jon wrote:

> I'm having some problem with CSS errors.

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

<http://validator.w3.org/check?verbo...t.aspx%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.aspx?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

2007-10-16, 6:20 pm

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?verbo...t.aspx%3Fid%3D1
[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.aspx?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 and '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
http://www.LittleWorksStudio.com

Jon

2007-10-16, 6:20 pm

On 16 Oct, 16:54, "Jonathan N. Little" <lws4...@centralva.net> wrote:
> Jon wrote:
>
>
>
> 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?verbo...www.nantwich...
> [Invalid] Markup Validation ofhttp://www.nantwichonline.com/Establishment.aspx?id=1- W3C Markup Validator
>
>
>
>
>
>
>
> No need we can see this is a legitimate question, no real need to munge
> the address.
>
>
>
>
> Also markup is just....hmmm well not really very good. You create pseudo
> heading with and '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.LittleWorksStudio.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