Font-family cascading

Last post 07-09-2008 11:38 AM by DarthSwian. 5 replies.

Sort Posts:

  • Font-family cascading

    07-09-2008, 3:45 AM
    • Member
      42 point Member
    • TheEagle
    • Member since 04-20-2007, 8:53 AM
    • Posts 440

    Hi,

    As I learn when we put a css style(font-family) on an element it overrides the one in the body.Whatever my understanding for this point is wrong or correct how could I use a font-family for an element to override the ones in the body like(body{font-family:"Simplified Arabic",Tahoma;}) I don't want the font  "Simplified Arabic" to be applied on a specific DIV element.I give the DIV font-family:tahoma !important but it is still effected by the "Simplified Arabic" font in the body css.Do any one know how could I solve this problem?

  • Re: Font-family cascading

    07-09-2008, 9:06 AM
    • Contributor
      5,243 point Contributor
    • DarthSwian
    • Member since 12-04-2007, 2:47 PM
    • Florida
    • Posts 1,021

     You must have some other inheritance problem to look at. I use font-family in the body tag all the time and any other element or class I just do font-family: arial,helvetica,sans-serif; and that element works fine, displaying the correct font. You should not need the !important.

    "Hokey religions and ancient weapons are no match for a good blaster at your side."
  • Re: Font-family cascading

    07-09-2008, 10:09 AM
    • Member
      42 point Member
    • TheEagle
    • Member since 04-20-2007, 8:53 AM
    • Posts 440

    DarthSwian:

     You must have some other inheritance problem to look at. I use font-family in the body tag all the time and any other element or class I just do font-family: arial,helvetica,sans-serif; and that element works fine, displaying the correct font. You should not need the !important.

    Well I have a treeview(Expand,ShowLines) in the master page.If I comment the font-family in the body css class it works fine in IE6.If I didn't the treeview lines are broken in IE6 but still fine in IE7.So it seems like I must choose between the whole pages font-family and the treeview which represent the main menu for the website.commenting the body font-family  I mentioned cause the text in the pages to look realy bad in some screen settings.

    A similar problem I found is all marquees I have working fine in IE7 but really bad(text or any other element scroll sometimes or for the first time only then disapper not continuous like in IE7).

    These two problems really make me tired.I hope that you can help me to find a solution.

  • Re: Font-family cascading

    07-09-2008, 10:16 AM
    • Contributor
      5,243 point Contributor
    • DarthSwian
    • Member since 12-04-2007, 2:47 PM
    • Florida
    • Posts 1,021

     Can you post your style sheet? Also, you may want to check the rendered html and make sure there were no inline styles overriding your css, which can happen using the visual editor.

    "Hokey religions and ancient weapons are no match for a good blaster at your side."
  • Re: Font-family cascading

    07-09-2008, 11:29 AM
    • Member
      42 point Member
    • TheEagle
    • Member since 04-20-2007, 8:53 AM
    • Posts 440

    DarthSwian:

     Can you post your style sheet? Also, you may want to check the rendered html and make sure there were no inline styles overriding your css, which can happen using the visual editor.

    I have two stylesheet files:

    The main one is default.css:

    /* Sets element margins, padding, and border to 0 to even out browser differences when adding desired values later. */
    html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl, dt, dd, td, form, fieldset, a, img, button {
         margin: 0;
         padding: 0;
         border: 0;
    }
    
    /* From Template*/
    /* Zero down margin and paddin on all elements */
     * {
      margin: 0;
      padding: 0;
    }
    
    body { direction:rtl;
      /*font:<span class='val'> <span class='unit'>62.5</span>%/<span class='unit'>1.6</span> "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif</span>;*/
      background-color:#D4D4D4;
      text-align: center;
      /*min-width:<span class='val'> <span class='unit'>720</span>px</span>;*/
       padding:0px 2px;
       margin:0px;
     
    }
    
    
    
    
    
    #branding h1 {
      margin: 0;
    }
    
    #mainNav {
      list-style: none;
      background-color:#fdf7da;/*#eee;*/
    }
    
    #secondaryContent {
      background-color:#fdf7da;/*#eee;*/
       /*margin-right:<span class='val'>-<span class='unit'>3</span>px</span>;
        margin-left:<span class='val'><span class='unit'>0</span>px</span>;*/
    }
    
    
    
    #secondaryContent p {
      /*font-size:<span class='val'> <span class='unit'>1.2</span>em</span>;*/
    }
    	
    
    
    /* The Core Technique
    ================================= */
    
    
    
    #wrapper {
      width: 98%; 
      margin: 0; 
      /*text-align:<span class='val'> right</span>;*/ 
       min-width:720px;
        background-color:#fdf7da;
    }
    
    #mainNav { 
      width: 27%;
      float: right;
      background-color:#fdf7da;
      
       min-width:170px;
       /* font-size:<span class='val'><span class='unit'>1</span>em</span>;*/
       /*display:<span class='val'>inline</span>;*/
        /*padding-right:<span class='val'><span class='unit'>0.5</span>em</span>;*/
       
    }
    
    
    #content { 
      width: 71%; 
      
      float: left; 
      min-width:500px;
        background-color:#fdf7da;
    }
    
    #mcontent { 
    text-align:center;
      width: 65%; 
      margin-top: 15px; 
       min-width:340px;
        display:inline;
      float: right; 
        background-color:#fdf7da;
    } 
    #secondaryContent { 
      width: 24%;
      /*margin-right:<span class='val'><span class='unit'>0</span>px</span>;
      padding:<span class='val'><span class='unit'>0</span>px</span>;*/
      min-width: 153px;/*8em;*/
      display: inline; /* :KLUDGE:<span class='val'> Fixes IE double margin float bug */
      float: left; 
    } 
    
    
    
    /* add some padding to the contentse in the main nav and secondary content areas */
    
    #mainNav, #secondaryContent {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    
    /*#mainNav *, #secondaryContent * { 
     padding-left: 20px;
     padding-right: 20px;
    }
    
    #mainNav * *, #secondaryContent * * { 
     padding-left: 0;
     padding-right: 0;
    }*/
    /* From Template*/
    body
    {
    
    /*font-family:<span class='val'>"Simplified Arabic",Tahoma</span>;*/
    
    	font-size:18px;
    	font-weight:bold;
    	color:#000000;
    	direction:rtl;
    }
    h1, h2 {color:#FFFFFF;}
    
    h3, h4, h5, h6 {color:#666666;}
    
    h1, h2, h3, h4, h5, h6 {color:#444444;}
    
    /*Typographics styles adapted from http://www.thenoodleincident.com/tutorials/typography/ */
    h1 {
    	margin-top:1em;
    	font-size: 1.4em;
    	font-weight: bold;
    }
    h2 {
    	margin-top:0.5em;
    	font-size: 1.4em;
    	font-family:Simplified Arabic,Tahoma;
    	font-weight: bold;
    }
    h3 {
    	margin: 0.5em 0;
    	font-size: 1.2em;
    	font-weight: normal;
    }
    h4 {
    	font-size: 1em;
    	font-weight: bold;
    	color:#FFF;
    	height:20px;
    	
    	
    }
    h5 {
    	margin: 0.5em 0;
    	font-size: 1.0em;
    	font-weight: bold;
    }
    h6 {
    	margin: 0.5em 0;
    	font-size: 0.8em;
    	font-weight: bold;
    }
    
    p  {margin: 1em 0;}
    
    a {text-decoration:underline;}
    
    a:hover {text-decoration:none;}
    
    
    #header{
    	height: 179px;
    	margin: 0 auto;
    	position: relative;
    	background-repeat: no-repeat;
    }
    
    #logo
    {
    	float:right;
    	
    	position:relative;
    	width: 540px;
    	height: 179px;
    	display:inline;
    	background-image: url(images/header.gif);
    }
    #branding
    {
    	 min-width:720px;
    	background:url('images/headerImage.gif') top right;
    	height: 179px;
      background-color:#b0b0b0;
       width:100%;
    
    	}
    #logoextend{margin:0px;
    	float:left;
    	 
    width:32.6%;
    position:relative;
    	display:inline;
    	height: 179px;
    	background:url('images/headertrick4.gif') top right;
    }
    
    #banner{
    	margin:0 152px;
    	text-align:center;
    	position:relative;
    }
    #search{
    	position:absolute;
    	top:150px;
    	left:5px;
    }
    
    #contentwrapper{
    	width: 998px; /*468px;*/   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    	border-left: 1px solid #FFFFFF;  /*** Critical left divider dimension value ***/
    	border-right: 1px solid #FFFFFF; /*** Critical right divider dimension value ***/
    }
    
    * html #contentwrapper {  /*** IE5.x/win box model fix ***/
    	width: 1000px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    	width: 998px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    }
    #floatwrapper {
    	float: left;
    	width: 80%;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    	margin-right: -1px;   /*** Static fix ***/
    }
    #centercolumn{
    	float: right;
    	/*width:<span class='val'> <span class='unit'>635</span>px</span>;*/   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    	
    	/* \*/
    	margin-left: -1px; 
    	/* Hidden from IE-mac */
    
    	padding-top:0px;
    }
    
    #copy a {color:#FF284E;}
    
    #copy .container 
    {
    	/*width:<span class='val'><span class='unit'>620</span>px</span>;*/
    	margin:5px 0 5px 0px;
    	padding:0 5px 15px  5px;
    	text-align:right;
    	   background:url(Images/bg.gif) repeat-y top right ;
        border-top: solid 2px #E7E7E7;
        border-left: solid 2px #D2D2D2;
        border-bottom: solid 2px #D2D2D2;
        border-right: solid 2px #E7E7E7;
    	background-color:White;
    min-width:320px;
    }
    
    
    #copy .container h1, #copy .container h2 {
    	/*margin:<span class='val'> <span class='unit'>0</span> -<span class='unit'>20</span>px</span>;*/
    	margin:0px;
    	padding: 3px 20px 2px 20px;
    	color:#000000;
    } 
    
    #copy .container .articletitle a
    {
        color:#FF6C00;
        font-size:14px;
    }
    
    #copy .container .articleabstract
    {
       
        font-size:12px;
        clear:both;
        font-family:Tahoma;
        width:97%;
        padding:2px;
    }
    .articleabstract
    {
    	clear:both;
    	}
     .container-two-columns 
     {
    	width:97%;
    	float:left;
    	margin:5px;
    	padding:0 5px 20px 5px;
    	text-align:right;
       background:url(Images/side_nav_bg.jpg) repeat-x left top ;
        border-top: solid 2px #E7E7E7;
        border-left: solid 2px #D2D2D2;
        border-bottom: solid 2px #D2D2D2;
        border-right: solid 2px #E7E7E7;
    	background-color:#f2f2f2;
    }
    
    /* \*/
    * html  .container-two-columns {height:1%;}
    /* */
    
    .container-two-columns a{color:#FF6C00;}
    
    .AdminDefaultBody
    {
    	padding-right:20px;
    }
    /*#<span class='sel'>copy</span> <span class='sel'>td</span>, #<span class='sel'>copy</span> <span class='sel'>th</span> {padding:<span class='val'> <span class='unit'>0.2</span>em <span class='unit'>0.5</span>em</span>;}
    
    #<span class='sel'>copy</span> .<span class='sel'>container</span> <span class='sel'>table</span> <span class='sel'>tr</span> {font-size:<span class='val'><span class='unit'>0.9</span>em</span>;}*/
    
    #copy a{ color:Green;}
    .button {
        border:1px solid #FFFFFF;
        color:#FFFFFF;
        background-color:#FF9900;
        font-size:1em;
    }
    
    #copy .container .button {border-color:#CCCCCC;}
    
    
    #leftcolumn 
    {
        float:left;	
    	width: 130px;    /*** Critical left col/divider dimension value ***/
    	padding-top:0px;
    }
    * html #leftcolumn {
    	float:left;	
    	padding-top:0px;
    }
    
    *>html #leftcolumn {width:161px;}   /*** Fix only for IE/Mac ***/
    
    /*** This is a fix for IE5/Win at the largest text size setting. ***/
    /* \*/
    * html #leftcolumn {margin-right: -3px;}
    /* */
    
    #leftcolcontainer{
    	width: 100px;    /*** Critical left col dimension value ***/
    }
    
    
    #rightcolumn{
    	float: right;
    	width: 10%;    /*** Critical right col/divider dimension value ***/
    	margin-left: -1px; /*** Static fix ***/
    	padding-top: 0px;
    }
    
    /* \*/
    * html #rightcolumn {
    	padding-top:0px;
    }
    /* */
    
    /*** These commented-out rules below are there to explain the "Critical" info 
    	for the rules above, because comments must not appear within the Mac-hack.
    	The "rules" below are not active, they are just for teaching purposes. ***/
    
    /*
    * <span class='sel'>html</span> .<span class='sel'>right</span> {
    margin-left:<span class='val'> <span class='unit'>0</span>px</span>;    *** Critical right divider dimension value ***
    margin-right:<span class='val'> -<span class='unit'>500</span>px</span>;    *** IE5.x/win fix, must be above a critical number, but very high values appear okay ***
    mar\gin-right:<span class='val'> -<span class='unit'>152</span>px</span>;    *** Critical right col/divider dimension value ***
    }
    */
    
    
    
    .sidebarcontainer{
    	margin:5px;
    	padding:0px 0px 6px 0px;
    	border:1px solid #FFFFFF;
    	background-color:#f3f3f3;
    	font-size:smaller;
    	text-align:right;
    width:150px;
    }
    /* \*/
    * html .sidebarcontainer {height:1%;}
    /* */
    
    
    .sidebarcontainer a {color:#FF6C00;}
    
    .sidebarcontainer li {list-style-type:none;}
    
    .sidebarcontainer h4 {
    	padding: 0 20px 2px 20px;
    	color:Red;
    	background-color:#077F02;
    	background:url(images/section.gif) no-repeat ;
    	text-align:center;
    	line-height:20px;
    
    } 
    
    #footer {
    clear:both;
    padding-top:10px;
       width:98%;
      height:26px;
    		font-size:0.7em;
    	/* margin-top:<span class='val'><span class='unit'>20</span>px</span>;*/
    	background:url(images/footer.gif) no-repeat center;
    }
    
    /*#<span class='sel'>footer</span> {
    	clear:<span class='val'>both</span>;
    	text-align:<span class='val'>center</span>;
    	margin:<span class='val'><span class='unit'>1</span>px <span class='unit'>5</span>px</span>;
    	padding:<span class='val'><span class='unit'>2</span>px <span class='unit'>20</span>px</span>;
    	border:<span class='val'><span class='unit'>1</span>px solid #<span class='unit'>999999</span></span>;
    	background-color:<span class='val'>#<span class='unit'>FFFFFF</span></span>;
    	font-size:<span class='val'><span class='unit'>0.9</span>em</span>;
    	background:<span class='val'>url(images/footer.gif) no-repeat </span>;
    
    }*/
    #newsletterboxcontent
    {
    	padding:0 5px;
    	font-family:0.5em;
    }
    #footer a {
    	margin:1px 5px;
    	color:#FF284E;
    }
    .imgfloatright {
    	float:right;
    	display:inline;
    	margin: 0.25em 0 0.25em 1em;
    }
    .imgfloatleft {
    	float:left;
    	display:inline;
    	margin: 0.25em 1em 0.25em 0;
    }
    
    
    @media print 
    {
        	
    	body{
    		font-size:11pt;
    		line-height:13pt;
    		background:#FFFFFF !important;
    	}	
    	#wrapper, #contentwrapper, #floatwrapper, #centercolumn, * html #wrapper, * html #contentwrapper, * html #floatwrapper, * html #centercolumn {
    		width:auto !important;
    		margin:auto !important;
    	}
    
    	#wrapper, #contentwrapper {border:none;}
    
    	#mainnav{
    		padding:0;
    		text-align:center;
    	}
    
    	#leftcolumn, #rightcolumn, #search {display:none;}
    
    	#wrapper, #header, #mainnav, #mainnav .item, #mainnav .selected, #copy .container, #footer {
    		background:transparent;
    	}
    	#centercolumn {
    		float:none;
    		margin:0 1em 0 2.5em;
    	}	
    
    	#breadcrumbs {position:static;}
    
    	#copy .container{
    		margin:0;
    		padding:0 !important;
    		border-style:none !important;
    		border-width:0;
    	}
    	
        #copy fieldset {border:none;}	
    	
    	/*#<span class='sel'>footer</span>
    	{
    	    clear:<span class='val'>both</span>;	
    		border-style:<span class='val'>none !important</span>;
    		border-top:<span class='val'><span class='unit'>1</span>px solid #<span class='unit'>000000</span></span>;
    	}*/
    }
    /*Added by nabeel*/
    .stand
    {
    float:right;
    }
    .stand-in
    {padding:0px 5px;
    background-color:#FFF7E7;
    color:#8C4510;border:solid 3px #DEBA84;
    }
    .ptitle
    {
    background-color:#A55129;Font-weight:bold;
    color:White;border:solid 3px #DEBA84; padding:3px 1px; 
     }
    	  .hid
        {
        display:none;
        }
        .sectiontitle
        {
        font-weight:bold;
        font-size:1.2em;
        }  
        .postbody
        {
         text-align:right;
          word-break:break-all;      
    		 
         padding:5px;
         width:90%;
        }
        .longtextcss
        {
     word-break:break-all;
    		
    	}
        .mempad
        {
    		padding:5px;
    		}
        .posttitle
        {
    		font-size:1.5em;
    		}
        .box
        {margin:0px;
    		display:inline;
        width:400px;background:url(images/forBorder2.gif) repeat-y;float:right;
        }
       .box h2
        {
        background:url(images/forBorder1.gif) no-repeat left top;
        padding-top:25px;
        padding-left:20px;
        padding-right:30px;
        padding-bottom:0px;
        margin:0px;
        }
        .box p
        {
        margin:0px;
        background:url(images/forBorder3.gif) no-repeat left bottom;
        padding-bottom:23px;
          padding-left:20px;
        padding-right:30px;
     padding-top:0px;
        }
        .direc
        {
    		direction:rtl;
    		text-align:right;
    		}
    	
        /*Added by nabeel*/

     The tree skin is as following:

       

    <asp:TreeView SkinId="ExplorerLines" 
          
           RootNodeStyle-ImageUrl="images/MenuMain.gif"
          ParentNodeStyle-ImageUrl="images/MenuContainer.gif"
          LeafNodeStyle-ImageUrl="images/MenuAlone.gif" 
          NodeStyle-Font-Names="tahoma"
         
          NodeStyle-Font-Size="8pt" 
         NodeStyle-HorizontalPadding="3px"
          NodeStyle-ForeColor="DarkBlue"
         NodeStyle-Font-Bold="false"
        
          RootNodeStyle-Font-Bold="true"
          SelectedNodeStyle-ForeColor="White"
          SelectedNodeStyle-BackColor="DarkBlue"
          HoverNodeStyle-Font-Underline="true"
          runat="server"
        />
    server" HoverNodeStyle-Font-Underline="true" SelectedNodeStyle-BackColor="DarkBlue" SelectedNodeStyle-ForeColor="White" RootNodeStyle-Font-Bold="true" NodeStyle-Font-Bold="false" NodeStyle-ForeColor="DarkBlue" NodeStyle-HorizontalPadding="3px" NodeStyle-Font-Size="8pt" NodeStyle-Font-Names="tahoma" LeafNodeStyle-ImageUrl="images/MenuAlone.gif" ParentNodeStyle-ImageUrl="images/MenuContainer.gif" RootNodeStyle-ImageUrl="images/MenuMain.gif" SkinId="ExplorerLines">

    The Template html code:

       

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Template.master.cs" Inherits="AppMaster" %>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head runat="server">
        <title>title of the website in arabic</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="som econtent"/>
    
        <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    
        <link rel="stylesheet" href="PhotoAlbum/css/lightbox.css" type="text/css" media="screen" />
        <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    
        <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <script type="text/javascript">
    function setMaxLength(obj, intLen)
    {
       if (obj.getAttribute && obj.value.length > intLen)
       {
          obj.value=obj.value.substring(0,intLen);
         alert(intLen+"الحد الأقصى من الحروف في هذه الخانة ");
       }
    }
    </script>
    
        <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
        <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
       <![if !IE]>
       <link rel="stylesheet" runat="server" type="text/css" href="~/FirefoxSheet.css"/>
       <![endif]>
       <!--[if IE 6]>
       <link rel="stylesheet" type="text/css" href="~/NabIE6.css"/>
       <![endif]-->
       <style>
       .nabtree td div
    {
    	
     height:20px !important;
      padding-top:0px !important;
      padding-bottom:0px !important;
      /*Background-color:Black;*/
      
    }
     
    
       </style> 
        
    
    </head>
    <body>
        <form id="mainForm" runat="server">
           
    
    <div id="wrapper">
    <div id="branding">
     <div id="but">
                            <ul>
                                <li>
                                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx" ImageUrl="images/mainb.gif"></asp:HyperLink>
                                </li>
                                <li>
                                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/contents/item.aspx?id=506"
                                        ImageUrl="images/mainb3.gif"></asp:HyperLink>
                                </li>
                                <li>
                                    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/contents/item.aspx?id=192"
                                        ImageUrl="images/mainb2.gif"></asp:HyperLink>
                                </li>
                            </ul>
                        </div>
                  
                
    </div> 
     <div id="newsmove" style="margin-top:3px;">
                    <div id="bar" style="width:98%; font-family:Tahoma;" >
                    <marquee direction="left" style="margin-right:20%"  scrollamount="4" width="75%" onmouseover="this.stop()" loop="true"
                        onmouseout="this.start()">
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder></marquee>
                   </div>
                </div>
    <div id="content"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server">
                        </asp:ContentPlaceHolder>
    </div>
    
     
    <div id="mainNav">
                           					
    							<div id="menu">
    							<div id="menuHeader">
    							</div>
    							<div id="menuBody">
                                    <asp:SiteMapDataSource ID="stmp" runat="server"/>
           <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"/>
            <asp:TreeView ID="TreeView1" CssClass="nabtree"  DataSourceID="stmp"         
                 ShowExpandCollapse="true"
               SkinID="ExplorerLines" NodeIndent="1" NodeStyle-Font-Bold="false" LeafNodeStyle-HorizontalPadding="1"
              ExpandDepth="3" ParentNodeStyle-HorizontalPadding="1" 
              MaxDataBindDepth="3"  EnableViewState="true"
              runat="server"  ShowLines="True"   LineImagesFolder="~/TreeLineImages"/>
        </div> 
        <div id="menuFooter">
        
        </div> 
                                </div>
                            
                           <asp:ContentPlaceHolder ID="RightContent1" runat="server">
                                </asp:ContentPlaceHolder>
         
                      
                        
     </div>
    
     
    
    <div id="footer">
    <div style="text-align:center;">
    arabic text for footer 
     </div> 
     <asp:ContentPlaceHolder ID="FooterContent" runat="server">
     </asp:ContentPlaceHolder>
    </div>
    
    </div>
    
    </form>
    </body>
         
    </html>
    
     

     

    About the Treeview it has a strange problem in Firefox which you can see in the following post:

    http://forums.asp.net/t/1282481.aspx

    The second css file is as following:

     

    .Tender-Header
    {
    		background: url(images/header_bg.gif) repeat-x top left;
    		height:40px;
    		padding:2px 30px;
    		margin:0px;
    
    }
    .Tender-Row
    {
    		background: url(images/row_bg.jpg) repeat-x top left;
    		height:40px;
    		text-align:center;
    
    }
    .Tender-Details-Header
    {
    	width:150px;
    	height:30px;
    	padding-right:5px;
    }
    
    .Tender-Details-row
    {
    	padding-right:5px;
    	
    
    }
    
          .TabContainer
          {
             font: bold 0.75em Verdana;
             width: 400px;
             margin-top: 1.5em;
             padding-top: 2em;
          }
          .TabItemInactive
          {
             border-top: 1px solid white;
             border-left: 1px solid white;
             border-right: 1px solid #aaaaaa;
             border-bottom: none;      
             background-color: #d3d3d3;  
             text-align: center; 
             text-decoration: none;
             padding: 0.75em 0.25em 0 0.25em;
          }
    
          .TabItemInactive:hover
          {
             background: #808080;
          }   
          .TabItemActive
          {     
             border-top: 1px solid white;
             border-left: none;
             border-right: 1px solid #aaaaaa;
             border-bottom: none;
             text-decoration: none;
             background-color: #bbbbbb;  
             text-align: center;   
             padding: 0.75em 0.25em 0 0.25em;
          }
    
          .ContentPanel
          {
             background-color: #bbbbbb; 
             padding: 10px 10px 10px 10px;
             width: 400px;
             font: 0.8em Verdana;
          }
    .newsbox
    {
        position:relative;
        border-top: solid 2px #E7E7E7;
        border-left: solid 2px #D2D2D2;
        border-bottom: solid 2px #D2D2D2;
        border-right: solid 2px #E7E7E7;
        background:url(Images/row_bg.jpg) repeat-x top ;
      
        padding:2px 3px;
        background-color:#fff;
        /*width:<span class='val'><span class='unit'>100</span>%</span>;*/
        height:120px;
    }
    .fixednewsbox
    {
    	padding-right:5px;
    	margin-top:20px;
    	margin-bottom:20px;
        border-top: solid 2px #E7E7E7;
        border-left: solid 2px #D2D2D2;
        border-bottom: solid 2px #D2D2D2;
        border-right: solid 2px #E7E7E7;
        background:url(Images/row_bg.jpg) repeat-x top ;
        background-color:#fff;   
    }
    
    
    .pollbox
    {
       font-size: 13px;
          direction:rtl;
    }
    
    .pollcontent
    {
       padding: 6px;
    
    }
    
    .pollquestion
    {
       font-size: 14px;
       font-weight: bold;
    }
    
    .polloptions
    {
       padding-top: 10px;
       padding-bottom: 4px;
       padding-right:0px;
    }
    
    .pollbar
    {
       background-color: Orange;
       font-size: 4px;   
    }
    
    .RegfirstFeild
    {
    		width:100px;
    	font-size:14px;
    	font-weight:bold;
    	color:Black;
    border-style:solid;
    border-color:White;
    border-width:1px;
    background-color:#A9C356;
    
    }
    .firstFeild
    {
        		width:100px;
    	font-size:14px;
    	font-weight:bold;
    	color:Black;
    border-style:solid;
    border-color:White;
    border-width:1px;
    background-color:#A9C356;
    
    }
    .RedValid
    {
    	color:Red;
    }
    
    #login
    {
        padding-right:10px;
    }
    
    #Assir_Map
    {
    text-align:center;
    padding-top:5%;
    }
    
    #bulLinks { padding: 1em; margin-left: 0;}
    #bulLinks li { list-style: none; margin: 0; }
     #bulLinks li a 
    {
     width: 160px;
     display: block;
     color: #777;
     text-decoration: none;
     padding: 0.5em 0 0.5em 0;
     font-family: Tahoma, Simplified Arabic  ;
     font-size: 11px;
     font-weight:bold;
    }
    #bulLinks li a:hover
    {
     color: #800000;
    }        
    
    
     .siteLinks  a 
    {
     width: 160px;
     display: block;
     color: #777;
     text-decoration: none;
     padding: 0.5em 0 0.5em 0;
     font-family: Tahoma, Simplified Arabic  ;
     font-size: 11px;
     font-weight:bold;
    }
    .siteLinks  a:hover
    {
     color: #800000;
    }        
    
    .dir
    {
        direction:rtl;
    }
    
    #but 
    {
    	width: 180px;
    	height: 179px;
    	display:inline;
    
    	background-image:url('images/headertrick3.gif');
    	margin: 0;
    	float: right;
    }
    #but ul 
    {
    		margin: 0;
    	padding: 0;
    
    	list-style: none;
    }
    #but ul li 
    {
    	display:inline;
    
    }
    #but ul li a
    {
    	display: block;
    	width:47px;
    	height:50px;
    	float:right;
    		border-left:dashed;
    	border-left-width:thin;
    	border-left-color:#999999;
    padding-left:7px;
    }
    
    
    .menu 
    { direction:rtl;
     
    	min-width:200px;
    	/* margin-bottom:<span class='val'><span class='unit'>30</span>px</span>;*/
    	background-color:#fdf7da;
    	/*text-decoration:<span class='val'>none</span>;*/
    	
    	
    	 
    
    }
    
    #menuHeader 
    { 
    	height:30px; width:200px;
    	
    	background:url('images/treeBack_01.gif') no-repeat ;
    }
    #menuBody
    {/*min-height:<span class='val'><span class='unit'>350</span>px</span>;*/
    	width:200px;
    	/*text-decoration:<span class='val'>none</span>;*/
    	text-align:right;
    
    	background-image:url('images/treeBack_03.gif');
    }
    #menuFooter 
    {	
    	height:33px; width:200px;
    	background:url('images/treeBack_05.gif')  no-repeat;
    }
    /*.<span class='sel'>menu</span> <span class='sel'>table</span> <span class='sel'>tr</span>   {
        height:<span class='val'><span class='unit'>25</span>px</span>;
        padding:<span class='val'><span class='unit'>0</span></span>;
        margin:<span class='val'><span class='unit'>0</span></span>;
        font-size:<span class='val'><span class='unit'>8</span>px</span>;
    }*/
    
    #DOWN 
    {
    	width:100%;
    	text-align:center;
    	font-size:13px;
    	padding:5px 0;
    	
    }
    #newsmove {
    	width: 100%;
    	min-width:720px;
    	background: url('images/NewsBar.gif') top right no-repeat;
    	height: 24px;
    	padding:0px;
    }
    
    #newsmove a {
    color:Black;
    font-size:12px;
    
    }
    #newsmove #bar
    {
    	top: -5px;
    }
    .tree td div
    {
    	height:20px !important;
    		}
    	
    
     
  • Re: Font-family cascading

    07-09-2008, 11:38 AM
    Answer
    • Contributor
      5,243 point Contributor
    • DarthSwian
    • Member since 12-04-2007, 2:47 PM
    • Florida
    • Posts 1,021

     You're going to run into problems the way you do style sheets. You're using two stylesheets and re-using ID's that's not a good plan to begin with. Also I know it seems easier to define a couple things with something like:

        body, div, h1, h2, ......

    but doing that all over makes for a maintenance nightmare since you have to edit multiple tags to change one thing.

    I'd approach this by hitting the site in question against some CSS validators for you page and see what conflicts you have. I do see #wrapper in each of your sheets and re-using ids will cause you problems.

     Most people split style sheets using one for layout and another for colors, fonts and etc.

    "Hokey religions and ancient weapons are no match for a good blaster at your side."
Page 1 of 1 (6 items)