Chapter 7. Menu CSS Styling not working

philipjb · April 28th, 2019, 09:42 PM

Hi Imar
Having an Issue with the CSS styling. Have replaced my CSS File with the downloaded one and still the Background colors are not being picked up from the CSS. Its as though the original .MainMenu class is overriding the additional styling. Have I missed a properties grid item?ShowStaringNode False, StaticEnableDefaultPopOutImage False, Orientation Horizonatal.

Another Step I must have missed somewhere. When Creating the about.aspx ect files the .cs file is defaulting to : System.Web.UI.Page and not : BasePage. Easy to fix but I'm sure it should pick that up automatically.

Yours
Philip Bailey

Imar · April 29th, 2019, 10:11 AM

Hi Philip,

Can you post a zipped copy of your site somewhere? (Dropbox, or something similar) and explain which page or what is misbehaving exactly and how (page / step number and so on would help a lot)?

>> Easy to fix but I'm sure it should pick that up automatically.

Sounds like add a new Web Form using the standard template and you didn't pick your custom template.

Imar

philipjb · April 29th, 2019, 11:54 AM

Hi Imar
Here is the link to the zipped site on OneDrive.

https://1drv.ms/f/s!Avw4ZelhChRbgaJGRGO3xWrYF_c54g

Isue is the BackColor is not working have checked all the code and even changed from the version of the Monochrome CSS file that I keyed to the one from the Chapter 7 Downloads and still it's not working.
Page No. 252 Step 4 - 253 Figure 7-8.

In the Same folder as the zip there are two image files
One a screen shot of the resulting menu CSS not working
It's as though the CSS is being overridden by some other command.

The second a Screen Shot of newly created Default2.aspx.cs showing the resulting output that requires and edit. Note I have included the exported Page Template Zip also with a text file giving it's local path on my machine. This relates to Step 3 on Page 252
It requires a change of the Inherit : Page as shown to ": BasePage" Where did I go wrong on error 2 and how do I fix it?

Much obliged.
Yours
Philip Bailey

philipjb · April 29th, 2019, 12:30 PM

Hi Imar
Don't think it's the site code after all. Trying lots of things and one worked. My Default browser is Google Chrome Copied the URL into MS Edge, did a postback and everything worked. Gone through all my settings for chrome but cannot find what is blocking these CSS Commands. Any suggestions?

Yours
Philip Bailey

philipjb · April 29th, 2019, 12:45 PM

Hi Imar
Have found several posts with regard to the following browsers
Google Chrome and Apple Safari, when displaying ASP:Menu Controls and not rendering correctly.

There are several solutions it seems one example is this code into the Master Page.

protected override void AddedControl(Control control, int index)
{
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
this.Page.ClientTarget = "uplevel";
}
base.AddedControl(control, index);

Another simpler One

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}
}

Source: https://www.codeproject.com/Question...es-not-display

philipjb · April 29th, 2019, 01:19 PM

Hi Imar
The code snippets don't fix the problem. Have bit the bullet and switched my default browser to MS Edge. All working as expected.
However this does raise the issue that ASP:Menu may not be the best options for a production site as it is not well handled by it seems from posts Chrome, Safari and Opera.

Have you any suggestions on this?

Well back to my study moving on in Chapter 7.
Yours
Philip Bailey

Imar · April 30th, 2019, 06:51 AM

Do the menus look OK on this site? http://www.planetwrox.com/

Maybe it was just the cache? Have you tried clearing your browser's cache?

Imar · April 30th, 2019, 07:03 AM

BTW:

>> It requires a change of the Inherit : Page as shown to ": BasePage" Where did I go wrong on error 2 and how do I fix it?

The template you sent me looks good as it his this code:

public partial class $relurlnamespace$_$safeitemname$ : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Are you sure you're picking your custom template and not the built-in Web Forms one?