CSS Friendly Adapters & Firefox not displaying correctly

Home ›

ASP.NET Forums » Microsoft Downloads » CSS Friendly Control Adapters » CSS Friendly Adapters & Firefox not displaying correctly

Shortcuts

Previous Next

CSS Friendly Adapters & Firefox not displaying correctly

Last post 05-09-2007 8:24 AM by hotfirewire. 4 replies.

Sort Posts:

CSS Friendly Adapters & Firefox not displaying correctly

05-03-2007, 3:43 PM

Contact

11 point Member
hotfirewire
Member since 07-11-2002, 7:09 AM
Toronto
Posts 14

Hello,

I've got the CSS menu working correctly in IE 7 however I can't seem to get it working in Firefox 1.5.

Here is my code:

<!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>Untitled Page</title>

html, body {

height: 100%;

}

body

{

min-width: 640px;

}

#header

, #menu, #content, #sub-section, #footer

{

overflow: hidden;

display: inline-block;

}

#header

, #footer

{

width: 100%;

}

#siteContainer

{

width: 775px;

height:100%;

min-height:100%;

margin: 0px auto;

padding: 0px;

text-align: left;

background-color: #1B2429;

border-left: solid 1px #333;

border-right: solid 1px #333;

}

#pageContainer

{

width: 100%;

min-height:100%;

margin: 0px;

padding: 0px;

top: 0px;

left:0px;

position: relative;

}

#titleLeft

{

float: left;

width: 259px;

height: 93px;

background: #333 url( '../images/title.jpg' ) no-repeat;

}

#titleRight

{

float: right;

width: 505px;

height: 80px;

background: #282F39;

}

#menuNav

{

clear:both;

width: 755px;

height: 38px;

background: #d7350f;

}

#tagLine

{

width: 755px;

height: 40px;

background: #1B2429;

border-bottom: solid 1px #E6E6E6;

border-top: solid 1px #E6E6E6;

margin: 10px 0px;

clear:both;

}

style>

rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>

<![endif]-->

head>

body>

Left

</div>

Right

</div>

<asp:Menu ID="MainMenu" runat="server" cssselectorclass="PrettyMenu" DataSourceID="SiteMapDataSource"

Orientation="Horizontal" SkinID="MenuHorizontal" StaticDisplayLevels="2">

</asp:Menu>

<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" EnableViewState="false"

SiteMapProvider="AspNetSqlSiteMapProvider" ShowStartingNode="false" />

</div>

</div>

</form>

body>

html>

This is my CSS code:

.PrettyMenu .AspNet-Menu-Vertical

{

position:relative;

top: 3em;

left: 0;

z-index: 300;

}

.PrettyMenu ul

{

background:#D7350F;

}

/* Top tier */

.PrettyMenu

.AspNet-Menu-Vertical ul.AspNet-Menu

{

width: 9em;

}

.PrettyMenu ul.AspNet-Menu ul

{

width: 10.5em;

left: 8.9em;

top: -1em;

z-index: 400;

}

.PrettyMenu

ul.AspNet-Menu ul ul

{

width: 11.5em;

left: 10.4em;

}

.PrettyMenu ul.AspNet-Menu li

{

background:#D7350F url(../images/mnu_background.gif) repeat-x;

}

.PrettyMenu ul.AspNet-Menu li a,

.PrettyMenu

ul.AspNet-Menu li span

{

color: black;

/**/padding: 13px 2px 13px 8px;

border-left:1px solid #9C2104;

border-bottom: 0;

background: transparent url(../images/arrowRight.gif) right center no-repeat;

}

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Leaf a,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Leaf span

{

background-image: none;

}

.PrettyMenu ul.AspNet-Menu li a img

{

border-style: none;

vertical-align: middle;

}

.PrettyMenu ul.AspNet-Menu li:hover,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover

{

background:#98280D;

}

.PrettyMenu

ul.AspNet-Menu li:hover a,

.PrettyMenu

ul.AspNet-Menu li:hover span,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover a,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover span,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover a,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover span,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover ul a:hover,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover

