473,326 Members | 2,192 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Ie's Expanding Widths

What ho, CIWASians!

I've got a really annoying issue, and I can't see a way around it. What
I want to achieve is a block floated left containing a header and an
image. The block should be at least a specified width. The header should
be flush with the top, left, and right sides of the box. If the image is
bigger than the containing block's min-width, then the block *and the
header* should extend to fit the block.

See the URL: http://philevans.com/ie_pants.html
(I've used a paragraph to prop the block open but the result is the same)

This works fine in Firefox. It fails miserably in IE. It looks like IE
renders the header with the block's width, then realises the block
should be wider to accommodate the paragraph/image within, re-renders
the block but fails to do so with the header.

Can anyone see a way around this? Other than not allowing images wider
than the block's minimum ;)

Cheers

P
Jul 20 '05 #1
5 2061
Phil Evans wrote:
What ho, CIWASians!

I've got a really annoying issue, and I can't see a way around it. What
I want to achieve is a block floated left containing a header and an
image. The block should be at least a specified width. The header should
be flush with the top, left, and right sides of the box. If the image is
bigger than the containing block's min-width, then the block *and the
header* should extend to fit the block.

See the URL: http://philevans.com/ie_pants.html
(I've used a paragraph to prop the block open but the result is the same)

This works fine in Firefox. It fails miserably in IE. It looks like IE
renders the header with the block's width, then realises the block
should be wider to accommodate the paragraph/image within, re-renders
the block but fails to do so with the header.

Can anyone see a way around this? Other than not allowing images wider
than the block's minimum ;)


Don't specify the width in CSS but prop it up with a spacer image?
Hideous, I know, but it might just work...?

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #2
Mark Tranchant wrote:
Phil Evans wrote:
I've got a really annoying issue, and I can't see a way around it.
What I want to achieve is a block floated left containing a header and
an image. The block should be at least a specified width. The header
should be flush with the top, left, and right sides of the box. If the
image is bigger than the containing block's min-width, then the block
*and the header* should extend to fit the block.

See the URL: http://philevans.com/ie_pants.html
(I've used a paragraph to prop the block open but the result is the same)

This works fine in Firefox. It fails miserably in IE. It looks like IE
renders the header with the block's width, then realises the block
should be wider to accommodate the paragraph/image within, re-renders
the block but fails to do so with the header.


Don't specify the width in CSS but prop it up with a spacer image?
Hideous, I know, but it might just work...?


Cheers for the reply, Mark, gave me an idea. Rather than use an image,
I've adapted Dave Shea's min-height solution from
http://www.mezzoblue.com/archives/20.../minheight_fi/ by adding a
container div around the elements inside, specifying padding-left: 200px
on the parent and margin-left: -200px on the child - this drags
everything together and both Firefox and IE6 seem to be acting fine -
see second test at http://philevans.com/ie_pants_fixed.html

My only problem here (apart from the potential for creeping
div-soup-itis) is that I'm now floating an element without explicitly
specifying a width for it, something which I know is a Bad Thing (TM).
Are there likely to be problems with this approach?

Cheers again

P
Jul 20 '05 #3
Phil Evans wrote:
My only problem here (apart from the potential for creeping
div-soup-itis) is that I'm now floating an element without explicitly
specifying a width for it, something which I know is a Bad Thing (TM).
Are there likely to be problems with this approach?


The Peekaboo Bug springs to mind. IIRC, using position: relative; might
fix that if you experience it.

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #4
Phil Evans <ne********@philHADDOCKevans.removethefish.com> wrote:
My only problem here (apart from the potential for creeping
div-soup-itis) is that I'm now floating an element without explicitly
specifying a width for it, something which I know is a Bad Thing (TM).
Are there likely to be problems with this approach?


Renderers that use the CSS 2.0 float rules need a width, renderers that
use the CSS 2.1 float rules and IE don't, they use a shrink to fit
mechanism.

Opera 6 uses the 2.0 rules.

--
Spartanicus
Jul 20 '05 #5
Spartanicus wrote:
Phil Evans <ne********@philHADDOCKevans.removethefish.com> wrote:

My only problem here (apart from the potential for creeping
div-soup-itis) is that I'm now floating an element without explicitly
specifying a width for it, something which I know is a Bad Thing (TM).
Are there likely to be problems with this approach?

Renderers that use the CSS 2.0 float rules need a width, renderers that
use the CSS 2.1 float rules and IE don't, they use a shrink to fit
mechanism.

Opera 6 uses the 2.0 rules.


Ahh, that's well worth knowing - wasn't clear how that had changed in
2.1. It might be that I feed something a little less clever to Op6 -
will have to grab a copy for testing . . .

Cheers to both Mark and Spartanicus for your help :)

P
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Bart Heinsius | last post by:
Hi, I can't get my cell widths fixed in a table in IE6. In Mozilla it works, see http://www.xs4all.nl/~margreeh/aa.html . It's the blue cells that remain fixed at 20pt widths in Mozilla but not...
21
by: Applebrownbetty | last post by:
Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a completely CSS positioned page, and was wondering if any resident CSS guru might quickly be able to find the problem(s). Thank...
5
by: Chris Beall | last post by:
See http://pages.prodigy.net/chris_beall/BeallSprings/WC.Deed%20GG.116-17.html using the CSS at http://pages.prodigy.net/chris_beall/BeallSprings/BSstyle.css The page is a transcript of a...
4
by: Rob Freundlich | last post by:
I have some servlet-generated tabular data that I need to present, so I'm using an HTML Table. In some cases, it can be quite large. I'm flushing the servlet output every N lines to push the data...
3
by: Robert | last post by:
Hello, I was contacted by a client to figure out why the css is not functioning on their site. When viewed in IE everything looks ok, but when viewed in FF, NS or opera it does not. The site is...
15
by: Alan Silver | last post by:
Hello, I have just been trying a CSS-based design that works as I expected in FF and Opera, but has a problem with IE. If you look at my current version at...
24
by: fehays | last post by:
Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px;...
9
by: warth33 | last post by:
Hello guys I have the following code: <html> <head> <style> #one{width:110px;height:100px;background-color:yellow;border:1px solid green;}
2
r0g
by: r0g | last post by:
It seems w3 don't want us applying widths to our inline elements, I can't see why not and indeed if you throw in the 'position: absolute' property (without any 'top' 'bottom' etc) Firefox, Opera & to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.