homepage Welcome to WebmasterWorld Guest from 54.145.182.50
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Sub Menu Help
csuguy

5+ Year Member



 
Msg#: 3739228 posted 4:56 pm on Sep 5, 2008 (gmt 0)

Ok - I'm working on a sub menu. It's one of those menu's where the sub menu is hidden until you click the link and then - in the same area, reveals the sub menu underneath where you clicked. So far it looks fine in FF, but I'm having trouble with IE (of course ;)).

Basically - I have a ul nested in a ul. I want the nested ul to 1) Not be indented and 2)have it's own background-image.

I'm using list-style-type:none - but that's not preventing the nested ul from being indented in IE. I may just use relative positioning to move it left, but I would prefer not to if there is a better way.

For the background-image, this wouldn't be too much of a problem except that I'm using semi-transparent backgrounds. The background image from the li that comes before the ul is being carried through into the ul (despite giving background-image:none to the ul, and specifying a new one for the ul's lis).

My code is a bit of a mess right now. I was originally going for a drop-down menu, but due to some weird results I couldn't get that to work w/o javascript. Though, I realize now I'm not going to be able to get either way to work w/o javascript (PORQUE?!).

At any rate, here's the code. All of the links are relative, so don't worry:


<html>
<head>
<style>
<!--
body
{
margin: 0px;
padding: 0px;
background-color: rgb(38,67,83);
text-align:center;
}

#container
{
position:relative;
text-align:left;
width: 800px;
height: 100%;
margin: auto;
padding: 0px;
}

#header
{
position:absolute;
left: 20px;
top: 0px;
width: 760px;
height: 130px;
background-image: url('top_banner.png');
}

#sub_container
{
position:absolute;
left: 20px;
top: 130px;
width: 760px;
height: 100%;
background-image: url('background_1.png');
}

#logo
{
position:absolute;
left: 55px;
top: 35px;
width: 140px;
height: 140px;
background-image: url('fire_icon.png');
}

#banner
{
position:absolute;
left: 240px;
top: 30px;
width: 340px;
height:50px;
background-image: url('banner_text.png');
}

#main_body_head
{
position:absolute;
left: 102px;
top: -32px;
width: 642px;
height: 89px;
background-image: url('inner_background.png');
}

#filler
{
float: left;
width: 100%;
height: 57px;
}

#main_menu
{
float:left;
position:relative;
left: -13px;
top: -13px;
text-align:center;
}

.menu
{
width:255px;
font-size: 16px;
}

.menu .top
{
float:left;
width: 100%;
height: 40px;
background-image: url('menu_top.png');
}

.menu .body
{
float:left;
width: 100%;
}

.menu .body ul
{
width:100%;
}

.menu .body ul li
{

}

.menu .body li
{
width: 100%;
}

.menu .bottom
{
float:left;
width: 100%;
height: 55px;
background-image: url('menu_bottom.png');
}

.menu .body li.menu_item
{
float:left;
text-align:left;
margin: auto;
padding: 5px 0px 15px 20px;
background-image: url('menu_repeat.png');
}

.menu ul
{
display:block;
list-style-type:none;
padding: 0px;
margin: 0px;
}

.menu a:link,a:visited
{
color:white;
text-decoration:none;
}

.menu a:hover
{
color:yellow;
}

.menu .sub_menu
{
width:100%;
}

.body .ul
{
margin:0px;
padding:0px;
}

ul.sub_menu
{
float:left;
margin:0px;
padding:0px;
background-image: url('sub_menu_repeat.png');
}

.menu .body ul.sub_menu li.menu_item
{
padding: 5px 0px 15px 20px;
background-image:none;
}

#main_body
{
float:right;
}
-->
</style>
</head>

<body>

<div id="container">
<div id="header">
<div id="banner"></div>
</div>

<div id="sub_container">
<div id="main_body_head"></div>
<div id="filler"></div>

<!-- MENU -->
<div id="main_menu" class="menu">
<div class="top"></div>

<ul class="body">

<li class="menu_item">
<a href="?page=index">Home</a>
</li>

<li class="menu_item">
<a href="javascript:void();">Products</a>
</li>

<ul class="sub_menu menu">
<li class="menu_item"><a href="?test=intumescent">Fire Barrier Intumescent Paint</a></li>
<li class="menu_item"><a href="?test=acrylic">Non-Burning Acrylic Paint</a></li>
<li class="menu_item"><a href="?test=wood">Wood Safe</a></li>
<li class="menu_item"><a href="?test=shingle">Shingle Safe</a></li>
<li class="menu_item"><a href="?test=fabric">Fabric Treatment</a></li>
<li class="menu_item"><a href="?test=thermal">Thermal Protection</a></li>
</ul>

<li class="menu_item">
<a href="?page=about">About Us</a>
</li>

<li class="menu_item">
<a href="?page=contact">Contact Us</a>
</li>

</ul>

<div class="bottom"></div>
</div> <!-- END OF MENU -->

<div id="main_body">

<div id="content">

</div>

</div>
</div>

<div id="logo"></div>
</div>

</body>
</html>

Ryan

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3739228 posted 7:03 pm on Sep 5, 2008 (gmt 0)

Try adding

left: 0;

to the UL/LI in question. This trick has worked for me in fixing IE.

Marshall

csuguy

5+ Year Member



 
Msg#: 3739228 posted 4:17 am on Sep 6, 2008 (gmt 0)

Thanks Marshall,

unfortunately, it didn't work :/. I think what I'm going to do is create a new image specifically for IE (seeings how they are transparent pngs and I'm going to have to make a separate style sheet for them anyways). I used left: -15px (I think it was 15px) to line it up. The only thing bugging me now is that the background images in IE are lying on top of eachother and adding their semi-transparent white backgrounds and making the area brighter rather than darker as it does in other browsers :/. But ill just go in and make the IE version of the image have a semi transparent blue or black to cancel it out. It won't look perfect... but what can you do.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved