www.webdeveloper.com
Results 1 to 6 of 6

Thread: centering in css and html

  1. #1
    Join Date
    Dec 2002
    Posts
    213

    Thumbs down centering in css and html

    Hi
    I have a project and have to center the html, with adding in-line css, adding images to the same folder as the htm file.
    I have done all this, but the result comes different in firefox. It comes alright in Chrome and Safari.
    I have uploaded the site at:
    http://www.des-us.com/projects/tampacolleen/, with the edits. The original file is at http://www.des-us.com/projects/tampacolleen/orig.
    Please check out both htm files, and let me know what I can do to correct it in firefox.
    Thanks

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    Centering:

    Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

    Code:
    body {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    Example as a Class:

    Code:
    .selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for Class:
    Code:
    <div class="selector_name">Content here</div>
    Example as an ID:

    Code:
    #selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for Class:
    Code:
    <div id="selector_name">Content here</div>
    Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

    Errors on both pages.

    Validating:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

  3. #3
    Join Date
    Dec 2002
    Posts
    213
    Hi
    thanks for the reply. I am more concerned with the white spaces appearing in firefox.
    thanks

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    I removed height:1051px; from the table and top gap was removed.

    Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
    Why tables for layout is stupid: http://www.hotdesign.com/seybold/
    How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/ho...tml-tables-css
    Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

  5. #5
    Join Date
    Dec 2002
    Posts
    213
    Hi
    The issue I have is the white lines and spaces appearing in firefox, in the design below the header.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    I give up. You haven't even tried to make changes, but keep replying with same thing. I'm not going to re-code the entire page for you. You should make the changes and correct the CSS/HTML coding errors to make sure that none of them are causing your problem. Once you've done this, let me know and I'll take another look.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles