Width Problem in Firefox

[Jon]

Hello all,

Would anyone be able to help shed some light on a problem I have with
the below site:

http://www.maychild.co.uk/consultancy.aspx.

It looks fine in IE, but is far to wide in Firefox. I've tried
numerous things to amend but no joy - any help would be much
appreciated,

Regards,

Jon

[Irina Rempt]

Re: Width Problem in Firefox

Jon wrote:

Hello all,
>
Would anyone be able to help shed some light on a problem I have with
the below site:
>
http://www.maychild.co.uk/consultancy.aspx.
>
It looks fine in IE, but is far to wide in Firefox. I've tried
numerous things to amend but no joy - any help would be much
appreciated,

I can't see your stylesheet, but it looks as if your body text is set to
nowrap somehow. At least, it doesn't wrap, even if I make it as large as it
will get. If not-wrapping is an essential part of your presentation style
I'd recommend writing shorter paragraphs to keep the line length
manageable, but I don't think the content would suffer by wrapping.

Alternately, perhaps your footer and/or your body div is set to a fixed
width.

(I do like your colour scheme. But your body font is almost unreadably small
for people with high resolution and weakish eyesight, like me. That's
something many people do the moment they get their hands on CSS, and I wish
they wouldn't.)

Irina

--
"Of course it is happening inside your head, Harry, but why on earth
should that mean that it is not real?" --Albus Dumbledore
http://www.valdyas.org/foundobjects/index.cgi Latest: 08-Oct-2008

[Anze]

Re: Width Problem in Firefox


You are not using doctypes so your page looks different in FF and IE. Google
for "CSS box model" to learn more.

This is the culprit:

#rightcolumn
{
width: 830px;
padding-left: 150px;
padding-right: 150px
...
}

IE in quirks mode takes the width... Huh, I think it takes borders and
padding into width, but not margins? Not sure, I never use quirks mode.

FF on the other hand probably does the same in quirks mode as otherwise: it
takes the width, adds padding, then borders, then margin. And you end up
with 1130px wide container.

Set the DOCTYPE to Transitional and width to 530 and you'll be fine (or at
least better ;).

Hope it helps.

Best,

Anze

[dorayme]

Re: Width Problem in Firefox

In article
<21a77991-45fc-4832-9937-c4cb8a9c0505@b3 1g2000prb.googl egroups.com>,
Jon <JonMYates@gmai l.comwrote:

Hello all,
>
Would anyone be able to help shed some light on a problem I have with
the below site:
>
http://www.maychild.co.uk/consultancy.aspx.
>
It looks fine in IE, but is far to wide in Firefox. I've tried
numerous things to amend but no joy - any help would be much
appreciated,
>

Get rid of

#rightcolumn
{
width: 830px;


But, really, use a proper doctype.

Use a validator to check for errors and warnings.

--
dorayme

[Bergamot]

Re: Width Problem in Firefox


Jon wrote:

>
Would anyone be able to help shed some light on a problem I have with
the below site:
>
http://www.maychild.co.uk/consultancy.aspx.

spacer.gif?

It's an unhealthy mix of HTML presentational attributes and CSS, with
far too many inline styles. As you've already discovered, debugging
rendering issues is a lot harder than it should be. Maintenance will be
a PITA, too.

It looks fine in IE, but is far to wide in Firefox.

It's also dependent on puny type and does not adapt to my 17px minimum
font-size. The fixed height:400px on the content block is unnecessary,
let alone correct. Learn how to use floats properly and you can get rid
of such hackish code. You shouldn't need to float the content block to
begin with.

http://brainjar.com/css/positioning/

http://www.quirksmode.org/css/clearing.html

any help would be much
appreciated,

Strip out all the presentational junk and clean up the code, using
better semantics. You don't even have a single heading element in there,
which isn't going to do search engines any favors, let alone users.
After that you should add in CSS where necessary, but don't go overboard
with over-specifying every element. Learn how to use things like
descendant selectors to keep it simple, and stick with HTML 4.01 Strict.
More reading for you:

http://microformats.org/wiki/posh

http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/

http://www.cs.tut.fi/~jkorpela/html2css.html

http://css.maxdesign.com.au/listamatic/

BTW, there is some kind of weird character on the home page, in the
middle column after "Microsoft Windows". I tried overriding the
character encoding, but nothing fixed it. The dot.gif background image
in the banner is also positioned incorrectly, presumably being dependent
on a puny font-size. It doesn't change position on different pages, so
I'm not sure what its purpose is. You also forget to set a page
background color. My browser default is not white, and it shows.

http://www.bergamotus.ws/screenshots/maychild.png

--
Berg