Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Stymied by the faulty IE box model! Help! (http://www.velocityreviews.com/forums/t639920-stymied-by-the-faulty-ie-box-model-help.html)

Andrew 10-15-2008 08:11 AM

Stymied by the faulty IE box model! Help!
 
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

Els 10-15-2008 08:36 AM

Re: Stymied by the faulty IE box model! Help!
 
Andrew wrote:

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

--
Els http://locusmeus.com/

dorayme 10-15-2008 09:04 AM

Re: Stymied by the faulty IE box model! Help!
 
In article
<359ad237-88a0-4a6e-95a4-d40a6f9657e8@r38g2000prr.googlegroups.com>,
Andrew <andrewmrichards@yahoo.co.uk> wrote:

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

--
dorayme

Andrew 10-15-2008 11:34 AM

Re: Stymied by the faulty IE box model! Help!
 
On Oct 15, 10:04*am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <359ad237-88a0-4a6e-95a4-d40a6f965...@r38g2000prr.googlegroups.com>,
>
> *Andrew <andrewmricha...@yahoo.co.uk> wrote:
> > 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.
>
> --
> dorayme


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

Andrew 10-15-2008 11:36 AM

Re: Stymied by the faulty IE box model! Help!
 
On Oct 15, 9:36*am, Els <els.aNOS...@tiscali.nl> wrote:
> Andrew wrote:
> > 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.
>
> --
> Els * * * * * * * * * *http://locusmeus.com/


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

Jonathan N. Little 10-15-2008 11:50 AM

Re: Stymied by the faulty IE box model! Help!
 
Andrew wrote:
> On Oct 15, 10:04 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
>> In article
>> <359ad237-88a0-4a6e-95a4-d40a6f965...@r38g2000prr.googlegroups.com>,
>>
>> Andrew <andrewmricha...@yahoo.co.uk> wrote:
>>> 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.
>>
>> --
>> dorayme

>
> 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.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

BessieBee 10-15-2008 01:03 PM

Re: Stymied by the faulty IE box model! Help!
 

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

--
BessieBee
"Why isn't the number 11 pronounced onety-one?"

Andrew 10-15-2008 02:23 PM

Re: Stymied by the faulty IE box model! Help!
 
On Oct 15, 2:03*pm, BessieBee <Bessie...@fakeaddress.com> wrote:
> >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.
>
> --
> BessieBee
> "Why isn't the number 11 pronounced onety-one?"


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

Andrew

Bergamot 10-15-2008 03:43 PM

Re: Stymied by the faulty IE box model! Help!
 

Andrew wrote:
>
> 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".

--
Berg

Andrew 10-15-2008 08:50 PM

Re: Stymied by the faulty IE box model! Help!
 
On Oct 15, 4:43*pm, Bergamot <berga...@visi.com> wrote:
> Andrew wrote:
>
> > 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".
>
> --
> Berg


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


All times are GMT. The time now is 09:49 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.