Line/Border under Firefox and other issues ... [SOLVED]

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

Line/Border under Firefox and other issues ... [SOLVED]

6/11/2007 1:20 AM

Christopher

Joined: 6/27/2006

Posts: 198

Line/Border under Firefox and other issues ... [SOLVED] Modified By Christopher on 6/12/2007 3:47:47 PM

Hello,

I have two issues related to the skinning of the menu in DNN Verson 4.5.3 and they both appear only in Mozilla Firefox and not in IE ...

A small white line appears under my menu. I am not sure if it is a border set somewhere or if Firefox's way of rendering prevents the menu from being flush with the underlying table but I just can't seem to get it to work. Works great in IE, though
The background image I am using for the root menu item is not 100% flush with the left and right separator images I am using for the root menu item. If I hover over the item (essentially activating the RootMenuItemSelected css class) the images become flush. Again, not an issue with IE.

If anyone has time can you take a look at it. You can download the skin here. Any help would be greatly appreciated!

Regards,

Christopher Koeber

Regards,
Christopher Koeber

6/12/2007 11:11 AM

Christopher

Joined: 6/27/2006

Posts: 198

Re: Line/Border under Firefox and other issues ... Modified By Christopher on 6/12/2007 12:10:55 PM

Is there anyone who can help me (pretty please ) with this. To make it easier I will post my xml, html, and css files below.

Thank you for your time.

Regards,

Christopher Koeber

HTML

<p class="FooterSection">[COPYRIGHT] [TERMS] [PRIVACY] [HELP]</p>
<p class="FooterSection">[DOTNETNUKE]</p>

XML

<Objects>
<Object>
  <Token>[CONTENTPANE:1]</Token>
  <Settings>
   <Setting>
    <Name>ID</Name>
    <Value>LeftPane</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[CONTENTPANE:2]</Token>
  <Settings>
   <Setting>
    <Name>ID</Name>
    <Value>TopPane</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[CONTENTPANE:3]</Token>
  <Settings>
   <Setting>
    <Name>ID</Name>
    <Value>BottomPane</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[COPYRIGHT]</Token>
  <Settings>
   <Setting>
    <Name>CssClass</Name>
    <Value>CopyrightText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[DOTNETNUKE]</Token>
  <Settings>
   <Setting>
    <Name>CssClass</Name>
    <Value>DotNetNukeCopyrightText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[HELP]</Token>
  <Settings>
   <Setting>
    <Name>CssClass</Name>
    <Value>HelpText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[LOGIN]</Token>
  <Settings>
   <Setting>
    <Name>Text</Name>
    <Value>Sign In</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>SignInText</Value>
   </Setting>
   <Setting>
    <Name>LogOffText</Name>
    <Value>Sign Out</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[LOGO]</Token>
  <Settings>
   <Setting>
    <Name>BorderWidth</Name>
    <Value>0</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[PRIVACY]</Token>
  <Settings>
   <Setting>
    <Name>Text</Name>
    <Value>Privacy Policy</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>PrivacyText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[SEARCH]</Token>
  <Settings>
   <Setting>
    <Name>Submit</Name>
    <Value><img src="/home/images/SearchButton.gif" alt="Search"/></Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>PrivacyText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[SOLPARTMENU]</Token>
  <Settings>
   <Setting>
    <Name>separatecss</Name>
    <Value>true</Value>
   </Setting>
   <Setting>
    <Name>backcolor</Name>
    <Value>#FFFFFF</Value>
   </Setting>
   <Setting>
    <Name>display</Name>
    <Value>horizontal</Value>
   </Setting>
   <Setting>
    <Name>menubarheight</Name>
    <Value>26</Value>
   </Setting>
   <Setting>
    <Name>menuborderwidth</Name>
    <Value>0</Value>
   </Setting>
   <Setting>
    <Name>moveable</Name>
    <Value>true</Value>
   </Setting>
   <Setting>
    <Name>fontnames</Name>
    <Value>Verdana, Arial, Helvetica, sans-serif</Value>
   </Setting>
   <Setting>
    <Name>fontsize</Name>
    <Value>14</Value>
   </Setting>
   <Setting>
    <Name>fontbold</Name>
    <Value>false</Value>
   </Setting>
   <Setting>
    <Name>userootbreadcrumbarrow</Name>
    <Value>false</Value>
   </Setting>
   <Setting>
    <Name>usearrows</Name>
    <Value>false</Value>
   </Setting>
   <Setting>
    <Name>separator</Name>
    <Value><![CDATA[ ]]></Value>
   </Setting>
   <Setting>
    <Name>leftseparator</Name>
    <Value><![CDATA[<img src="images/LeftTab.jpg"/>]]></Value>
   </Setting>
   <Setting>
    <Name>rightseparator</Name>
    <Value><![CDATA[<img src="images/RightTab.jpg"/>]]></Value>
   </Setting>
   <Setting>
    <Name>leftseparatoractive</Name>
    <Value><![CDATA[<img src="images/LeftActiveTab.jpg"/>]]></Value>
   </Setting>
   <Setting>
    <Name>rightseparatoractive</Name>
    <Value><![CDATA[<img src="images/RightActiveTab.jpg"/>]]></Value>
   </Setting>
   <Setting>
    <Name>menualignment</Name>
    <Value>Right</Value>
   </Setting>
   <Setting>
    <Name>rootmenuitemcssclass</Name>
    <Value>MainMenu_RootMenuItem</Value>
   </Setting>
   <Setting>
    <Name>rootmenuitemactivecssclass</Name>
    <Value>MainMenu_RootMenuItemActive</Value>
   </Setting>
   <Setting>
    <Name>rootmenuitemselectedcssclass</Name>
    <Value>MainMenu_RootMenuItemSelected</Value>
   </Setting>
   <Setting>
    <Name>leftseparatorcssclass</Name>
    <Value>MainMenu_LeftSeparatorCssClass</Value>
   </Setting>
   <Setting>
    <Name>leftseparatoractivecssclass</Name>
    <Value>MainMenu_LeftSeparatorActiveCssClass</Value>
   </Setting>
   <Setting>
    <Name>rightseparatorcssclass</Name>
    <Value>MainMenu_RightSeparatorCssClass</Value>
   </Setting>
   <Setting>
    <Name>rightseparatoractivecssclass</Name>
    <Value>MainMenu_RightSeparatorActiveCssClass</Value>
   </Setting>
   <Setting>
    <Name>separatorcssclass</Name>
    <Value>MainMenu_SeparatorCssClass</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[TERMS]</Token>
  <Settings>
   <Setting>
    <Name>Text</Name>
    <Value>Terms of Use</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>TermsText</Value>
   </Setting>
  </Settings>
