Rounded corners not shown in IE7

Take a look at this page, http://www.mgfic.com/templates/box_linked.htm it is suppose to have rounded corners.  I am using the jquery.round.js found at http://jquery.malsup.com/corner/ 

It works fine in FF and what is wierd is that the demo loads fine so there is something in my page that that IE doesn't like but I can't see what it is.  I think I have been looking at it for too long...  Code attached.

Thanks,
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></META>
<SCRIPT type="text/javascript" src="../templates/jquerymin.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../templates/corner.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
	$("div.rounded h1").corner('top 10px');
	$("div.rounded div").corner('bottom 10px');
});
</SCRIPT>
</HEAD>
<BODY>
	<DIV class="rounded" style="width:300px; padding:0;"><H1 style="background-color:#000; color:#FFF; margin:0; padding:10px 5px; border:2px solid #0c0; border-bottom:0;">HEADER</H1>
		<DIV style="margin:0; padding:5px; border:2px solid #0c0; border-top:0;">	some text here
		</DIV>
	</DIV>
</BODY>
</HTML>

Open in new window

LVL 18
mgfranzAsked:
Who is Participating?
 
Steve KrileCommented:
There is clearly a correlation between how an element is styled, and how the corners work.  While I'm not 100% sure what the differences are, I was able to simulate your look for all browsers with this implementation.
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

	<style>
		div.demo  { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af; border:solid 3px gray;}
		.header {background:#000;color:#fff;font-weight:bold;font-size:1.5em;padding:5px;}
		.content {background:#fff;padding:5px;}
		.rounded {background:#0c0;padding:2px;width:300px;}
	</style>
</head>
<body>
	<DIV class="rounded">
		<div class="header">HEADER</div>
		<DIV class="content">	some text here
		</DIV>

	</DIV>




	<SCRIPT type="text/javascript">

	$(document).ready(function(){
		$("div.rounded").corner();
		$(".header").corner("top 8px")
		$(".content").corner('bottom 8px');

	});
	</SCRIPT>


</body></html>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
mgfranzAuthor Commented:
skrile,

using your suggestions pointed me to the right solution, almost... the correlation between how FireFox and IE reads styles is driving me nuts.  Now the corners don't work in FF, there is a box in the header corners where in IE they are rounded.

In the attached screen shot, you can see that in the top box I was trying to implement a gray border to the entire box, but it does not show up on the upper corners.  In the second box which is your suggestions the box displays fine, and as does the third box with the addition of the image.

Not sure why FF fails to display the corners correctly though, ideas?
corners.jpg
0
 
Steve KrileCommented:
i don't think this plugin deals well with "borders".  So, might I suggest you take the approach I steared you toward, and think of the outer container as the border color.  Then, the thickness of the border will be dictated by the padding of that element.


<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

	<style>
		div.demo  { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af; border:solid 3px gray;}
		.header {background:#000;color:#fff;font-weight:bold;font-size:1.5em;padding:5px;}
		.content {background:#fff;padding:5px;}
		.rounded {background:gray;padding:2px;width:300px;margin-bottom:20px;}
	</style>
</head>
<body>
	<DIV class="rounded">
		<div class="header">HEADER</div>
		<DIV class="content">	a little padding
		</DIV>

	</DIV>

	<DIV class="rounded" style="padding:8px;">
		<div class="header">HEADER</div>
		<DIV class="content">	more padding
		</DIV>

	</DIV>


		<DIV class="rounded" style="padding:16px;">
			<div class="header">HEADER</div>
			<DIV class="content">	a lot of padding
			</DIV>

	</DIV>




	<SCRIPT type="text/javascript">

	$(document).ready(function(){
		$("div.rounded").corner();
		$(".header").corner("top 8px")
		$(".content").corner('bottom 8px');

	});
	</SCRIPT>


</body></html>

Open in new window

ieandff.png
0
 
mgfranzAuthor Commented:
I just don't get it...  how can this be so hard?  I copied your sample, I made sure my version of jquery.round.js is up to date, and it still does not display in IE correctly.  In the image, you can see that the bottom border is stretched.  I played with some of the styles but nothing changed this in IE.

I might just have to go with a different plugin, I have found a couple others that seem to be IE friendly, but none that will allow images in the header <div>.
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="corner.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("div.rounded").corner();
$(".header").corner('top 8px');
$(".content").corner('bottom 8px');
});
</SCRIPT>
	<style>
		div.demo { float: left; width: 18em; padding: 10px; margin: 1em; background: #6af; border:solid 1px gray;}
		.header {background:#000;color:#fff;font-weight:bold;font-size:1.5em;padding:5px;}
		.content {background:#fff;padding:4px;}
		.rounded {background:gray;padding:1px;width:300px;margin-bottom:20px;}
	</style>
</head>
<body>
	<DIV class="rounded">
		<div class="header">HEADER</div>
		<DIV class="content">	a little padding
		</DIV>

	</DIV>

	<DIV class="rounded" style="padding:8px;">
		<div class="header">HEADER</div>
		<DIV class="content">	more padding
		</DIV>

	</DIV>


		<DIV class="rounded" style="padding:16px;">
			<div class="header">HEADER</div>
			<DIV class="content">	a lot of padding
			</DIV>

	</DIV>
</body></html>

Open in new window

corners.jpg
0
 
Steve KrileCommented:
F*$&ing IE 7.  Why must you exist!?!

Looks like there are rendering issues iwth IE7, and although I thought I was in IE7 mode, apparently there is *something* different about the way IE7 renders these.  I used IE Tester and can confirm that the corners DO NOT RENDER PROPERLY as you show in the above image.

So, I guess you need to travel a different path if you want good looking rounded corners for IE 7.
0
 
mgfranzAuthor Commented:
Traveling a different path I shall do.  In fact I think I have already stumbled on a couple of possible scenarios.  One being to use a degraded solution for IE.  The other is to implement the layout for IE with a separate style sheet on load, and since I plan on having pages built dynamically it shouldn't be too difficult to find a solution.

There are a couple dozen pages of "rounded corners in IE" to peruse through, when I find a solution I'll post it.

I know what you mean about modes, in my Homesite editor, IE renders differently than if I open a browser window and load the page, even though the embedded browser gets linked directly to IE.  What browser testing software do you use?
0
 
mgfranzAuthor Commented:
I ended up using the following script, IE6 will just have to degrade down to a square bottom corner.  I will chastise the users for not getting up to the year 2010 by still using a browser that is 9+ years old...

Test page is here, http://www.mgfic.com/templates/box5.htm

I ran it through both IETester and Multi-Browser with expected results on all browsers.
<script type="text/javascript"">
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion <=6)
	$(document).ready(function(){
	$("div.rounded").corner('top 10px')
	});
 else if (ieversion>=7)
	$(document).ready(function(){
	$("div.rounded").corner();
	$(".content").corner('bottom 10px');
	});	
}
 else
	$(document).ready(function(){
	$("div.rounded").corner();
	$(".header").corner('top 10px')
	$(".content").corner('bottom 10px');
});
</script>

Open in new window

0
 
Steve KrileCommented:
All three look great in FF  :)

0
 
mgfranzAuthor Commented:
O
I found the early versions of IE don't play well with CSS3 standards, and version 7+ are limited as to how they interpret the call to 'border-radius'.  IE9 is suppose to have CSS3 standards.  The only browser that doesn't display any rounded corners at all with this code is Opera.

What should I do with this question?
0
 
Steve KrileCommented:
I am ok if you just reward yourself and call it a day.  From what I can tell, I didn't give you any answer.
0
 
mgfranzAuthor Commented:
Nah, I'll give em to you for the IE Tester solution, it definitely helped...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.