Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Hi guys.

    Bit of a problem. Mostly due to the fact that I'm a bit of a n00b at this so be patient with me.

    All it is, I'm creating sites in XHTML using CSS for my layout.

    there are 5 named divs:
    #container
    #header
    #menu
    #content
    #footer

    I'm positioning the container relatively and all others within it are positioned absolutely.

    The problem I've got is when i put any content into any of them in tags:
    <li>
    <p>
    <h1>, <h2>...etc

    In IE they display just fine and the first line of text is at the very top of the div where my CSS dictates it should be (taking into account margins and padding). However, when I view it in FF I get what appears to be an extra (empty) line before the text starts. This blows big time as it knocks all my menus and other sensetively positioned elements out by one line.

    Have any of you seen anything like this before?

    Cheers guys

    Dan
    No ma'am, we in IT don't have a sense of humor we're aware of.

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    A link would be nice
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    It's not live yet so no link.

    I could post the Style sheet if you like..?

    XHTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="Styles/pugh_concept.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <div id="header">
    </div>
    <div id="menu">:: <a href="#">HOME</a> :: <a href="#">ABOUT US</a> :: <a href="#">LOCATIONS</a> :: <a href="#">CONTACT</a> :: <a href="#">INFO</a> :: <a href="#">EMPLOYMENT</a> ::</div>
    <div id="content">
    <h1>Welcome to Charles Pugh (Glass) Ltd.</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    </div>
    <div id="content2">
    <div id="menu1">
    <p>Option 1</p>
    <p>Option 2</p>
    <p>Option 3</p>
    </div>
    </div>
    <div id="content3">
    <div id="validXHTML"><a href="http://validator.w3.org/"><img src="Images/valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" /></a>
    </div>
    <div id="validCSS"><a href="http://jigsaw.w3.org/css-validator/"><img src="Images/valid-css.png" alt="Valid CSS" width="88" height="31" border="0" /></a>
    </div>
    </div>
    <div id="footer"><p>Copyright 2006 Charles Pugh (Glass) Ltd. | XHTML 1.0 | CSS</p></div>
    </div>
    </body>
    </html>

    CSS:

    #container {
    left: 0px;
    padding: 0px;
    position: relative;
    top: 0px;
    width: 800px;
    }

    #header {
    background-image: url(../images/pughHeader.JPG);
    background-repeat: no-repeat;
    height: 225px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 800px;
    }

    #menu {
    background-color: #ffffff;
    border-bottom-style: dotted;
    border-color: #c0c0c0;
    border-top-style: dotted;
    border-width: 1px;
    height: 25px;
    left: 0px;
    position: absolute;
    text-indent: 5px;
    top: 227px;
    vertical-align: top;
    width: 800px;
    }

    #content {
    border-color: #c0c0c0;
    border-width: 1px;
    height: 495px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    position: absolute;
    right: 0px;
    top: 254px;
    width: 606px;
    }

    #content2 {
    background-image: url(../images/menu2.gif);
    background-repeat: no-repeat;
    height: 284px;
    left: 3px;
    padding: 8px;
    position: absolute;
    top: 259px;
    width: 154px;
    }

    #content3 {
    background-image: url(../images/menu3.gif);
    background-repeat: no-repeat;
    height: 150px;
    left: 3px;
    position: absolute;
    top: 561px;
    width: 170px;
    }

    #footer {
    border-bottom-style: dotted;
    border-color: #c0c0c0;
    border-top-style: dotted;
    border-width: 1px;
    color: #808080;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-size: small;
    height: 30px;
    left: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 752px;
    width: 800px;
    }

    a:link {
    color: #000000;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-weight: bold;
    text-decoration: none;
    }

    a:visited {
    color: #000000;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-weight: bold;
    text-decoration: none;
    }

    a:hover, a:active {
    color: #ec9900;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-weight: bold;
    text-decoration: none;
    }

    body {
    margin: 0px;
    }

    h1 {
    color: #000000;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-size: medium;
    font-weight: bold;
    vertical-align: top;
    }

    p {
    color: #000000;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    font-size: small;
    text-decoration: none;
    }

    #validCSS {
    height: 31px;
    left: 40px;
    position: absolute;
    top: 30px;
    width: 88px;
    }

    #validXHTML {
    color: #808080;
    font-family: "Trebuchet MS", Arial, "MS Sans Serif";
    height: 31px;
    left: 40px;
    position: absolute;
    text-decoration: none;
    top: 80px;
    width: 88px;
    }

    No ma'am, we in IT don't have a sense of humor we're aware of.

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    The whole code then ... css and html
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    See above post (edited)
    No ma'am, we in IT don't have a sense of humor we're aware of.

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    I would suggest not to use positioning ... you don't really need it in this design.

    Floats are all you need to display your menu and content side by side.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Sorry, I think you may have mis-understood me.

    It's not the positioning of the divs, it's the positioning of the text within them that is driving me up the wall.

    anything within a <p>, <li>, or <h*> tag is appearing one line too low in FF.

    I have seen pages get around this problem though so I think it's something do do with my CSS.
    No ma'am, we in IT don't have a sense of humor we're aware of.

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Have you tried removing the padding-top: 5px from #content

    And also with #content2

    That seems to work here

    There's so much you can do with positioning pixel perfect as not all browsers interprets pixels the same height or witdth.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Yeah I've done that.

    It doesn't seem to be anything to do with Pixel perfect measurements. It seems like FF is interpreting the tags slightly differently.

    If I use no tags what so ever, it displays at the correct level. When I mark it up... it gets knocked down one line.
    No ma'am, we in IT don't have a sense of humor we're aware of.

  11. #10
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Can I post images on here? if so I can show you some screen shots of what I'm seeing.
    No ma'am, we in IT don't have a sense of humor we're aware of.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:37 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com