Help - Search - Members - Calendar
Full Version: Nav and Container placed below left col
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Jane Gallagher
Oct 23 2009, 12:01 PM
Hello!

When many of my friends view my page in Internet Explorer, the nav bar and container drop down below the left column. I know that IE has many issues, but I'm not entirely sure what's causing this one and how to resolve it. Anyone know any fixes?

Also, if anyone can help me with a nav bar problem while I'm here, that'd be great, too. You'll notice that when you hover over the nav bar and the layers drop down, half of the box doesn't have a background. I've never seen anything like that. Any ideas?

You can view the website here: http://people.clemson.edu/~jmckenz/engl496/1.html
And the css code is as follows:

CODE
<STYLE TYPE-"type/css">

<!--
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: georgia;


color: #333333;
background: #313237;
background-image: none;
}

h{
color: #FF9285;
font-size: 16px;
font-family: "georgia";
font-weight: bold;
font-style: italic;
}




p
{
font-size: 11px;
line-height: 17px;
}





a:link {
    color: #FFFFFF;
        font-weight: bold;
    text-decoration:none
    }
a:visited {
    color: #FFFFFF;
        font-weight: none;
    text-decoration:none
    }
a:hover {
    color: #FFFFFF;
    background-color: none;
    font-weight: none;
    text-decoration:none
    }
a:active {
    color: #FFFFFF;
        font-weight: none;
    text-decoration:none
    }





#wrapper{
width: 800px;
background-color:#313237;
margin: 10px auto;
padding: 0px;
border: 0px solid #000000;
}

#banner{
height: 100px;
background-image: url(http://people.clemson.edu/~jmckenz/engl496/topbar2.png);
background-color: #313237;
background-repeat: no-repeat;
margin-left: 35px;
}





#content h1{
margin-left: 290px;
}

#content h2{
margin-left: 325px;
}

#content h3{
margin-left: 325px;
}

#content p1{
margin-left: 0px;
}

#content p2{
margin-left: 0px;
}

#content p3{
margin-left: 0px;
}


#leftcol{
  margin-left: 0px;
  margin-right: 30x;
  margin-top: 0px;
  float: left;
  width: 110px;
  border-left: 0px;
  background-color: #313237;
  }

/*Menu Bar styling classes*/
ul.MenuBarHorizontal{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    font-family: georgia;
    cursor: default;
    width: 100%;
    white-space: nowrap;
}
ul.MenuBarActive{
    z-index: 1000;
}
ul.MenuBarHorizontal li{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    float: left;
}
ul.MenuBarHorizontal ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
    left: auto;
}
ul.MenuBarHorizontal ul li{
    width: 8.2em;
}
ul.MenuBarHorizontal ul ul{
    position: absolute;
    margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
    left: auto;
    top: 0;
}
ul.MenuBarHorizontal ul{
    border: 1px solid #CCC;
}
ul.MenuBarHorizontal a{
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
    background-color: #33C;
    color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
    background-color: #33C;
    color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe{
    position: absolute;
    z-index: 1010;
}
@media screen, projection{
    ul.MenuBarHorizontal li.MenuBarItemIE{
        display: inline;
        f\loat: left;
        background: #FFF;
    }

}

#footer{
clear: both;
border-top: 0px solid #000000;
background-color: #333333;
color: #000000;
padding: 1px;
text-align: center;
}

.container{
width: 99%;
float: right;
background-color: #FFFFFF;

}

.floatright { float: right;
margin: 10px 20px 10px 10px;
}

#container{
background-color: #FFFFFF;
margin: 10px 0px 0px 100px;
padding: 10px 20px 20px 20px;
}
-->

</STYLE>
Stubbs
Oct 24 2009, 09:40 PM
I don't know if it's "good practice", but instead of setting all the margins and padding to 0 at the top there, you could use this:


CODE
*
     {
     margin: 0px;
     padding: 0px;
}


This * thing is called a wild-card and will apply that style to every (or nearly every) element on your page. It will mess things up, but it kind of makes all browsers act the same.

Also, you don't have to use javascript for your menu. If you play around with it, you could use Stu Nicholl's menu. It's free if you give credit, I think. It's CSS only, though, and cross-browser friendly, not to mention accessibility.

[url= http://www.cssplay.co.uk/menus/final_drop.html]Stu Nichols CSS Only Menu[/url]
pandy
Oct 25 2009, 09:06 AM
Looks like a float drop. Floats drop when there isn't enough room for them. IE has bugs that for instance can add a little margin to things. See if creating a little more space helps (by increasing the width of the container or reducing the width of the float, changing margins or whatever is applicable).
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.