CSS corner question

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ruud.hermans@gmail.com
    #1

    CSS corner question

    Hi all,

    I'm having some issue displaying a "corner image" in FireFox.
    I'd like to have a rounded left-top and right-bottom corner on my
    website.
    In IE, my code seems to work just fine, but FF puts image I use for
    the right-bottom almost at the top of the page.

    The website address is http://www.hermansict.nl/test/.

    Here's the code:

    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-
    8859-1">
    <link rel="stylesheet " type="text/css" href="css/style.css" />
    <title>Herman s ICT</title>
    </head>
    <body>
    <div class="containe r">
    <div class="boven">
    <div class="tlhoek">
    </div>
    <p>
    Deze website is nog in ontwikkeling.
    </p>
    </div>
    <div class="links">
    </div>
    <div class="midden">
    </div>
    <div class="rechts">
    </div>
    <div class="onder">
    <p class="disclaim er">
    <a href="#">Discla imer</a>
    </p>
    </div>
    <div class="brhoek">
    </div>
    </div>
    </body>
    </html>

    CSS

    body {
    text-align: center;
    font-family: Arial;
    color: #000000;
    background-color: #999999;
    padding: 0;
    margin: 0;
    }

    p {
    margin: 0px;
    }

    p.disclaimer {
    font-size: 60%;
    }

    div.boven p {
    margin: 15px auto;
    }

    div.container {
    width: 780px;
    height: 600px;
    top: 40px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    }

    div.boven {
    height: 60px;
    width: 100%;
    float: left;
    }

    div.tlhoek {
    height: 10px;
    width: 100%;
    background: url(../img/tl.gif) no-repeat top left;
    }

    div.links {
    text-align: left;
    height: 500px;
    width: 15%;
    float: left;
    }

    div.midden {
    text-align: left;
    height: 500px;
    width: 60%;
    float: left;
    }

    div.rechts {
    text-align: left;
    height: 500px;
    width: 25%;
    float: left;
    }

    div.onder {
    height: 30px;
    width: 100%;
    }

    div.brhoek {
    height: 10px;
    width: 780;
    background: url(../img/br.gif) no-repeat top right;
    }

    I've been adjusting borders, marins, padding, etc. for days now, but
    I don't seem to get by this obstacle.
    Any advice would be appreciated! Thanks in advance!

    Ruud


    --
    --------------------------------- --- -- -
    Posted with NewsLeecher v3.8 Beta 3
    Web @ http://www.newsleecher.com/?usenet
    ------------------- ----- ---- -- -


    Tags: None
    • Gus Richter
      #2
      Re: CSS corner question

      ruud.hermans@gm ail.com wrote:
      Hi all,
      >
      I'm having some issue displaying a "corner image" in FireFox.
      I'd like to have a rounded left-top and right-bottom corner on my
      website.
      In IE, my code seems to work just fine, but FF puts image I use for
      the right-bottom almost at the top of the page.
      >
      The website address is http://www.hermansict.nl/test/.
      Everything is floated except for "container" - this page needs redesigning.

      The footer "onder" is also floated and your right bottom background
      image is placed there in that DIV within which the Disclaimer anchor
      would have gone if there were room for it.

      The content of the footer "onder" (Disclaimer anchor) does not fit in
      the line, so it looks for the next area down where it will fit, which
      happens to be below the "links", "midden" and "rechts" DIVs and outside
      of the "onder" box.

      --
      Gus

        Comment

        • ruud.hermans@gmail.com
          #3
          Re: CSS corner question

          Thanks a bunch for your reply Gus!
          I'll have another good look at it today.

          Ruud


          --
          --------------------------------- --- -- -
          Posted with NewsLeecher v3.8 Beta 3
          Web @ http://www.newsleecher.com/?usenet
          ------------------- ----- ---- -- -


            Comment

            Previous template Next
            Working...