Previous Message
Next Message

IE text squishes even though containing div width is held by fixed width content

Sent by Tony Martin on 21 March 2006 19:07


Hi,

I have tried to build my pages using css and avoiding any hacks.  But I have 
been stuck with this issue for many months and have decided to revisit it to 
see if I can resolve it.  I am hoping someone can help or point me to the 
information I need.  I usually get solutions effectively by googling.  But 
the problem here is that I cannot think how to succinctly describe the 
problem.  With position: absolute on the wrapper firefox does what I want, 
but I have so far found only one way to coerce IE into co-operating and this 
by using the <table> tag around the content.

The problem occurs if I put fix width blocks into my content area (which is 
inside wrappers).  When the page is squished, firefox will stop squishing at 
the limit of the fixed area (plus margins on the wrappers) and introduce 
scroll bars.  IE does the same EXCEPT, if the window width is reduced 
further, any non fixed width content continues to be squished causing a 
silly looking page when it is scrolled right with the scrollbar. (this also 
happens with divs with float:right in my banner)  I have reduced this to the 
simplest example I can come up with as follows:

<style type = "text/css">
div#wrapper1 {
	position: absolute;
	background: #e2e2e2;
}
div#c {
display: table;
background: yellow;
}
div#c p {
	background: red;
}
</style>

The example to demonstrate the effect: - run in ff and IE, shrink from the 
right and compare the effect:

<body>
<div id="wrapper1">
<div id="c">
  <p>This is some text that I would like to remain the full width of the c 
div,
  but in IE it will   always seem to get squished even though the c
  block stops shrinking due to a fixed width element. </p>
  <div style="width:500px; height: 200px; background: blue;">
  </div>
</div>
</div>
</body>

and, I can make IE work like ff by embedding the c div in table tags as 
below.

<body>
<div id="wrapper1">
<table>
<div id="c">
  <p>This is some text that I would like to remain the full width of the c 
div,
  but in IE it will   always seem to get squished even though the c
  block stops shrinking due to a fixed width element. </p>
  <div style="width:500px; height: 200px; background: blue;">
  </div>
</div>
</table>
</div>
</body>

It doesnt upset ff and it makes IE do what I want, but I dread to think what 
other browsers might make of it.  However, it seems to trigger a rendering 
path in IE that does what I want, and I wonder if there is any other way to 
achieve this.

Hoping someone is going to say that there is an obvious way round this

Tony


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message