css border clipping differently in ff and ie

E

eggsurplus

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.

<pre>
<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>
</pre>
 
E

Ed Seedhouse

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.
Click to expand...

Start by learning how to write html. What you posted is not html, so
how can you expect a browser to interpret it?
 
A

Andy Dingley

[eggsurplus]

Don't multi-post. Cross-post if you have to, but even that was
doubtful.

Web search or read the group first. This was an FAQ.

Don't post fragments to this newsgroup, post a web URL instead.

Take the <pre> and <code> out from around your HTML. They have no
place being there.

Use a doctype declaration

Use strict rendering mode, not quirks mode (search on those terms).
 
N

Neo Geshel

eggsurplus said:
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.
Click to expand...

To the comments made by others, I would also add: look into external
style sheets
(http://www.google.ca/search?q=exter...s=org.mozilla:en-US:official&client=firefox-a),
or (if this is an experimental stage with just one web page) try placing
your CSS into a style element inside the head element. Then, once you
get the design down pat and want to extend it to an entire site, move
the CSS into an external file.

Cheers.
...Geshel
--
*********************************************************************
My return e-mail address is an automatically monitored spam honeypot.
Do not send e-mail there unless you wish to be reported as a spammer.
Please send all e-mail to my first name at my last name dot org, with
a subject-line of “NEWSGROUP REPLY FOR NEO GESHEL†(all uppercase).
*********************************************************************
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Help with Visual Lightbox: Scripts 2
Help with my responsive home page 2
Working on mobile css menu with plenty of frustration! 2
Dropdown menu in a fixed navbar 2
I am trying to detect Which image id="" was clicked ? 22
I need help fixing my website 2
Positioning CSS components 1

Members online

No members online now.
Total: 72 (members: 0, guests: 72)
Robots: 100

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top