RE: [css-d] Width Woes Again
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Monday, June 27, 2005 4:29 PM To: George Smyth; css-d Subject: Re: [css-d] Width Woes Again George Smyth wrote: I am putting together a site that can currently be viewed at http://sacc-jobfaircom.readyhosting.com/. As far as Firefox is concerned, everything is working just fine. However, in Internet Explorer the three boxes with the images do not fit across. I thought that this might be due to the IE Doubles Float Margin bug, but I added display:inline to the div without any change. Does anyone have an idea as to why the third box is dropping below the other two? If I increase the size of the main div then they fit, but Firefox will show the extra spacing following the third box. Thanks - george first start by validating your html and css. you've got some errors there. hth, dwain hth - I closed the single tag and added alt tags to the images, so things now validate. Cheers - george __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Width Woes Again
From: George Smyth [EMAIL PROTECTED]
I am putting together a site that can currently be viewed at
http://sacc-jobfaircom.readyhosting.com/.
in Internet
Explorer the three boxes with the images do not fit across.
The xml declaration at the beginning of your page has put IE6 into
quirks rendering mode. In this mode, IE6 uses the same broken box model
as it's predecessors.
~holly wrote:
To fix this (for IE6) you can remove the xml declaration. Alternately,
you will need to write separate width settings for the IEs as you have
discovered since both IE5 and IE5.5/Win display the same way that IE6
does now. You can use the Tan hack (star HTML selector bug) to target
only IE, however you'll probably want to hide that from IE5/Mac, as it
doesn't have an incorrect box model rendering.
George replied:
I would really like to work with it, so I will
see if I can get the Tan hack to work (I was not able to get this to
work properly the last time I tried, but will give it another shot).
Hi again George,
The first thing you will need to do on the road to getting the Tan hack to work
is remove your (inline)styles from your HTML page to a separate style sheet,
either embedded in the head of the document, or stored as a separate,
linked/imported sheet. The Tan hack needs to work from a style sheet.
After you've done that, (which will probably require some classes/IDs being
added to your HTML so you can target the elements you need to) the Tan hack
should be pretty easy to write, something like -
/* \*/
* html [the ID or class you chose for the container] {width: 478px;}
/* */
I forgot before, (I guess because I don't like to use it so I don't think of it
as a solution), there is another way you can probably do this and retain the
inline styles if you want. After the width:472px; that you have in the style
attribute of that container div, you can add the following -
_width: 478px;
IE/Win will read this. So the opening tag of that div would look like (extra
spaces in tag added by me) -
div style=border: 1px solid rgb(0, 0, 102); margin: 0pt auto; padding: 2px;
width: 472px; _width: 478px;
Note also that because of the quirks mode, IE6 will not center your lower divs
(the ones with the text in paragraphs) with the auto margins you are using on
them. The IE5s won't do it anyway, so you will probably need to rethink how you
are going to accomplish that if you want the spacing that is visible in other
browsers.
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width Woes Again
George Smyth wrote: I am putting together a site that can currently be viewed at http://sacc-jobfaircom.readyhosting.com/. As far as Firefox is concerned, everything is working just fine. However, in Internet Explorer the three boxes with the images do not fit across. I thought that this might be due to the IE Doubles Float Margin bug, but I added display:inline to the div without any change. Does anyone have an idea as to why the third box is dropping below the other two? If I increase the size of the main div then they fit, but Firefox will show the extra spacing following the third box. Thanks - george first start by validating your html and css. you've got some errors there. hth, dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width Woes Again
From: George Smyth [EMAIL PROTECTED] Date: Mon, 27 Jun 2005 15:23:35 -0400 I am putting together a site that can currently be viewed at http://sacc-jobfaircom.readyhosting.com/. As far as Firefox is concerned, everything is working just fine. However, in Internet Explorer the three boxes with the images do not fit across. I thought that this might be due to the IE Doubles Float Margin bug, but I added display:inline to the div without any change. Does anyone have an idea as to why the third box is dropping below the other two? If I increase the size of the main div then they fit, but Firefox will show the extra spacing following the third box. Hi George, The xml declaration at the beginning of your page has put IE6 into quirks rendering mode. In this mode, IE6 uses the same broken box model as it's predecessors. The border and padding of the containing div do not expand the div but take up part of the 472px total. So, even though the content adds to 472px as well, it really has only 466px-worth of space to display in, which is not enough (472px/container-width - 1px/left-border - 2px/left-padding - 2px/right-padding - 1px/right-border = 466px). To fix this (for IE6) you can remove the xml declaration. Alternately, you will need to write separate width settings for the IEs as you have discovered since both IE5 and IE5.5/Win display the same way that IE6 does now. You can use the Tan hack (star HTML selector bug) to target only IE, however you'll probably want to hide that from IE5/Mac, as it doesn't have an incorrect box model rendering. hth, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
