So I’m messing around with asp.net and I seem to be stuck on a CSS problem. When I float a div right inline it works as expected. However, When I move this style to an external style sheet it doesn’t work at all.
I realize that inline styles have a higher priority and that something might be getting in the way, but I can not seem to figure out what.
Here is my page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
***********************the div below that has style="float:right"****************
<div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>
********************************************************************************
<div class="ColumnLeft" >
//stuff
</div>
<div class="SiteMap">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
<CurrentNodeStyle Font-Bold="True" />
<NodeStyle CssClass="ContentLink" Font-Bold="True" />
<RootNodeStyle CssClass="ContentLink" Font-Bold="True" />
</asp:SiteMapPath>
</div>
<div class="ColumnCenter">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>
And here is the stylesheet
body {
}
.Header
{
background-color: #6699FF;
font-family: Verdana;
font-size: xx-large;
font-weight: bold;
color: #FFFFFF;
padding: 40px 0px 0px 10px;
width: 100%;
}
.ColumnLeft
{
padding: 7px;
background-color: #6699FF;
float: left;
}
a
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:link
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #FFFFFF;
text-decoration: underline;
}
.underline
{
text-decoration: underline;
}
.ColumnCenter
{
margin: 7px 7px 7px 175px;
}
a:hover.ContentLink
{
color: #000000;
text-decoration: underline;
}
.SiteMap
{
font-size: large;
background-color: #DFEAFF;
}
When I use it in an external stylesheet it is this code
<div class="test">asp label</div>
and my css sheet has this added
.test
{
float:right;
}
Question: So why does the style seem to work when I place it inline, but it does not work when I move that exact piece of code to an external stylesheet?
Inline styles are the last to be applied. Use Firebug or Developer Tools to see if another “closer” style is overriding yours when you make it external (your style will be crossed out).
To supersede even inline styles use
!importantoverride: