Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > css border clipping differently in ff and ie

Reply
Thread Tools

css border clipping differently in ff and ie

 
 
eggsurplus
Guest
Posts: n/a
 
      04-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;
cursorointer; }
..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;
cursorointer; }
..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>

 
Reply With Quote
 
 
 
 
Ed Seedhouse
Guest
Posts: n/a
 
      04-26-2007
On 26 Apr 2007 06:03:49 -0700, eggsurplus <(E-Mail Removed)> wrote:

>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?
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      04-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).

 
Reply With Quote
 
Neo Geshel
Guest
Posts: n/a
 
      04-26-2007
eggsurplus wrote:
> 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=extern...ent=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).
************************************************** *******************
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
border-color: #003366; border-width: 2px; =?UTF-8?B?TWFydGluIFDDtnBwaW5n?= HTML 64 07-30-2006 04:01 PM
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
IE clipping rectangle differently than Mozilla tshad Javascript 1 03-24-2005 07:14 AM
Datagrid Border showing when I say no border tshad ASP .Net 0 01-31-2005 05:40 PM



Advertisments