[css-d] Positioning
I know that perhaps people have seen this before an incredible number of times, but I am just a bit stymied and could use some help. I have a test page at http://usna.com/temp/test/index.htm and have outlined a couple of sections with red and green borders. The navigation is positioned exactly where I want when I test this with Firefox, but Internet Explorer places the navigation to the right. I know that IE has a bug with figurout out what the width should be that causes this to happen but I just cannot figure out the workaround. Any help with this would be greatly appreciated. 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] Positioning
Philippe - Yes, that is it exactly. Thank you very much. Cheers - george -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Philippe Wittenbergh Sent: Thursday, June 16, 2005 10:45 PM To: CSS-D Subject: Re: [css-d] Positioning On 17 Jun 2005, at 5:19 am, George Smyth wrote: > I have a test page at http://usna.com/temp/test/index.htm and have > outlined a couple of sections with red and green borders. The > navigation is positioned exactly where I want when I test this with > Firefox, but Internet Explorer places the navigation to the right. I > know that IE has a bug with figurout out what the width should be that > causes this to happen but I just cannot figure out the workaround. This is your problem, I think. <http://www.positioniseverything.net/explorer/doubled-margin.html> Philippe --- Philippe Wittenbergh <http://emps.l-c-n.com/> __ 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/ __ 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/
[css-d] Width Woes Again
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 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 then they fit, but Firefox will show the extra spacing following the third box. Thanks - 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
-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 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 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
-Original Message- From: Holly Bergevin [mailto:[EMAIL PROTECTED] Sent: Monday, June 27, 2005 5:31 PM To: CSS-D; George Smyth Subject: 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 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 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 Holly - Okay, I did not realize this. Dreamweaver, which I use to get things started, adds the xml declaration when one states that they want to use XHTML. I occasionally forget to remove this on one of my other sites, which goofs the font. 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). 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
-Original Message-
From: Holly Bergevin [mailto:[EMAIL PROTECTED]
Sent: Tuesday, June 28, 2005 2:16 PM
To: CSS-D; George Smyth
Subject: RE: [css-d] Width Woes Again
From: "George Smyth" <[EMAIL PROTECTED]>
[clip]
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
Holly -
Thank you for the response. I applied the Tan Hack to the code and it
appears to work fine. I used:
* html .LocContainer {
w\idth:478px;
}
following the definition for LocContainer. I have no way of checking to
see if this works on a Mac or earlier version of IE, but I see that it
does actually look just fine on Konqueror.
I have never seen the underscore used, so I will play around with that
to get an understanding of that method.
BTW, what does "hth" mean?
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/
[css-d] IE Displays Sometimes - Other Times Does Not
I have a strange problem. The code below works exactly the way I want in Firefox and IE. However, with IE, sometimes some of the text within the second is not displayed. If I play around with the size of the browser, then some of the lower text will magically appear or disappear> SACC AUSTIN, TX 10-11 November 2005 Hyatt Regency Austin 208 Barton Springs Austin, Texas 78704 512-477-1234 http://www.hyatt.com";>Hyatt Website Does anyone have an idea as to what might be going on? Am I doing something that is causing this strange behavior? Thanks for your help. 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/