</Object>
<Object>
  <Token>[USER]</Token>
  <Settings>
   <Setting>
    <Name>Text</Name>
    <Value>Sign Up</Value>
   </Setting>
   <Setting>
    <Name>CssClass</Name>
    <Value>SignUpText</Value>
   </Setting>
  </Settings>
</Object>
</Objects>

CSS

/* CSS Document */

.TopLeftCorner {
width:15px;
height:31px;
background-image:url(images/TopLeftCorner.jpg);
background-repeat:no-repeat;
min-width:15px;
min-height:31px;
}

.TopRightCorner {
width:15px;
height:31px;
background-image:url(images/TopRightCorner.jpg);
background-repeat:no-repeat;
min-width:15px;
min-height:31px;
}

.TopMiddleSection {
height:31px;
background-image:url(images/TopMiddleSection.jpg);
background-position:top;
background-repeat:repeat-x;
min-height:31px;
}

.BottomLeftCorner {
width:15px;
height:31px;
background-image:url(images/BottomLeftCorner.jpg);
background-repeat:no-repeat;
min-width:15px;
min-height:31px;
}

.BottomRightCorner {
width:15px;
height:31px;
background-image:url(images/BottomRightCorner.jpg);
background-repeat:no-repeat;
min-width:15px;
min-height:31px;
}

.BottomMiddleSection {
height:31px;
background-image:url(images/BottomMiddleSection.jpg);
background-position:bottom;
background-repeat:repeat-x;
min-height:31px;
}

.MiddleSectionLeftBorder {
background-image:url(images/MiddleSectionBorders.jpg);
background-position:left;
background-repeat:repeat-y;
}

.MiddleSectionRightBorder {
background-image:url(images/MiddleSectionBorders.jpg);
background-position:right;
background-repeat:repeat-y;
}

.SignInControlsContainingCell {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
}

.SloganContainingCell {
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
text-align:left;
font-weight:bold;
}

.SolPartMenuContainingCell {
vertical-align:bottom;
text-align:right;
background-color:#FFFFFF;
}

.LogoContainingCell {
background-color:#FFFFFF;
text-align:left;
vertical-align:bottom;
}

.TopLeftSearchCorner {
width:16px;
height:31px;
background-image:url(images/TopLeftSearchCorner.jpg);
background-repeat:no-repeat;
}

.TopMiddleSearchSection {
height:31px;
background-image:url(images/TopMiddleSearchSection.jpg);
background-position:top;
background-repeat:repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}

.TopRightSearchCorner {
width:16px;
height:31px;
background-image:url(images/TopRightSearchCorner.jpg);
background-repeat:no-repeat;
}

.MiddleSearchSectionLeftBorder {
background-image:url(images/MiddleSearchSectionLeftBorder.jpg);
background-position:left;
background-repeat:repeat-y;
width:1px;
}

.MiddleSearchSectionRightBorder {
background-image:url(images/MiddleSearchSectionRightBorder.jpg);
background-position:right;
background-repeat:repeat-y;
width:1px;
}

.BottomLeftSearchCorner {
width:16px;
height:31px;
background-image:url(images/BottomLeftSearchCorner.jpg);
background-repeat:no-repeat;
}

