The first DIV is the vertical repeat image. The second DIV is the left rounded corner image and the last DIV is the right rounded corner image. The issue is that the repeat image, due to it being in the primary DIV repeats behind the rounded corner image, showing the background, when we want that portion to be transparent.
Why have you changed the b elements to strong elements? The b element is semantically neutral whereas the strong element is a semantic element that has meaning (plus its also 10 characters longer for each pair of tags). The b element has no meaning and is therefore akin to using a neutral element such as span if we bend the rules a little. If you don;t want to use the be element then use a span instead but then you would also need to add a class to it because spans are already in use. That’s why I used b to keep it neat and concise and perfectly valid:)
A bit of the top repeat border image is showing, however. What controls the width of this area exactly? It seems inner1 spans where it is suppose to on your preview page.
Also, what’s all the min and max widths/heights for?
I changed it back to the b element. I suppose I just used strong because it was XHTML, and I didn’t really think there was a difference, but it appears there is.
To have transparent corners and repeating shadows you have to make sure that the background is kept away from the corners. This is a litte awkward and involves using negative margins to produce a corner cut effect as shown in the pictures in this article of mine.
However there are no side shadows on that article so things are a little harder as you need multiple images. Here is an example using 2 image sprites to cater for all the corners and shadows.
To make it easier to manage the content has been kept away from the edges otherwise more negative margins and positioning would be required. Of course the inner glow could be reduced and then the edges made smaller.
In your example you say you only want one transparent corner on the top right so you would need to do similar as shown in the demo above.
All those images have set background colors to properly blend in with the background. However, behind #top_l in the body of our page is a background image. Setting a background color on #top_l for a specific part of the image works well, but only on my resolution. When the resolution is changed the main table shifts positions, causing the set background color of the image to be on a separate part of the image that is a different color. The background of #top_l can’t be transparent because the #header image repeats and expands the full width, due to it being the container, which causes the repeat image to appear where the transparent background is appearing. So basically, we want #top_l to have a transparent background so it will look good across all resolutions; the only background image that will appear behind it is the body background image, no background repeat image.
It’s a 8-piece border image. The top left image is the only one we need to have a transparent background. I tried specifying the #header_l DIV outside of the #header DIV and using some positioning techniques to get it right, but it wasn’t really the same across resolutions.
The width of the main area that contains these border images is 90%.
I kind of get what you’re trying say, but to be on the safe side, can you show me what additional HTML is needed to produce this? We only need to produce it for the header HTML shown above, but if it’s required to add additional HTML to the other pieces as well, then that’s fine.
Well, the bottom and top both have rounded corners, however we have a set background color on three out of four of the rounded corner images, which is fine. The top left corner on the other hand needs a transparent background because there is a background image applied to the body behind it and it’s a resolution issue, because the image isn’t always inline with a specific part of the background image, so setting a background color on that image is not effective.
The borders set on side_l and side_r as shown in the documentation are applied to our main table and are needed, yes. That is, if that’s what you were referring to…
Will it be a fixed-size box, or will it grow narrower/wider (I’m assuming it will have to grow in height.
Personally, I would probably do this with just 3 images.
Even if the box has variable width, you could have a long image for the top with both corners on it and the middle section as well. Have a header div with the image as a background, placed 0 0, and have an inner div with the image placed 100% 0. The outer div would just have some padding to the left so that there is no overlap.
Do the same n revers for the footer.
You could either do the same for the center section (with a single wide image with the border on each side, transparent in the middle, and the image repeated vertically, of course) or have separate side images. Either way, have one div nested in the other, the outer with left padding the width of the border.
Hope that makes some sense. That’s what I’d try first, anyhow.
If the box doesn’t have to expand horizontally, it’s even easier, as the images can be just the width of the whole box.
It’s not quite clear what you are trying to do here. Are these just top left and right corners? If so, you could place them inside the main div and position them in each corner. If you want the corner images to be transparent, then you’ll probably need to place the corner divs outside of the main div so that they don’t overlap the main div.
I’m a bit busy at the moment, but to be honest, I’m really not clear on what you are trying to do, which makes it harder to suggest anything. From your last comment it seemed you are using a table? See if you can make what you are trying to do really crystal clear, so that someone trying to provide a solution doesn’t go down the wrong track.