{

color: White;

}

.PrettyMenu

ul.AspNet-Menu li:hover ul a,

.PrettyMenu

ul.AspNet-Menu li:hover ul span,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover ul a,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover ul span,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover ul a,

.PrettyMenu

ul.AspNet-Menu li:hover li:hover ul span,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span

{

color: Black;

}

.PrettyMenu ul.AspNet-Menu li a:hover,

.PrettyMenu

ul.AspNet-Menu li span.Asp-Menu-Hover

{

color: White;

background: transparent url(../images/activeArrowRight.gif) right center no-repeat;

}

.PrettyMenu

ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover

{

background-image: none;

}

.PrettyMenu .AspNet-Menu-Horizontal

{

}

.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

{

width: 100%;

background:#D7350F url(../images/mnu_background.gif) repeat-x;

}

.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul

{

width: 10.5em;

left: 0;

top: 100%;

}

.PrettyMenu

.AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

{

top: -0.3em;

}

.PrettyMenu

.AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

{

width: 11.5em;

}

.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

{

/**/width: 8em;

text-align:center;

}

.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

{

text-align:left;

width: 10.5em;

}

.PrettyMenu

.AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li

{

width: 11.5em;

}

.PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul

{

margin: -1.4em 0 0 10.35em;

}

#SampleMenuContainer

{

position: absolute ;

top: 0px;

left: 0px;

z-index:300;

}

#SampleMenu

{

position:relative;

height: 18em;

font-size:small;

font-family: Tahoma;

}

Re: CSS Friendly Adapters & Firefox not displaying correctly

05-04-2007, 6:31 AM

Contact

127 point Member
asp2designer
Member since 10-07-2005, 8:02 PM
Philippines
Posts 40

I recommend that whenever you start any css project or any asp.net project for that matter, that you always do parallel testing so that you wont be suprise when you test it with other browser.

When i'm doing my css, i'll make sure i test it both with IE7 and Firefox 2. Test often and don't wait for your css to finished before testing it with other browser. That way you could immediately see whats wrong.

Free design ready CSS Control Adapters

Re: CSS Friendly Adapters & Firefox not displaying correctly

05-04-2007, 9:12 AM

Contact

11 point Member
hotfirewire
Member since 07-11-2002, 7:09 AM
Toronto
Posts 14

I agree. However this problem only happened when I've inserted my menu (which works in both IE and Firefox) into my design (which also works in IE and Firefox). The problem is in firefox the menu gets cut off at the bottom when it runs into the other div. I'm using position: relative on my divs so z-index doesn't work. It seems to be a positioning thing but I can't seem to get it to work in firefox.

Any suggestions?

Thanks,

Lee

Re: CSS Friendly Adapters & Firefox not displaying correctly

05-08-2007, 12:08 PM

Contact

Answer

3,298 point Contributor
Russ Helfand
Member since 09-14-2005, 6:22 PM
Groovybits.com
Posts 741

Hi Lee, here's something I try when I run into these sorts of problems...

Go into the browser and do a "view source" so you can look at the final HTML that's being generated. Locate the HTML element that is obstructing (sitting on top of) the submenu. Now, locate the HTML element that is the menu (that contains the obstructed submenu). Sometimes, if you are lucky, these 2 HTML elements will be siblings in the DOM. It's more likely, though, that they are children or grandchildren (etc) of DIV elements that are siblings. What you need to do is locate the true sibling elements that are the corresponding container elements of the problematic elements. If you find those elements you can try making both of them position:relative. And you can make the one that contains the menu having a higher z-index than the one containing the element that is obstructing the submenu.

Clear as mud?

Russ Helfand
Groovybits.com

Re: CSS Friendly Adapters & Firefox not displaying correctly

05-09-2007, 8:24 AM

Contact

11 point Member
hotfirewire
Member since 07-11-2002, 7:09 AM
Toronto
Posts 14

Your right. It was the header div that was wrapping the menu which caused all the problems. I've Removed that and it now works great in Firefox and IE.

Thanks,

Lee