Solve this HTML/CSS issue?

Question

I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div. The right side of the div has a header on top with content below, so header is solid color and content another solid color.

My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?

does this make sense?

EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/

I was not able to use PIE because I need only specific corners to be rounded and it only supports all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.

Not really. Can you please setup an example on jsfiddle.net Thanks. — PeeHaa
– PeeHaa, Commented Jan 20, 2011 at 20:01
Just give the header a background image with rounded corners on top and the div a background image with rounded corners on the bottom — Gregg B
– Gregg B, Commented Jan 20, 2011 at 20:03
Or you could just leave IE in the garbage where it belongs and use the CSS3 properties (or browser specifiec pre-versions thereof) of border-radius. — josh.trow
– josh.trow, Commented Jan 20, 2011 at 20:07

mingos · Accepted Answer · 2011-01-20 20:06:14Z

5

I'm not sure I understand you exactly, but let's try...

If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?

answered Jan 20, 2011 at 20:06

mingos

24.7k12 gold badges73 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CodeVirtuoso Over a year ago

agreed on css pie - use css3 for normal browsers, and add some pie for IE

Trufa Over a year ago

OMG @Xtian please provide some feedback over this the answers give because I had understood something completely different!!

mingos Over a year ago

@Trufa: Seconded. I answered and I'm happy to see my answer upvoted, but I still don't know whether it's what Xtian was asking for.

Trufa Over a year ago

We'll know eventually I guess :)

Xtian Over a year ago

See edit above. CSS PIE was a good suggestion but wasn't able to use it for this project

CodeVirtuoso · Accepted Answer · 2011-01-20 20:08:50Z

3

Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:

http://www.css3.info/preview/rounded-border/

easy...

for old IE's I think there are alternate solutions:

http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx

answered Jan 20, 2011 at 20:08

CodeVirtuoso

6,44812 gold badges48 silver badges63 bronze badges

Collectives™ on Stack Overflow

Solve this HTML/CSS issue?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related