Last post Jul 12, 2006 12:40 PM by Russ Helfand
Jun 29, 2006 05:16 PM|poncherin|LINK
Jun 29, 2006 07:31 PM|Russ Helfand|LINK
There are several reasons this might happen.
First, check that you have declared a theme for your page. Sometimes I create a new page but forget to tell it what theme to use so it never links in the theme's CSS files. Ugh.
Second, in the browser do a "view source" to make sure that the CSS files are getting linked in.
Third, make sure that the styles you think should apply to your menu really will apply to your menu. Again, it helps to do a "view source" in the browser to see the nesting of div's and ul's and li's. Then look at your CSS and make sure that the class
names and id's that you see in your markup correspond to the selectors you are using in your CSS rules. A common mistake is to change the value for the CssSelectorClass in your asp:Menu but forget to update the CSS rules to use that new class instead of PrettyMenu.
If none of those things help, write back and I'll try to think of some more things to look at.
Jun 30, 2006 04:24 PM|poncherin|LINK
<%@ Master Language="VB" CodeFile="home.master.vb" Inherits="home" %>
<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/inc/css/master.css" rel="stylesheet" type="text/css" />
<link href="/App_Themes/thmPolWeb/MenuExample.css" rel="stylesheet" type="text/css" />
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" / ">
<!-- lo_content-header -->
<%-- ================== BEGIN CONTENT AREA LO_CONTENT ======================= --%>
<div> <form id="form_server" runat="server">
<asp:contentplaceholder id="Content_Main" runat="server">
<%-- ================== END CONTENT AREA =================================== --%>
<!-- lo_content -->
<%-- ================== BEGIN HEADER ===================================== --%>
<form action="" method="post" id="header_nav">
<select name="select" class="dropdowns">
<option value="">Chief's Office</option>
<option value="">Internal Affairs Bureau</option>
<option value="">Deputy Chief - Patrol </option>
<option value="">- Division I (1,5,8,A/C, Crime Analyst)</option>
<option value="">- Division II (3,4,YSD)</option>
<option value="">- Division III (2,6,7 Ct.Liasion)</option>
<option value="">Criminal Investigation Bureau</option>
<option value="">Information Technology Bureau </option>
<option value="">Technical Services Bureau </option>
<label> Bureau / Division</label>
<%-- ================== END HEADER ================================ --%>
<!-- ================== BEGIN NAVIGATION =========================== -->
<a href="/default.aspx">PD Home</a>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" CssSelectorClass="IntraMenu">
<asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />
</div> <!-- lo_menu-nav -->
<%-- ================== END NAVIGATION =========================== --%>
<label>Search PD Intranet:</label>
<input type="text" name="target" class="inputnavborder" size="10" />
<input type='submit' name='go' value='go' class='inputnavbordersubmit' />
<div id="lo_menu-bottom"> <a href="http://infoweb">XYZ County Infoweb</a><br />
<a href="http://www.XYZcounty.gov">XYZCounty.gov</a><br />
<!-- lo_menu-bottom -->
<!-- lo_menu -->
<!-- lo_outer -->
<%-- ================== BEGIN FOOTER =========================== --%>
<p>XYZ County Police</p>
<%-- ================== END FOOTER =========================== --%>
Jun 30, 2006 05:45 PM|Russ Helfand|LINK
I don't see Theme or StyleSheetTheme in the @Page directive in your ASPX file. Don't you need to set your theme? Normally, you don't add <link> tags directly to your theme's CSS. You simply declare what your theme is and let the framework do the linking
for you. The white paper in the kit discusses this.
Also, it's very important that you do link to the BrowserSpecificCSS\IEMenu.css file. See how the kit's main master page handles this. It's discussed in the white paper also.
The fact that your page doesn't ultimately link to Menu.css and IEMenu.css is probably the crux your problem. Linking to just MenuExample.css isn't enough. Remember that Menu.css has the "behavioral" CSS rules for your menu. Without it, nothing will work
Jul 05, 2006 05:23 PM|poncherin|LINK
Jul 11, 2006 09:08 AM|poncherin|LINK
Jul 11, 2006 11:19 AM|Russ Helfand|LINK
That's curious. This rule is, of course, present in the kit because under many (most?) circumstances I thought it would be needed. Certainly it is needed in the sample pages provided in the kit. Earlier in this thread you said that you customized the
styles that influence the menu. That's great. It is, of course, what you are supposed to do! Use the kit as a guide and clone/modify/insert pieces of it into your site per the instructions given here:
It seems like when you customized the menu styles you added/changed something that conflicts with the rule you identified in IEMenu.css. It might be interesting to track that down by looking at how you modified/used the styles in the kit's MenuExample.css
(and Menu.css, if you touched it).
In any case, it looks like your are up and running now. That's great to hear. Congrats!
Jul 12, 2006 08:01 AM|poncherin|LINK
Jul 12, 2006 12:40 PM|Russ Helfand|LINK
Thanks for posting these data. I noticed that you have a "clear:both" property set for your <li> tags in the menu. Why did you choose to do that? I suspect that that is what forced you to comment out the other rule in IEMenu.css. Have you tried removing
that "clear" property from that rule and uncommenting the rule in IEMenu.css?
Generally, if I were you, I would compare your rules against those in the sample page (for Menu) provided in the kit. Where you see differences in things other than font, color and other pixel rendering properties (i.e., where you see things that affect
positioning dramatically like "clear") I'd be suspicious.
Hope this helps. Keep up the good work!