CSS theme 100% width problem

Topics: Themes
Jul 18, 2014 at 1:08 AM
Hi everyone :-)

I'm hoping maybe some one can help shed some light on this issue. It's not a BE issue it seems to be a CSS theme issue, but it's driving me nuts, so if someone can help, I would sure appreciate it...

I have a web page with pure CSS menus that works perfectly in my own 2 or 3 column framework (created in VS2010), but as soon as I put the EXACT same CSS into the BE theme, it doesn't work correctly. Here is the CSS (and I've checked it and re-checked it, copied and pasted it) - so I know it's the same:
#navbar
{
    clear: left;
    float: left;
    width: 100%;
    background: #717577;
    font-family: Crandall, Comic Sans MS, Lucida Sans Unicode, Segoe Print, 
Segoe UI, Trebuchet MS;
    font-size: 90%;
    z-index: 100;
}
#navbar ul
{
    clear:left;
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    text-align:center;
}
#navbar ul li 
{
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
#navbar ul li a
{
    display: block;
    margin: 0;
    padding: 10px 15px 15px 10px;
    background: #717577;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    line-height: 1em; /**/
    border-left: 1px solid #525356;
    border-right: 1px solid #525356;
}
#navbar ul li a:hover
{
    background: #878B8D;
    color: #FFCC66;
}
/* Submenu items */
#navbar ul ul {
   display:none;
   position:absolute;
   top:1.7em;
   left:0;
   background:#717577;
   right:auto; 
   width:9em; /* width of the drop-down menus */
}
#navbar ul ul li
{
   left:auto;  
   margin:0; 
   clear:left;
   width:100%;
}
#navbar ul ul li a,
#navbar ul li:hover ul li a,
#navbar ul li.hover ul li a { 
/* This line is required for IE 6 and below */
   font-size:.9em;
   background:#878B8D;
   color:#FFCC66;
/* overwrite line-height value from top menu */
   line-height:1.3em; 
   padding: 3px 3px 5px 3px;
   border-bottom:1px solid #525356;
}
#navbar ul ul li a:hover, 
#navbar ul ul li a:hover, 
#navbar ul li:hover ul li a:hover, 
#navbar ul li.hover ul li a:hover
{
    /* This line is required for IE 6 and below */
    background: #878B8D;
    color: #FFCC66;
}
#navbar ul ul.last {
   left:auto; 
   right:0;
}
/* Make the sub menus appear on hover */
#navbar ul li:hover ul,
#navbar ul li.hover ul /* This line is required for IE 6 and below */
{ 
   display:block; 
   z-index:100;
}   
And here is the HTML for the Menu items:
<div id="navbar">
        <ul >
        <li><a runat="server" href="~/Default.aspx">Page 1</a></li>
        <li><a runat="server" href="~/">Page 2</a>
                  <ul>
                     <li><a runat="server" href="~/">Page 2.1</a></li>
          </ul>
            </li>
            <li><a runat="server" href="~/">Page 3</a>
                <ul class="last">
                    <li><a runat="server" href="~/">Page 3.1</a></li>
                    <li><a runat="server" href="~/">Page 3.2</a></li>
                </ul> 
            </li>
            <li><a runat="server" href="~/Contact.aspx">Contact us</a></li>
            <li><a runat="server" href="~/About.aspx">About</a></li>
            <li><a runat="server" id="aLogin"></a></li>
        </ul> 
    </div>
The ONLY difference I can find is in the "Wrapper" - in my web site I put the wrapper inside the form tags and in the theme I see that the wrapper is containing the form tags. I even tried to change it in the theme so that the wrapper was inside the form tags, but it made no difference, and in fact made it so a horizontal scroll bar appeared! The theme that I am working with is GreyShadow from the BlogEngineThemesMegaPack zip file that I downloaded. If anyone can let me know how to get my menus to look like this:
Image
instead of this:
Image
I would greatly appreciate the help. This is absolutely driving me nuts! Thanks in advance,
Coleen
Jul 27, 2014 at 3:54 PM
Well, I ended up 1) using a different theme and 2) customizing the heck out of it!

I created the look/feel I wanted in my VS2010, and then added or changed the CSS to the existing theme (changed to "Inove") and completely re-wrote the Css for the wrapper of the two columns to get the look/feel I wanted.It worked so now I have a completely 100% page width menu bar with drop-down roll-over navigation. I had to remove the content and wrap that was i the Inove theme to use my custom navigation menu, and to get the full page two column layout that I wanted, but at least it works. If anyone is interested on what/how I did it, message me and I'll send you the updated CSS and HTML I used.

You can consider this problem "solved" :-)