That fixed it, the boxfloat was there originally as a holder so I could manage the spacing between the elements. But I can do that right in the .box css as well….

I’m having them convert over the images to png 8 which should make us good to go.

Thank you for your help…

-Paul-

IE7 doesn’t like the fact that .boxfloat is floated without a width. Either give it a width (e.g. 100%) or remove the float altogether as it doesn’t look like you need it in that type of situation.

For IE6 you can use png 8 as mentioned in this article which should give pretty good results.

Hope that helps

Yep, we are in the middle of a whole site re-design so it took a bit to get it moved over to the test servers (still setting stuff up).

But you can see it here, I left it in one of our template pages we use for the designers, it’s the second box in the center column (the only one with blue). It’s CSS is actually in the main html file, I had not moved it off just yet.

http://testipco.idahopower.com/boxtest.cfm

it’s odd because it only has that problem in IE7, we are thinking that we will have to do something different for IE6, like transparent Gifs or something…

Thanks

-Paul-

It could be any number of things for IE7 but it looks like “haslayout” issues are already covered. I can’t see anything obvious so I’m sure there’s an easy fix.

I’ll see if I can find a place to stick this so you can see it online, it looks good other than that little issue.

here is the CSS in case something sticks out (the images are just 2 pixel corners).

Thanks

-Paul-

.boxfloat
{
padding:0px;
margin:0px;
margin-top:12px;
float:left;
}

.box
{
width:auto;
background:#fff;
padding:0 9px;
margin:0px auto;
position:relative;
border:2px solid #fff;/* stop margin collapse*/
border-left:2px solid #64a0c8;
border-right:2px solid #64a0c8;
z-index:2;
min-height:0;/* ie7 haslayout fix*/
}
.inner
{
background:#fff;
padding:10px 0;
margin:-10px 0;
min-height:0;/* ie7 haslayout issues fix*/
position:relative;
border-top:2px solid #64a0c8;
border-bottom:2px solid #64a0c8;
z-index:2
}

* html .inner, * html .box
{
height:1px
}/* ie6 haslayout issues fix*/

.top,.base
{
margin:-12px -11px 0;
background:url(/images/boxes/tipbox/topLeft.png) no-repeat left top;
height:12px;
position:relative;
font-size:12px;
clear:both;
z-index:-1;/* drag corner under background*/
}

.base
{
background:url(/images/boxes/tipbox/bottomLeft.png) no-repeat left top;
background-position:left bottom;
margin:0 -11px -12px;
}

.top span,.base span
{
background:url(/images/boxes/tipbox/topRight.png) no-repeat right top;
display:block;
height:12px;
font-size:12px;
}

.base span
{
background:url(/images/boxes/tipbox/bottomright.png) no-repeat bottom right;
}

.content
{
width:100%;
background:#fFf;
margin:-8px -1px -10px 2px;
}

* html .content
{
margin:-12px 0
}/* ie fails again*/

*+html .content
{
margin:-9px 0
}/* ie7*/

It’s always the simple ideas that are the hardest to figure out

That’s a perfect solution, we are using the other standard for everything else on the site so for now I’ll just do this for CSS pop-ups (we need to be able to tell customers when the site is going into maintenance and when there are power warnings and such). But now that the designers know we can do transparent corners their little minds are cooking up all kinds of new ways to make my life difficult

Thank You

-Paul-

Rather than complicating it with the one or two image method just use the usual 4 images (quarter image segments) for each corner and you won’t have to worry about any clever trickery.

All you have to do then is where the code originally specified a different background position for the same image you just supply a new image instead.

This will save you having to hide any parts of the image.

Unfortunately I need borders (nothing can ever be easy), didn’t like the hack version, so I’m working on the two image version. what I’d like to see is a sample for that, i’m not a CSS guru so I’m still debating where to put the second set of images to overwrite the remaining image pieces.

But this is so very cool…

Again, great work…

Thank You

-Paul-

It’s done in Fireworks. You can read how to do it in Alex’s article on Sitepoint.

http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

There is also an open source link in post #1 above.

Overall your code looks solid – I would agree that anything that reduces code weight is a good thing

Nicely done!

Yes that’s correct and there are opportunities in there for reducing code. I just copied and pasted each block for clarity so it was clear where each part was going.

Usually anything that reduces code weight is a good idea though

Though it doesn’t work in every situation: I had issues with some images in IE6. You still have to create Gif (and lose alpha transparency in FF/Opera/Safari) or use Fireworks in those cases.