Menu
I have a nested div (see below) which have different CSS classes to give a background color for the container and a format for the text
<div class="section">
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='<%# Eval("SectionTitle") %>'></dx:ASPxLabel>
</div>
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='<%# Eval("SectionDescription") %>'></dx:ASPxLabel>
</div>
There is a closing tag for the section div, there's more content in there which is rendering correctly.
The CSS for the above is:
.section
{
padding: 5px;
background-color: #ffffff;
}
.sectionTitle
{
font-size: 11px;
font-family: Arial;
font-weight: bold;
color: #546fb2;
}
When I comment out the background color in .section the formatting of sectionTitle is being applied but when I put the background-color in there it overwrites the color of the sectionTitle. I have tried setting the color of .section to match .sectionTitle but this still doesn't work.
In every browser (IE9 non-compatibility, Firefox, Chrome) it works fine and I've been looking at this for a couple of hours now which is getting slightly frustrating as I can't spot the issue.
The content is on a ASP.NET page which uses a MasterPage which has the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can anyone help shed some light on this please?
Thanks in advance
Andy
740
Internet Explorer has a compatibility "feature" where it always renders sites that are on the local network in compatibility mode. You have to explicitly turn this off in one of two ways.
<meta http-equiv="x-ua-compatible" content="ie=edge" />
This edge marker tells ie to always render in it's most standard mode it supports.
The other method (which I prefer) is used if you are using a server side technology like asp.net or php, which is to add an http header (in asp.net this goes in global.asax, also the chrome=1 enables chromeframe if installed):
protected void Application_BeginRequest()
{
Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1");
}
EDIT:
There is also a third way, and that's to disable it in the compatibility view tab in Internet Options. This only affects your computer, however.
Also, it's better t use the header method if at all possible, rather than the meta tag method. By the time the browser has read the metatag, it's already in it's primary mode. The meta tag only affects the document rendering mode, rather than the browser compatibiltiy mode. There is a subtle difference that can, in some cases, have an affect.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
