Stymied by the faulty IE box model! Help!

A

Andrew

Hi all,

I'm looking for help with a problem with a site I'm trying to design.
I've asked various friends and colleagues who know more than I do, and
they all say that it's down to the faulty IE box model. At that point,
though, they go fuzzy and disappear with better things to do....

The site in question is here: www.theitservice.co.uk

The site renders properly in IE7, Firefox and Opera. But in IE6, it
looks... well... rubbish. It's only early days for the site yet - I'm
still playing around with ideas for the design and for navigation
systems, but if anyone could explain what I need to do to improve the
issue I'd be grateful.

And while we're at it (and I know I'm opening myself up here for
torrents of abuse!) if anyone has any general comments along the lines
of "You really should/shouldn't do such-and-such" I'd also be
grateful...

Many thanks in advance.

Regards
Andrew Richards
 
E

Els

Andrew said:
The site in question is here: www.theitservice.co.uk

The site renders properly in IE7, Firefox and Opera. But in IE6, it
looks... well... rubbish. It's only early days for the site yet - I'm
still playing around with ideas for the design and for navigation
systems, but if anyone could explain what I need to do to improve the
issue I'd be grateful.

You have floated the content column to the left, and given it a left
margin. You can choose either, I think it's the combination that makes
IE6 go off. IE6 reckons your left margin should not cover the left
column, so it gives you 132px for the left column, 150px for the left
margin, total 182px space on the left of the content column.
 
D

dorayme

Andrew said:
I'm looking for help with a problem with a site I'm trying to design.
I've asked various friends and colleagues who know more than I do, and
they all say that it's down to the faulty IE box model. At that point,
though, they go fuzzy and disappear with better things to do....

The site in question is here: www.theitservice.co.uk

The site renders properly in IE7, Firefox and Opera. But in IE6, it
looks... well... rubbish.

First thing to do is to look at

<http://validator.w3.org/>

and fix up the errors.
 
A

Andrew

First thing to do is to look at

<http://validator.w3.org/>

and fix up the errors.

Thanks for the tip. I have tried this, and got 7 errors (less than I
had feared!), mostly to do with tags (such as DIV ?!!) not being
supported by my DOCTYPE. Again, my lack of knowledge lets me down here
- I used DreamWeaver to write the code, and don't really know how to
get around this.

I don't, however, think it came up with anything which would cause the
page to render as it does in IE6....

Thanks, but still a little baffled...

Andrew
 
A

Andrew

You have floated the content column to the left, and given it a left
margin. You can choose either, I think it's the combination that makes
IE6 go off. IE6 reckons your left margin should not cover the left
column, so it gives you 132px for the left column, 150px for the left
margin, total 182px space on the left of the content column.

I've just tried removing the float:left attribute, but this caused
a) no improvement in the arrangement of the divs at the top (the menu
and the banner), and
b) caused the "links" box on the right to drop to the bottom of the
page - now below the content column because the content column is no
longer floating left....

Arrgh!

Any more ideas out there?

Thanks for the suggestions so far, though...

Andrew
 
J

Jonathan N. Little

Andrew said:
Thanks for the tip. I have tried this, and got 7 errors (less than I
had feared!), mostly to do with tags (such as DIV ?!!) not being
supported by my DOCTYPE. Again, my lack of knowledge lets me down here
- I used DreamWeaver to write the code, and don't really know how to
get around this.

DIV is not supported by XHTML, div is! Sounds like your are using XHTML
without understanding what XHTML is. Advise you use HTML 4.01 strict. I
see no reason why you are using XHTML anyways...
I don't, however, think it came up with anything which would cause the
page to render as it does in IE6....

XHTML and IE inability to support it isn't helping. The hodgepodge of
CSS and presentational HTML, conditional comments, and (document.write a
no-no in XHTML) complicates debugging. Strip is down and clean it up and
then styling a bit at a time and isolate your problems.
 
B

BessieBee

And while we're at it (and I know I'm opening myself up here for
torrents of abuse!) if anyone has any general comments along the lines
of "You really should/shouldn't do such-and-such" I'd also be
grateful...

I don't like gray text on a white background. As far as I'm concerned
(I'm just a regular person who spends far too much time on the
computer and is always trying to learn more about building web pages)
a light text color on a white or light background serves no useful
purpose other than making me move on to a page I can easily read.
 
A

Andrew

I don't like gray text on a white background.  As far as I'm concerned
(I'm just a regular person who spends far too much time on the
computer and is always trying to learn more about building web pages)
a light text color on a white or light background serves no useful
purpose other than making me move on to a page I can easily read.

Hmmm... Okay, thanks for the input. I'll think about changing the font
colour... once I can get this ***** problems sorted!

Andrew
 
B

Bergamot

Andrew said:
The site in question is here: www.theitservice.co.uk

The site renders properly in IE7, Firefox and Opera.

....except when the viewport is less than ~950px wide. Or did you intend
for everything on the right side to be chopped off?
But in IE6, it
looks... well... rubbish.

The CSS looks like generated code - i.e. bloated - and should be trimmed
if you expect to easily decipher it. The menu code is also full of hacks
that you probably don't understand (I've gotten some good things off
CSSplay myself, but I don't think this is one of them). Maybe "son of
suckerfish" is less convoluted, but all of these drop-down menu things
are user unfriendly.
And while we're at it (and I know I'm opening myself up here for
torrents of abuse!) if anyone has any general comments along the lines
of "You really should/shouldn't do such-and-such" I'd also be
grateful...

You really should avoid anything that requires such exacting pixel
precision. Web media is flexible by nature and you have no control over
the user's system or browser settings, so your best bet is to stick with
a flexible layout, that is one that adapts gracefully without self
destructing. Test it with various window and text size settings to nip
those layout bugs from the start, rather than find out it's broken once
the site goes "live".
 
A

Andrew

...except when the viewport is less than ~950px wide. Or did you intend
for everything on the right side to be chopped off?


The CSS looks like generated code - i.e. bloated - and should be trimmed
if you expect to easily decipher it. The menu code is also full of hacks
that you probably don't understand (I've gotten some good things off
CSSplay myself, but I don't think this is one of them). Maybe "son of
suckerfish" is less convoluted, but all of these drop-down menu things
are user unfriendly.


You really should avoid anything that requires such exacting pixel
precision. Web media is flexible by nature and you have no control over
the user's system or browser settings, so your best bet is to stick with
a flexible layout, that is one that adapts gracefully without self
destructing. Test it with various window and text size settings to nip
those layout bugs from the start, rather than find out it's broken once
the site goes "live".

OK. That's helpful, thanks. I was aware that the page gets cut off
with a width of less than ~950 - I'd thought that this is pretty
standard? Sites such as the BBC and Yahoo behave similarly....
However, I certainly take your point about the menu system. I've been
trying to find a system which allows for expansion in time to come,
and allows menus with sub-menus.

I'll have another look around - are there any sites that you can
recommend for finding such code? I do have some understanding of CSS
and HTML, but as you can tell, it's not great, particularly when it
comes to the topic of conditional stylesheets etc to cope with
different browsers. CSS & HTML is one (ok - two) of those topics that
I find really interesting but just don't have the time to investigate
thoroughly... which of course shows when I come to develop a proper
site :)

Thanks again for your feedback - it's much appreciated.

Regards
Andrew
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top