SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Location
    PA, US
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question centering items for both Firefox and IE ?

    My site is really coming along now, I'm really just having issues centering my images, tables and such in my fixed-width page..

    I'm using this work-around to get my pages to be centered in Firefox and IE:

    body{
    ....
    text-align:center;
    .....}

    and using a class

    .central:{
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 100%;
    text-align: left;}

    Now I just can't seem to do anything to center items on that page!

    ( http://www.randywehrs.com/newsite2/science.htm )
    ( http://www.randywehrs.com/newsite2/rw.css )

    Can anyone offer any hints or suggestions? Thanks!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For block elements just using margin:auto with a width less than 100% should work provided IE is in standards mode rather than quirks mode. Just apply to the elements you want to have centered.

    For text just using text-align:center will work. Just apply to the elements that contain the text.

    The most likely reason for it not working in IE is a missing doctype.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Location
    PA, US
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks for the response, seems ive overlooked declaring a class or 2 and switching some IDs..

    This brings me to a new problem.. i have some objects on the page, and no matter how i declare them, they won't center... im using the below declaration to center my table and image, but it won't center my objects.

    .center {
    margin:auto;
    text-align:center;
    }

    I have my body set as text-align:center; so that IE will show my fixed-width block in the middle of the page. Since i want my text to align left, am using a class:

    .central { /* different than .center */
    margin: auto;
    position: relative; /*I need to use position: relative for my header.*/
    text-align: LEFT;
    }

    so it seems my objects are obeying the .central class of my #content div, but not my .center class that i declare on my images, tables and objects.

    How can I get these objects to center!? any ideas?

    ( http://www.randywehrs.com/newsite2/science.htm )
    ( http://www.randywehrs.com/newsite2/rw.css )

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, if you want IE to centre things in a compliant way, you have to use a full and valid doctype - not the shortened version you have at the moment. Text-align:center on the body is not needed then.

    Auto side margin centering only works for block level elements that have a defined width, not for inline elements such as images (which will normally be centered with text-align:center on their containers). To centre inline elements using auto side margins, set their display property to block.

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Location
    PA, US
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to be such a noob, how do i know which doctype to use?

    even using sitepoint books as reference, its not clear which is the appropriate doctype. what i have currently is the default dreamweaver doctype, and after trying all of the suggested doctypes from designing without tables, my design appears better with the default dreamweaver doctype.

    with all these 'new' doctypes, im getting not-so-funny height and footer reactions, especially in IE, when expanding and contracting my window. And an image that i have locked to the bottom right of my browser with position:absolute;bottom:0;right:0; doesnt stay at the bottom right..

    i know theres no easy way of doing this, but is there a method that isnt grad-level CSS yet? not being sarcastic, should i be still sticking with tables? is there no intuitive CSS design? what am i missing?

    i appreciate anyones input

    ( http://www.randywehrs.com )
    ( http://www.randywehrs.com/rw.css )

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The most appropriate doctype to use for new pages is html 4.01 strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Always code for the version of html - not try and pick a version to suit coding errors. If the coding is sound, then only minor adjustments will be needed for IE.

    You have a number of validation errors, most of which are to do with the flash movie - suggest you Google "swfobject" for a compliant way of implementing flash.


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
  •