.BottomMiddleSearchSection {
height:31px;
background-image:url(images/BottomMiddleSearchSection.jpg);
background-position:bottom;
background-repeat:repeat-x;
}

.BottomRightSearchCorner {
width:16px;
height:31px;
background-image:url(images/BottomRightSearchCorner.jpg);
background-repeat:no-repeat;
}

.SearchSectionTable {
margin-top:10px;
margin-bottom:10px;
margin-right:16px;
}

.SearchControl {
text-align:center;
vertical-align:middle;
}

.ContentPaneTable {
margin-top:10px;
margin-bottom:10px;
}

.ContentPaneContainingCell {
vertical-align:top;
}

.FooterSection {
text-align:center;
}

.CopyrightText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.CopyrightText a,
.CopyrightText a:link,
.CopyrightText a:visited,
.CopyrightText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.CopyrightText a:hover {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:underline;
}

.DotNetNukeCopyrightText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.DotNetNukeCopyrightText a,
.DotNetNukeCopyrightText a:link,
.DotNetNukeCopyrightText a:visited,
.DotNetNukeCopyrightText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.DotNetNukeCopyrightText a:hover {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:underline;
}

.HelpText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.HelpText a,
.HelpText a:link,
.HelpText a:visited,
.HelpText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.HelpText a:hover {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:underline;
}

.HostnameText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.HostnameText a,
.HostnameText a:link,
.HostnameText a:visited,
.HostnameText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.HostnameText a:hover {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:underline;
}

.SignInText {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
}

.SignInText a,
.SignInText a:link,
.SignInText a:visited,
.SignInText a:active {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
}

.SignInText a:hover {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
text-decoration:underline;
}

.PrivacyText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.PrivacyText a,
.PrivacyText a:link,
.PrivacyText a:visited,
.PrivacyText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.PrivacyText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:underline;
}

.SearchText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

.SearchText a,
.SearchText a:link,
.SearchText a:visited,
.SearchText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
}

.SearchText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}

.TermsText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.TermsText a,
.TermsText a:link,
.TermsText a:visited,
.TermsText a:active {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
}

.TermsText {
color:#8D0D3A;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}

.SignUpText {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
}

.SignUpText a,
.SignUpText a:link,
.SignUpText a:visited,
.SignUpText a:active {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
}

.SignUpText a:hover {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#FFFFFF;
font-size:14px;
text-decoration:underline;
}

.MainMenu_MenuContainer {
vertical-align:bottom;
background-color: Transparent;
}

.MainMenu_MenuBar {
height:26px;
background-color: Transparent;
}

.MainMenu_RootMenuArrow {
display:none;
}

.MainMenu_RootMenuItem {
background-image:url(images/Tab.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
background-position:top;
color:#FFFFFF;
height:27px;
}

.MainMenu_RootMenuItemActive {
background-image:url(images/ActiveTab.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
color:#FFFFFF;
}

.MainMenu_RootMenuItemSelected {
background-image:url(images/Tab.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
color:#DF7A1A;
}

.MainMenu_SeparatorCssClass {
background-color:#FFFFFF;
font-size:9px;
}

.MainMenu_LeftSeparatorCssClass {
background-color:#FFFFFF;
font-size:9px;
}

.MainMenu_LeftSeparatorActiveCssClass {
background-color:#FFFFFF;
font-size:9px;
}

.MainMenu_RightSeparatorCssClass {
background-color:#FFFFFF;
font-size:9px;
}

.MainMenu_RightSeparatorActiveCssClass {
background-color:#FFFFFF;
font-size:9px;
}

Regards,
Christopher Koeber

6/12/2007 12:47 PM

Ian Robinson

enlivenhq.com
Joined: 1/6/2006

Posts: 921

Re: Line/Border under Firefox and other issues ...

Christopher,

Especially because at least one issue is Firefox-specific, you may want to try using firebug to investigate the html/css of the menu. It has a really handy "inspect" feature.

If you still are having trouble finding the issue and are able to post a public URL for others to look at that would be great. I know you posted the html etc above but it would be more approachable if one could look at the site directly.

Hope that helps,

Ian

Software Engineer

Leader, St. Louis DotNetNuke User Group

Co-Founder, dnnGallery

Stack Overflow: Ian Robinson

Twitter: @irobinson

Linked In: Ian Robinson

6/12/2007 3:47 PM

Christopher

Joined: 6/27/2006

Posts: 198

Re: Line/Border under Firefox and other issues ...

Using FireBug did the trick! With it I was able to find out what classes I needed to fix the issue. In case anyone is curious the two classes I had to override for each issue respectivly is MainMenu_MenuBreak and MainMenu_MenuItem.

Regards,

Christopher Koeber

Regards,
Christopher Koeber

Page 1 of 1

Home

Using DNN Platf...

Skins, Themes, ...

Line/Border under Firefox and other issues ... [SOLVED]

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)