I have some CSS code to create rounded corners that can work when the background is a gradient the css is

.modbox {
	margin: 0 0 12px 12px;
	border:  none;
	display: block;
	width: 1000px;
}

.rnd1,.rnd2,.rnd3 {
	border-style: solid;
	border-width: 0;
	display: block;
	font-size: 1px;
	height: 1px;
	line-height: 1px;
	overflow: hidden;
}
			
.rnd_modtitle .rnd2,.rnd_modtitle .rnd3 {
	background: #fff none repeat scroll 0 50%; 
	border-color: #fff;
}

.rnd_modboxin .rnd2,.rnd_modboxin .rnd3 {
	background: #fff none repeat scroll 0 50%;
	border-color: #fff;
}

.rnd1 {
	background: #fff none repeat 0 50%;
	margin: 0 4px;
}

.rnd2 {
	border-width: 0 2px;
	margin: 0 2px;
}

.rnd3 {
	border-width: 0 1px;
	height: 2px;
	margin: 0 1px;
}


.modboxin {
	background: #FFF none repeat scroll 0 50%;
	padding: 5px 9px 7px !important;
	border-bottom: none;
	clear: both;
	overflow: hidden;
	margin:0;
#leftcol {
	width:200px;
	float:left;
}
#centercol {
	width:550px;
	float:left;
}
#rightcol {
	width:200px;
	float:left;
}
}

and the html is ]

		<div class="modbox">
			<b class="rnd_modtitle">
				<b class="rnd1"></b>
				<b class="rnd2"></b>
				<b class="rnd3"></b>
			</b>
	<!--START CONTENT HERE-->

			<div class="modboxin">
				<div id="leftcol">
					<p>Right Column</p>
				</div>
				<div id="centercol">
					sfasfasf
				</div>
				<div id="rightcol">
					<p>Left Column</p>
				</div>
				<div style="clear:left;display:none"></div>	

			</div>
	<!--END CONTENT HERE-->
			<b class="rnd_modboxin">
				<b class="rnd3"></b> 
				<b class="rnd2"></b>
				<b class="rnd1"></b>
			</b>		
		</div>

This works fine in firefox and chrome, but doesn't in ie, and I've tried to find out why but can't understand it. I know it has something to do with the fact that I have the columns that float, and IE has a problem with this, but I'm not sure why.

Any help is appreciated. Thank you

What version if IE and "doesn't work" means what exactly?

I havn't looked at your code, but I wanted to tell you about this article which shows a good way of making rounded corners. I havn't tested it myself in any IE versions other than 9 but I think It ought to work fine in all browsers.

http://docs.joomla.org/Creating_rounded_corners

Im using IE 8, and it wont work because the div containter, modboxin, wont wrap around all the other div's that float inside of it. ill give you a screen shot of how it looks in ie.

IE SCREENSHOT

and this is what it looks like in every other browser

CHROME SCREENSHOT

Thanks for your help

Aha, then just remove display:none; from the div underneath the other divs. display:none; completely removes the element from the DOM so that it no longer takes up space and affect other elements.

haha it's always something stupid and easy like that. Thanks so much

When you float elements, you must remember to properly CLEAR those floats. There are a number of methods for doing this, just look in our stickies there are resources there.

Hello ,

Rounded Corners always create a big problem in IE .

it is much Better to Use images for Rouded corners rather than using

css .

Originally Posted by shankar.adodis

Hello ,

Rounded Corners always create a big problem in IE .

it is much Better to Use images for Rouded corners rather than using

css .

Great idea NOT.

The only way to make Microsoft catch up with the rest of the world is to stop supporting IE as a special case.
One real people stop using IE and their market dominance drops and it affects their sales, M$ will get the message that they do NOT have exclusivety any more.

Hello ,

major web companies stop supporting IE6 and IE is still creating the problem with many of the code like opacity etc iam just saying to use images so that it looks similar in all browsers.instead of creating rounded corners using css

rounded corner written in css always has problem in IE6 and latest browsers. in Firfox too. best option is use images as rounded corners. it works in all browsers

Guys, it's 2011, not 2001. IE6 is no longer even worth supporting, and I have yet to find a "latest browser" that doesn't support rounded corners using CSS.

That is, if you know how to do it right, which multiple people here have posted how to do.

tim

Hi,
i got a solution when i was going through this site http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

and another site helped me was http://blog.sachinkraj.com/how-to-ma...ithout-images/

i hope this would help you

iam just saying to use images so that it looks similar in all browsers.instead of creating rounded corners using css

Sorry, but this is just a bad idea. Let the BAD browsers show people what they will and go FORWARD by using current technology, like CSS3, and let people using GOOD browsers get the full experience. You should never hamper your progress by using stuff like images for rounded corners just because old versions don't support it. If a user is going to use outdated or defective technology (IE), then they have to accept that they're not seeing everything that a site may have to offer.

Using CSS for rounded corners is the best practice like LadynRed said. Its a lot of trouble creating a rounded corner images and making them work.

90% of the people will soon will switch to CSS3 compatible browsers.

You can use "DD_roundies" javascript for rounded corners

I use this site for that purpose because I am not good in programming:
http://www.roundpic.com/

Sort of an old thread to post in, but as a thread-ender:

You should always use the most current form I whatever you're trying to do. Even if Chrome only supports it now, for example, Firefox will catch up within a few weeks, and IE a year or two.

Here's how everybody should be making their rounded corners:

border-radius: 10px;

on your element, or use

border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

for all modern browsers to control individual ones. Even IE9 has caught up with those, I think.

Originally Posted by LadynRed

Sorry, but this is just a bad idea. Let the BAD browsers show people what they will and go FORWARD by using current technology, like CSS3, and let people using GOOD browsers get the full experience. You should never hamper your progress by using stuff like images for rounded corners just because old versions don't support it. If a user is going to use outdated or defective technology (IE), then they have to accept that they're not seeing everything that a site may have to offer.

I completely agree with this notion, I myself dropped support for older IE versions long ago, and something tells me that Firefox and especially Opera users upgrade their browsers more often than not; so support for any older browser versions just isn't needed anymore. If people don't want to see fancy transitions, background gradients generated by the browser engine, text shadows, element transformation, box shadows and more, well, they're either old enough that they simply do not give a rats arse, or they're so technologically uninclined that they probably don't know how to update their browser.