Re: [css-d] IE issue with positioning

[David Laakso]

Jeff Chastain wrote:

I am having some issues with IE getting a layout design to work and I would
like to see if anybody can offer any pointers before this drives me nuts.
The issue I am running into is that I have a box which has a fluid width
(90% of the page).  Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side.  The following CSS rules work just fine in FireFox 

-- Jeff

  




No absolute positioning is needed, and is best avoided in positioning 
the base foundation structure of a page. Absolute positioning, if needed 
at all, is usually reserved for positioning small elements within a 
foundation, or float based, structure. So maybe just make like a big 
box, and sort of gently place smaller boxes in it. Something like this 
[1] will work in compliant browsers and even IE/6 and IE/7.


[1] 


--

A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE issue with positioning

[Bill Brown]

Jeff Chastain wrote:

The issue I am running into is that I have a box which has a fluid width
(90% of the page).  Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side.  The following CSS rules work just fine in FireFox 
   #container {
  position: relative;
  margin: 0 auto;
  width: 80%;
   #header {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
   }
In IE however, the header box is positioned right, but it does not expand
the full width of its container.  Instead it has an extra wide margin on the
right side.  I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.


Absolute positioning causes browsers to shrink-wrap the box, meaning 
that a block-level box which once spanned the width of its parent is now 
only as wide as its content. You work around this in FF and other 
compliant browsers with your left/right settings. IE only honors one or 
the other, though I think IE7 now allows you to set both.


Setting both the left and the right property causes the left of the box 
to be absolutely positioned at value 'n' of the left property, and the 
right of the box to appear at value 'n' of the right property. This 
changes the default shrink wrapping for most browsers, making it more 
block-like.


For IE, you have a few choices. Without a URL for reference, my guess is 
that you might simply try removing the absolute positioning. If that's 
not an option, you might also try setting the padding of #container to 
something like "padding:0 14px" which would technically make your 
#container box 28px wider than 80% of its parent.


HTH,
Bill

--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE issue with positioning

[Amedeo Mantica]

try the following:


  #header {

 position: absolute;

 top: 0;

 margin-left: 14px;

 margin-right: 14px;

  }


are sure that  u need absolute positioning??

regards
Amedeo

On 19/gen/09, at 17:49, Jeff Chastain wrote:

I am having some issues with IE getting a layout design to work and  
I would
like to see if anybody can offer any pointers before this drives me  
nuts.
The issue I am running into is that I have a box which has a fluid  
width
(90% of the page).  Within that box, I am attempting to absolutely  
place
another box at the very top, but with a 14px margin on both the left  
and

right side.  The following CSS rules work just fine in FireFox 



  #container {

 position: relative;

 margin: 0 auto;

 width: 80%;



  #header {

 position: absolute;

 top: 0;

 left: 14px;

 right: 14px;

  }



In IE however, the header box is positioned right, but it does not  
expand
the full width of its container.  Instead it has an extra wide  
margin on the
right side.  I think this could probably be fixed with a box model  
hack, but

I cannot figure out the right combination of rules to make IE behave.



Any ideas would be appreciated.



Thanks

-- Jeff

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE issue with positioning

[Jeff Chastain]

I am having some issues with IE getting a layout design to work and I would
like to see if anybody can offer any pointers before this drives me nuts.
The issue I am running into is that I have a box which has a fluid width
(90% of the page).  Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side.  The following CSS rules work just fine in FireFox 

 

   #container {

  position: relative;

  margin: 0 auto;

  width: 80%;

 

   #header {

  position: absolute;

  top: 0;

  left: 14px;

  right: 14px;

   }

 

In IE however, the header box is positioned right, but it does not expand
the full width of its container.  Instead it has an extra wide margin on the
right side.  I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.

 

Any ideas would be appreciated.

 

Thanks

-- Jeff

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/