|
Posted by eggsurplus on April 26, 2007, 9:07 am
Please log in for more thread options
<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,.clLevel0over{display: inline; position:absolute;
padding-right: 4px;
padding-bottom: 0px;
padding-top: 6px;
font-family:arial,helvetica; font-size:8pt; font-weight:bold;
border-bottom: 0px solid #f0b319;}
.clLevel0{background-color:#ffffff; color:#115d95;
}
.clLevel0over{background-color:#f0b319; color:#000080;
cursor:pointer; }
.clLevel0border{display: inline; position:absolute; visibility:hidden;
background-color:#ffffff; }
/*Styles for level 1*/
.clLevel1, .clLevel1over{clear: both; display: inline;
position:absolute; padding:0px; font-family:arial,helvetica; font-size:
8pt; font-weight:bold; padding-bottom: 5px;
}
.clLevel1{background-color:yellow; color:#115d95; }
.clLevel1over{background-color:#115d95; color:#f0b319;
cursor:pointer; }
.clLevel1border{position:absolute; visibility:hidden; background-
color:#f0b319;}
.clLevel1bottom, .clLevel1bottomover{position:absolute; 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="clLevel0border">
<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="clLevel1border">
<div style="z-index: 15; left: 0px; top: 0px; clip: rect(0px, 200px,
20px, 0px); width: 198px; height: 20px; visibility: inherit;"
id="oCMenu_sub00" 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_sub01" 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_sub02" class="clLevel1bottom"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
</code>
|
| Similar Threads | Posted | | Text clipping. How can I fix this? | February 5, 2006, 5:21 pm |
| image clipping problem | May 26, 2006, 9:51 am |
| How can I force clipping of text in a table cell? | October 18, 2004, 8:49 am |
| Different browsers render differently | October 26, 2004, 4:50 pm |
| Why is my page displayed differently on Mac vs. PC browsers? | February 24, 2006, 9:50 pm |
| Elementary code behaves differently in Mozilla & IE | November 16, 2004, 8:46 pm |
| Webpage renders differently when loaded from Internet | February 4, 2007, 4:39 pm |
| Basic image alignment using tables displays differently in browsers | September 2, 2006, 5:37 pm |
| Table border (outside only) | August 6, 2004, 8:16 am |
| Help pls, mystery border | February 12, 2005, 12:06 pm |
|
XML Sitemap