11 Vertical Resizing

I seem to have problems when vertically resizing the page in IE6/win2k. on some occasions the page is fine, on other the boxes shift almost completely off the screen and have a tendancy to ‘break apart’.

It seems there is a big flaw in IE6’s renedring on this technique. Gotta love IE6 :D

posted at 07:48 am on December 5, 2003 by Michael Ward

12 Transparency should be fixed..

I’ve e-mailed the Trashbox guy that’s also noted in this article, and we tried to come up with a way of making the thing transparent. We didn’t succeed in that plan as there will always be at least one corner that has an “underlapping” (add to dictionary ;) ) background showing up.. err, under.

I’d love to start using the box models for the websites I make, but without proper CSS3 support I feel we’re playing with something that isn’t even halfway there.

Besides that, who ever said tables were wrong anyway? The W3? May-be so, but they also recommend a lot of other stuff that none of the popular browsers have implemented yet.

For now I will stick to my tables to fix these kind of problems, professionally. In my spare time I’ll play around with the limitations and “out of the box” thinking of the “box” model ;)

Great article!

posted at 07:56 am on December 5, 2003 by Marcel

13 Michael Ward

To clarify re: the resize bug.

The bug occurs on every vertical resize of the browser window, unless there is a horizontal resize at the same time.

Very odd…

posted at 08:07 am on December 5, 2003 by Michael Ward

14 RE: Vertical Resizing

Michael Ward is right. Does the same for me in ie6. I checked ie5.5 & 5.01 and they are fine. Tested in Win98SE.

Odd indeed.

posted at 08:25 am on December 5, 2003 by waylan

15 Just an idea..

I like this yet another ‘sliding doors’ method.

However, have anyone thought of combining all the images into one? Maybe let’s combine custom_corners_topleft.gif, custom_corners_topright.gif, custom_corners_rightborder.gif, custom_corners_bottomleft.gif, and custom_corners_bottomright.gif into one huge image file (custom_corners.gif?).

I’m not sure if this will work, but it’s worth a try.

posted at 08:32 am on December 5, 2003 by Lim Chee Aun

16 Re: Just an idea - using a single image ...

Lim Chee Aun

I did some work on rounded corners using the combination of one image and pixy’s technique for just changing the background position and came up with
http://www.quinncrowley.com/rounded.htm
It seems OK in Firebird, ie5 and ie6 and does not require a massive image to ajust for large screen resolutions. I also do not get the vertical resizing issue using this approach.

posted at 08:41 am on December 5, 2003 by Tom Quinn

17 re: just an idea

Lim:

You could use a single image as a CSS background for a DIV, but that DIV would not be stretchable … not liquid. One of the design goals of Custom Corners was to make a squashable, stretchable layout.

posted at 08:42 am on December 5, 2003 by apartness

18 Re: Just an idea..

>> However, have anyone thought of combining all
>> the images into one?

This will only work if you know exactly the size of the box. If the box will ever change sizes – for example, get taller as more content is added – the backround image is unable to scale with the text, and therefore part of the text will be outside of the box – in this example, below it.

The entire point of using this technique is to account for possible changes in the size of the box or its content.

posted at 08:42 am on December 5, 2003 by Ruth

19 Scaling...

It’s not only in IE where this example doesn’t scale very well. It seems Andreas’ example is actually better at this.

And this is actually when I make the window smaller…say 600 px or less

As for the argument of smaller images: it is better to use small images repeatedly than to make images big enough that they scale along, as you’ll allways find a point where it’s too small.

posted at 08:47 am on December 5, 2003 by AkaXakA

20 Ghost-Padding?

Looks good, but it’s got the same “ghost-padding” i’m trying to work around for days:

It only shows in ie6 look at column two and you will see the text is about two or three pixels more to the right then the last four lines of the blind text.

So if anyone knows a work around, i’ll be glad to learn.

PS: i made a screenshot
http://www.23q.de/ghost.html

posted at 09:14 am on December 5, 2003 by Andreas