css border clipping differently in ff and ie

eggsurplus · Apr 26, 2007

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

ointer; }
..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

ointer; }
..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>

Ed Seedhouse · Apr 26, 2007

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.

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

Andy Dingley · Apr 26, 2007

[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).

Neo Geshel · Apr 26, 2007

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.

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).
*********************************************************************

Interfering CSS	1	Feb 9, 2024
Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
I need help fixing my website	2	Oct 15, 2023
Positioning CSS components	1	Nov 16, 2023
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022

css border clipping differently in ff and ie

eggsurplus

Ed Seedhouse

Andy Dingley

Neo Geshel

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads