css border clipping differently in ff and ie

Discussion in 'HTML' started by eggsurplus, Apr 26, 2007.

  1. eggsurplus

    eggsurplus Guest

    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>
    eggsurplus, Apr 26, 2007
    #1
    1. Advertising

  2. eggsurplus

    Ed Seedhouse Guest

    On 26 Apr 2007 06:03:49 -0700, 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.


    Start by learning how to write html. What you posted is not html, so
    how can you expect a browser to interpret it?
    Ed Seedhouse, Apr 26, 2007
    #2
    1. Advertising

  3. eggsurplus

    Andy Dingley Guest

    > [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).
    Andy Dingley, Apr 26, 2007
    #3
  4. eggsurplus

    Neo Geshel Guest

    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=exter...=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).
    *********************************************************************
    Neo Geshel, Apr 26, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,243
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,332
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    686
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,490
    Adrienne Boswell
    Jul 30, 2006
  5. tshad
    Replies:
    1
    Views:
    102
Loading...

Share This Page