21 single image version generate a tag soup

Lim: Your single image version is neat, but the markup reflect the design and it’s not really in XHTML + CSS track. The method depicted in the article may have little problems in a buggy browser but its markup is clean and meaningful. Any other CSS could be applied without altering the markup.

posted at 09:33 am on December 5, 2003 by P01

22 And then theres...

http://www.markschenk.com/cssexp/roundedbox/arrows.html

if you don’t want gradients.

posted at 09:35 am on December 5, 2003 by David House

23 Re: Just an idea..

I’m sure about this.. if custom_corners_rightborder.gif is neccesary to ‘occupy’ the ‘longer’ container, isn’t there should be custom_corners_leftborder.gif (where is it?)too.

posted at 09:50 am on December 5, 2003 by Lim Chee Aun

24 repeat

As a solution to the “really big viewport” problem, what happens if you set the background image to repeat horizontally?

I haven’t tried this myself, but it should work.

posted at 11:04 am on December 5, 2003 by Christopher Harrington

25 Thank you all :)

First of all – thanks alot for your nice comments.

Second – most of the “bugs” and/or problems related to this technique, are caused by the background images used for the examples weren’t made big enough to suit resolution of 1280 and above. So it’s not really a bug – it’s just the images being to small, when either the browser window is squashed together – or being “too” wide.
If you want to use this technique, just make sure to make the graphics big enough :)

I’m using a slightly different technique on my own website, where I’ve added another “body” [code]div[/code], in which I’m repeating a background image along the y-axiz because I’m anticipating some longer articles and pieces. View source for reference.

Anyways – thank you all, and thanks to ALA for handing me the microphone for a short while :)

posted at 11:44 am on December 5, 2003 by Søren Madsen

26 Re: Just an Idea...

Lim,

In Søren’s example, the image “custom_corners_topleft.gif” is what provides the left edge of the div. Therefore, you do not need to have a seperate image for the left edge.

posted at 11:50 am on December 5, 2003 by fattymelt

27 Re: single image version generate a tag soup

PO1 – agreed, my single image version does not create semantically good markup, mainly because I was more focused on the end result than the underlying structure (which is not a good thing). Soren’s example has excellent markup but does rely on multiple images sized to accomodate large resolutions.

posted at 12:23 pm on December 5, 2003 by Tom Quinn

28 Re: Ghostpadding, Browser Checks and Just an idea

Andreas,

Your Ghostpadding is actually the IE Three Pixel Text-Jog bug identified by Big John. You can read more about it at PIE: http://www.positioniseverything.net/explorer/threepxtest.html

Ruth,

Are you sure the design does not work as intended in IE4.01? I had no problems with Step 5 in that browser, however Step 6 shows problems with Alex Robinson’s “3Col_NN4_FMFM – header” design. From my tests on Mac OS 10.2, the design works fine on OmniWeb 4.5, IE 5.23, Opera 6.03, Camino 0.7, Firebird 0.7, Netscape 7.1 and Mozilla 1.5. Safari 1.0 doesn’t show the rounded corners except for the bottom left corner; must be some background positioning problem although I didn’t find any reference to it on Mark Pilgrim’s safari bug list (http://diveintomark.org/safari). Safari 1.1, though, checks out ok (thanks to the guys at iCapture: http://www.danvine.com/icapture/).

Lim,

I for one would just make custom_corners_topright.gif as tall as custom_corners_topleft.gif and not place a repeating background image on ArticleBody. This would also counter the problem of ArticleFooter growing a bit and losing part of its right border.

posted at 12:52 pm on December 5, 2003 by Daniel Gotilla

29 Whoops...

Daniel, you’re right. IE 4.01 correctly displays Step 5, and chokes on Step 6. Not sure why I made that mistake – probably a combination of having almost a dozen browser windows open at once and the fact that I was still pre-coffee.

posted at 02:27 pm on December 5, 2003 by Ruth

30 Very nice article...

I was wondering about something like this after reading the sliding doors article, just never had time to investigate it. I think I’m going to use this technique on my personal site. Thanks a bunch Søren.

-jowe

posted at 02:28 pm on December 5, 2003 by Joey