Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: not2easy

Message Too Old, No Replies

Sub Menu Help

     

csuguy

4:56 pm on Sep 5, 2008 (gmt 0)

5+ Year Member



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

7:03 pm on Sep 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try adding

left: 0;

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

Marshall

csuguy

4:17 am on Sep 6, 2008 (gmt 0)

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month