<em>I just posted this in the wrong forum so sorry if anyone gets a
dup!</em>
I'm working on a slide down horizontal menu and I'm having issues
getting the border around the submenu to display correctly. I'm
trying
to get a 1px border on the left and right side and an image on the
bottom for rounded corners. I finally got it to display correctly in
FF but now the right border is 2px instead of 1px in IE because of
the
way I had to clip 2px off the right for FF. Any ideas on how to
adjust
this to make it possible? Thanks.
<code>
<html>
<head>
<title>test</title>
<style>
/*Styles for level 0*/
..clLevel0,.clL evel0over{displ ay: inline; position:absolu te;
padding-right: 4px;
padding-bottom: 0px;
padding-top: 6px;
font-family:arial,he lvetica; font-size:8pt; font-weight:bold;
border-bottom: 0px solid #f0b319;}
..clLevel0{back ground-color:#ffffff; color:#115d95;
}
..clLevel0over{ background-color:#f0b319; color:#000080;
cursor:pointer; }
..clLevel0borde r{display: inline; position:absolu te; visibility:hidd en;
background-color:#ffffff; }
/*Styles for level 1*/
..clLevel1, .clLevel1over{c lear: both; display: inline;
position:absolu te; padding:0px; font-family:arial,he lvetica; font-size:
8pt; font-weight:bold; padding-bottom: 5px;
}
..clLevel1{back ground-color:yellow; color:#115d95; }
..clLevel1over{ background-color:#115d95; color:#f0b319;
cursor:pointer; }
..clLevel1borde r{position:abso lute; visibility:hidd en; background-
color:#f0b319;}
..clLevel1botto m, .clLevel1bottom over{position:a bsolute; padding:0px;
background-color:#fdf7e8;
background-image: url(images/pulldown-bottom.gif);
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<table width="780">
<tr>
<td>
<div style="position : relative; text-align: left;">
<script type="text/javascript"</script>
<div style="z-index: 2; clip: rect(0px, 65px, 24px, 0px); width: 65px;
height: 24px; left: 0px; top: 0px; visibility: visible;"
id="oCMenu_top0 _0" class="clLevel0 border">
<div style="z-index: 4; clip: rect(0px, 65px, 24px, 0px); width: 65px;
height: 24px; left: 0px; top: 0px;" id="oCMenu_top0 " class="clLevel0 ">
COMPANY </div>
</div>
<div style="overflow : hidden; z-index: 13; visibility: visible;
clip: rect(0px, 200px, 55px, 0px); width: 200px; height: 55px; left:
0px; top: 25px;" id="oCMenu_1_0 " class="clLevel1 border">
<div style="z-index: 15; left: 0px; top: 0px; clip: rect(0px, 200px,
20px, 0px); width: 198px; height: 20px; visibility: inherit;"
id="oCMenu_sub0 0" class="clLevel1 "Campus University Wide Link </div>
<div style="z-index: 16; left: 0px; top: 20px; clip: rect(0px,
200px, 20px, 0px); width: 198px; height: 20px; visibility: inherit;"
id="oCMenu_sub0 1" class="clLevel1 "Company2 </div>
<div style="z-index: 17; left: 0px; top: 40px; clip: rect(0px,
200px, 15px, 0px); width: 200px; height: 15px; visibility: inherit;"
id="oCMenu_sub0 2" class="clLevel1 bottom"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
</code>
dup!</em>
I'm working on a slide down horizontal menu and I'm having issues
getting the border around the submenu to display correctly. I'm
trying
to get a 1px border on the left and right side and an image on the
bottom for rounded corners. I finally got it to display correctly in
FF but now the right border is 2px instead of 1px in IE because of
the
way I had to clip 2px off the right for FF. Any ideas on how to
adjust
this to make it possible? Thanks.
<code>
<html>
<head>
<title>test</title>
<style>
/*Styles for level 0*/
..clLevel0,.clL evel0over{displ ay: inline; position:absolu te;
padding-right: 4px;
padding-bottom: 0px;
padding-top: 6px;
font-family:arial,he lvetica; font-size:8pt; font-weight:bold;
border-bottom: 0px solid #f0b319;}
..clLevel0{back ground-color:#ffffff; color:#115d95;
}
..clLevel0over{ background-color:#f0b319; color:#000080;
cursor:pointer; }
..clLevel0borde r{display: inline; position:absolu te; visibility:hidd en;
background-color:#ffffff; }
/*Styles for level 1*/
..clLevel1, .clLevel1over{c lear: both; display: inline;
position:absolu te; padding:0px; font-family:arial,he lvetica; font-size:
8pt; font-weight:bold; padding-bottom: 5px;
}
..clLevel1{back ground-color:yellow; color:#115d95; }
..clLevel1over{ background-color:#115d95; color:#f0b319;
cursor:pointer; }
..clLevel1borde r{position:abso lute; visibility:hidd en; background-
color:#f0b319;}
..clLevel1botto m, .clLevel1bottom over{position:a bsolute; padding:0px;
background-color:#fdf7e8;
background-image: url(images/pulldown-bottom.gif);
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<table width="780">
<tr>
<td>
<div style="position : relative; text-align: left;">
<script type="text/javascript"</script>
<div style="z-index: 2; clip: rect(0px, 65px, 24px, 0px); width: 65px;
height: 24px; left: 0px; top: 0px; visibility: visible;"
id="oCMenu_top0 _0" class="clLevel0 border">
<div style="z-index: 4; clip: rect(0px, 65px, 24px, 0px); width: 65px;
height: 24px; left: 0px; top: 0px;" id="oCMenu_top0 " class="clLevel0 ">
COMPANY </div>
</div>
<div style="overflow : hidden; z-index: 13; visibility: visible;
clip: rect(0px, 200px, 55px, 0px); width: 200px; height: 55px; left:
0px; top: 25px;" id="oCMenu_1_0 " class="clLevel1 border">
<div style="z-index: 15; left: 0px; top: 0px; clip: rect(0px, 200px,
20px, 0px); width: 198px; height: 20px; visibility: inherit;"
id="oCMenu_sub0 0" class="clLevel1 "Campus University Wide Link </div>
<div style="z-index: 16; left: 0px; top: 20px; clip: rect(0px,
200px, 20px, 0px); width: 198px; height: 20px; visibility: inherit;"
id="oCMenu_sub0 1" class="clLevel1 "Company2 </div>
<div style="z-index: 17; left: 0px; top: 40px; clip: rect(0px,
200px, 15px, 0px); width: 200px; height: 15px; visibility: inherit;"
id="oCMenu_sub0 2" class="clLevel1 bottom"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
</code>