Results 1 to 5 of 5

Thread: Aligning DIV block not correctly in Firefox

  1. #1
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default Aligning DIV block not correctly in Firefox

    I am facing some alignment problem that I've performed on some div blocks in Firefox (my version is 2.0.0.1).

    My CSS code is as follows

    Code:
    div#topMain {width:776px;background-color: #804000; border: 2px solid #804000;}
    
    div#topMainOne {width:776px;background-color: #804000; border: 2px solid #804000; height:18px;}
    		
    #logged{width: 340px; color: white; font-family: verdana; font-size: 11px; display: inline;margin-left: auto;}
    #logged span {color: #F9E700; font-family: verdana; font-size: 11px;font-weight:bold;}
    		
    #insertComment {width: 235px; color: white; font-family: verdana; font-size: 11px;display: inline;font-weight:bold;margin-left: auto;}
    		
    #closeComment {width: 190px; color: white; font-family: verdana; font-size: 11px;font-weight:bold;display: inline;margin-left: auto;}
    #closeComment a {color: white; font-family: verdana; font-size: 11px; font-weight:bold; text-decoration: none;}
    #closeComment a:hover {color: #F9E700; font-family: verdana; font-size: 11px; font-weight:bold; text-decoration: underline;}
    The HTML code I've used is as follows on which I've used the above mentioned CSS code.

    Code:
    <div id="topMain">
    <div id="topMainOne">
    <div id="logged" align="left">You are logged as <span>Jayaprakash Valappil</span></div>
    <div id="insertComment" align="center"><em>...Insert your commments...</em></div>
    <div id="closeComment" align="right">
    | <a href="javascript: alert('Action yet to implement');"> Action</a>&nbsp; | <a href="javascript: alert('Help yet to implement');"> ?</a>&nbsp; | <a href="javascript: showHide(0);"><img src="images/closeAddComment.gif" width="15" border="0" align="absmiddle" alt=""></a>
    </div>
    </div>
    </div>
    I want to the div blocks with the alignment that I mentioned inside the <div>'s align attribute.

    In IE (7) it displays correctly but in Firefox everything is left aligned.

    Why it is so?

  2. #2
    Join Date
    Jul 2006
    Location
    Graham, NC
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Why not just add a text-align statement to your CSS for the respective id?

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    The align attribute is deprecated presentational HTML. Use text-align or margin instead, as appropriate.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by Twey View Post
    The align attribute is deprecated presentational HTML. Use text-align or margin instead, as appropriate.

    I've used text-align property after my forums posting in my CSS but no use.

    But in my case i've solved this issue with absolute positioning. I still wonder whether there is another option for aligning DIV blocks..

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You must define a width, then margin:0 auto; will center that width within its container:

    HTML Code:
    <div id="container" style="width:300px;">
    <img src="some.jpg" style="width:200px;height:100px;margin:0 auto;">
    </div>
    This works as well with divisions as with images.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •