Orchard and CSS 3

Topics: Writing themes
Jul 21, 2011 at 4:25 PM

Hi

i've tried to customize divs to have rounded corner. I used the CSS 3 command "border-radius: 20px 20px 0 0;"

works fine with firefox but not with IE 9. That is while i use Orchard to generate the page. If i use the same command on a simple html site with a small css it works in IE 9.

Is there anything where Orchard could deny that use or does anyone else have / had the same problem ?

Thanks

Coordinator
Jul 21, 2011 at 8:07 PM

Nope, there is no reason that I can think of why Orchard would prevent that from working the exact same way as on static html. You'll probably need to do an in-depth comparison of the html and css in both cases to spot the difference.

Jul 22, 2011 at 8:18 AM

Here's the short version of a working round corner Navigation in IE 9 on a Static Site:


CSS

.NavTop { height:35px; padding: 0 15px 0 0; background:rgb(073,081,083); font-family:arial, verdana, sans-serif; font-size:0.75em;
border-radius: 19px 19px 0 0; -ms-border-radius: 19px 19px 0 0; -moz-border-radius: 19px 19px 0 0; }

HTML

<div class="NavTop">
<a href="#nogo"">Start</a>
</div>


And here's my equivalent code for the Orchard one


Layout.cshtml

<div id="layout-NavigationTop">
    @Display(Model.NavigationTop)
</div>

CSS

    #layout-NavigationTop { height: 35px; width: 960px; margin: 0 auto; background:rgb(073,081,083);
        font-family:arial, verdana, sans-serif; font-size:0.8em; border-radius: 19px 19px 0 0;
    }

HTML Widget

<div class="NavigationTop">
<a href="http://orchard/orchard/start">Start</a>

</div>


Does anyone see a huge difference ?.. both codes work fine in Firefox and Chrome. The Top one works in IE 9 on a static page, but the bottom one for Orchard just won't make round corners in IE 9... what am i missing here ?

I know, that this isn't a webcoder forum, i just want to make sure, that it's not Orchard causing it...

Any hints welcome, thanks

Jul 22, 2011 at 10:13 AM

The latter CSS does not contain  -ms-border-radius: 19px 19px 0 0; which I suspect to provide the style info to IE9. Could this be it?

Jul 22, 2011 at 10:36 AM
Edited Jul 22, 2011 at 12:10 PM

sadly no.

border-radius: X X X X; alone works for all css3 supporting browser, including IE 9.

I also by now pretty much deleted my whole design, left alone one single bar on top of the page. only the according part in the css file.

every browser except IE 9 shows it correctly with round corners while it is in Orchard.

I then started a completly new page without orchard, just containg

 

<head> 
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div class="test">CIRCLE</div>
</body>
</html>

 

and css

 

.test
{
	background: Gray;
	width: 150px;
	height: 150px;
	border-radius: 100px 100px 100px 100px;
}

 

This works on a static page in IE 9, shows a gray circle.

if i implement it in Orchard, every browser i tested, ( chrome, ff, opera ) shows that circle EXCEPT IE 9.

I'm running out of options where that error may be in my files, and i start thinking that for some reason Orchard and IE 9 don't get along that well.

Does anyone have a working example of an Orchard generated page, on IE 9 with a round corner, created solely by css and not by graphics, htc files or anything else ?

 

EDIT: On a side note, one of my css menus stopped working in Orchard+IE9 aswell, didn't work anymore in Orchard+IE8 either.

However on a static page it also worked with IE8+9. Is there really nothing in Orchards interpretation that could cause those errors with IE ? Both things ( curves, menu ) are linked with <div></div>s so maybe that might be a point...

Second EDIT: Here's a screenshot of the results in 4 different browsers: http://img28.imageshack.us/img28/1706/ieproblemv.png

I'm pretty sure that this problem with IE is somewhat caused by Orchard, as the same code on static pages just works fine...

Coordinator
Jul 22, 2011 at 9:25 PM

What document mode is IE9 in when rendering the Orchard page? It sounds like it’s not in IE9 standards mode for some reason…

Jul 22, 2011 at 9:49 PM
<!DOCTYPE>

that's about all the source says.

i've tried differnt DocTypes on the static page though, from none at all, to strict, loose and no definition. didn't make any difference on my circle
Coordinator
Jul 22, 2011 at 10:12 PM

Cool, that's right for HTML5. There should also be a X-UA-Compatible meta tag in the head with IE=edge somewhere in the value to try to force IE into the most advanced rendering but it sounds like that's missing or something is overriding that (the meta tag).

 

Is it a live/public site or something that IE might think is an intranet site?

If you hit F12 in IE9 to get the developer tools what does the "Document Mode" say?

Jul 23, 2011 at 7:12 AM

it's a lochalhost site so far.

for F12, i can't check that today, i can do that at work on monday and post an update here.

Jul 25, 2011 at 8:06 AM

From sourcecode of rendered page

<!
DOCTYPE html> <html lang="en" class="static routable"> <head> <meta charset="utf-8" /> <title>page title</title> <link href="/orchard/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css" rel="stylesheet" type="text/css" /> <link href="/orchard/Themes/MyTheme/Styles/site.css" rel="stylesheet" type="text/css" /> <!-- insert bunch of shapetracing wrappers here --> <script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script> </head>

and F12 brings up the same DocType

<!-- DOCTYPE html -->
Jul 26, 2011 at 8:40 AM

On a sidenote, my menu stopped working, since IE has problems with "a:focus" on an Orchard Page, incase it helps.

Coordinator
Jul 26, 2011 at 7:50 PM

So did you get a chance to see if this was reproducing on a remote server that is not in the intranet zone? Or add a meta-tag to force standard mode like Nathan suggested?

Jul 26, 2011 at 7:55 PM

i'm not that deep into orchard yet, how would i force a different meta tag to be rendered ?

Coordinator
Jul 26, 2011 at 8:06 PM

Just edit document.cshtml (well, a copy of it in your theme).

Jul 26, 2011 at 8:23 PM

thanks i'll try that tomorrow.

Jul 27, 2011 at 8:26 AM
<!DOCTYPE HTML>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

that worked. With EmulateIE9 it also does the round corner, but some wierd font resizing aswell.
But since i replaced the round corner with graphics now, so that they also appear in IE7+8, that's fine with EmulateIE8. Also solves the :focus problem.

Thank you very much!