Advanced Search

Results 1 to 4 of 4

Thread: Border not displaying correctly in FF

  1. #1
    Join Date
    Jul 2005
    Posts
    101
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Border not displaying correctly in FF

    I'm experimenting with CSS positioning and right at the outset have a problem with FF which is not displaying the border correctly. Any help appreciated.

    CSS

    #container {
    width: 97%;
    border: 1px solid gray;
    margin: 0;
    }

    .company {
    float: left;
    width: 75%;
    border: 1px solid red;
    margin: 0;
    }

    .company h1 {
    font-weight: bold;
    font-size: 120%;
    margin: 0;
    }

    .companyname {
    width: 68%;
    float: left;
    border: 1px solid green;
    margin: 0;
    }

    .email {
    width: 15%;
    float: right;
    border: 1px solid blue;
    margin: 0;
    }

    .logo {
    width: 15%;
    float: left;
    margin: 0;
    border: 0;
    }



    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" type="text/css" href="company.css" class="sitestyles" />
    </head>
    <body>
    <div id="container">
    <div class="company">

    <div class="logo">

    logo
    </div> <!-- logo -->

    <div class="companyname">

    <h1>company</h1>
    </div> <!-- company name -->
    <div class="email">

    email
    </div> <!-- email -->

    </div> <!-- company -->


    </div> <!-- container -->

    </body>
    </html>
    Cheers
    Billy

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You can add a height attribute. For example, this will put the border around the whole page:

    #container {
    width: 97%;
    height: 100%;
    border: 1px solid gray;
    margin: 0;
    }

    Or you can set the height to the correct pixel size for your logo, etc.

    The border will also display correctly in FF if you add content under the logo/name/email header. (which I assume you will be?) It will adjust to the height of the content.

    You would need to add at the end of your html (new stuff in red)

    </div> <!-- company -->

    <div style="clear:both"></div>
    your content here


    </div> <!-- container -->

  3. #3
    Join Date
    Jul 2005
    Posts
    101
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks Veronica,

    Adding height to container and adding content to logo etc did not work but adding the break div solved the problem.

    Only thing is I cannot see any logical reason why - is it a bug in FF (ver 2.0.0.3)
    Cheers
    Billy

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by wkenny View Post
    Only thing is I cannot see any logical reason why - is it a bug in FF (ver 2.0.0.3)
    Then I suggest you read the CSS specification. Once you understand how floats work, it should be obvious. As a quick overview, floated elements are removed from the flow of rendered elements, only affecting the rendering of line boxes (a CSS concept). As floats have no vertical size, as least as far as any containing block is concerned, the latter will normally be much shorter than the combined height of its descendent elements.
    Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •