Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Complicated Rounded Corner Box Negative Margin Issues
Hi,
IE is giving me problems (what’ new). I’ve Googled for a solution but with no luck, I’m very close to giving up on this so any help at all would be very appreciated.
I’m trying to make a standards compliant, as-semantic-as-possible, fluid box with round corners and a drop-shadow all the way around. I know I’m probably making life hard for my self by trying, but I need a horizontally and vertically resizeable box with images all the way around without using tables.
(Please bear in mind that that images in the example are just quickly made as a proof of concept, so don’t quite match up, and I’m using transparent PNGs for now so there’ll be grey areas in IE, but I can fix that.)
The (main) problem I’m having is IE decides cuts off the left section of the content as I’ve had to use a negative margin to bring it back in line. It isn’t clipped in any other browser. {overflow:visible;} doesn’t help. The content has a blue dashed border and it’s containing div has red dots for clarity.
Is there a way to get IE to show the content or am I going to have use a different approach. I’m surprised I’ve not run into this before, it’s really frustrating me.
Any help would be wonderful, thanks is advance.
Ed.
Offline
#2 2005-09-28 19:00:37
- King Rat
- Member
- Registered: 2004-11-11
- Posts: 20
Re: Complicated Rounded Corner Box Negative Margin Issues
I replaced the #box-mid-inner margin style with an identical padding, and it seemed to work for me. Oh, I took out the overflow as well.
Oh, and you can get rid of the top-center and bottom-center divs if you’re willing to use long(!) images. Of course, it sets a max width for your bax, and it sacrifices bandwidth for code clarity, but you can’t have everything. Gah~! this makes me yearm for CSS3 borders.
Last edited by King Rat (2005-09-28 19:08:01)
Offline
Re: Complicated Rounded Corner Box Negative Margin Issues
Thanks loads King Rat!
Using the padding as you suggested seems to have fixed it. You know, when you have been working on something so long, it can be hard to see the problem, so thank for the fresh pair of eyes and a simple fix.
Yes, I know I could use long images, but that would be easy and not give a lovely fluid layout. I’m quite pleased with this solution now, I’ve trawled what seems like about every rounded corner tutorial on the web and couldn’t find one that attempted a fluid box with rounded corners and drop-shadow. If anyone knows of an example I’d love to see it.
Now to get it to work in IE5.5 …
Cheers,
Ed.
Offline
#4 2005-09-29 10:14:58
- nardo
- Member
- From: tuvalahiti
- Registered: 2004-04-22
- Posts: 743
Re: Complicated Rounded Corner Box Negative Margin Issues
maybe not quite what you’re doing but it’s a link worth posting
Last edited by nardo (2005-09-29 10:15:22)
Offline
Re: Complicated Rounded Corner Box Negative Margin Issues
Nifty indeed. Thanks for the link, as you say it doesn’t solve this issue, but it’s good to know about.
Offline
#6 2005-09-29 11:59:26
- NXArmada
- Member
- From: Sevierville, TN
- Registered: 2005-09-13
- Posts: 82
Re: Complicated Rounded Corner Box Negative Margin Issues
Useing Java Script andd CSS to make rounded corners is slow. try this out Rounded corners in CSS
Ryan
Offline
Re: Complicated Rounded Corner Box Negative Margin Issues
Extra images? enforced color schemes? Bloated source code? Hardly worth while.
Offline
Re: Complicated Rounded Corner Box Negative Margin Issues
this approach is the best one i’ve seen so far for flexible borders/corners. uses only 2 images, and the least amount of divs possible. (still some non-semantically-necessary, but that’s the price to pay :) )
Last edited by kemie (2005-12-07 18:02:39)
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline