Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post

    Unhappy center floating several divs?

    here's a tricky little CSS problem which has me scratching my head.
    I'm trying to float some div's in the center of the page. It works great in IE6 but I can't get it to work in firefox. Is there a bug in firefox?

    It works if I float the div's left but I want them centered.

    I could fix it by using tables but I was trying to make my site table free just for kicks.

    note that the following is the only page that this effect has been applied to so far.

    http://www.visualperception.net/imag...yAbstracts.php

    in firefox the thumb divs aren't rendered and only the images inside the divs show.

    any clues?

    thanks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    With "float to the center" do you mean align in the center? If so you'd use margin: auto;. The important part is that left and right margins are set to auto, so you can apply other top and bottom margin, e.g. margin: 20px auto; or margin: 10em auto 40cm auto;

    Oh and remove the XML declaration on top because this and any other stuff (like white space) before the actual doctype makes IE switch to quirks mode (as oppsed to "standards mode" at what it should be).

    But what is this?
    Code:
    <div id="xbst"></div>
    <div id="xbsr"></div>
    <div id="xbsb"></div>
    <div id="xbsl"></div>
    <div id="xbctl"></div>
    <div id="xbctr"></div>
    <div id="xbcbr"></div>
    <div id="xbcbl"></div>
    <div id="contain" class="contain">
     <div id="logo">
      <div id="xlsl"></div>
      <div id="xlsr"></div>
    You're doing something seriously wrong. Only use the elements you really need. And if you are using Dreamweaver's (or any other editor's) design mode then please check the source code before you publish as there is always something funny/unnecessary.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    thanks for the tip on quirks mode. removing the xml makes them work similar.

    problem is that it works better in quirks mode which doesn't solve my problem.

    Oh well, if no one knows, then I'll revert to float left cos using margin: 0 auto; doesn't do it when you are floating several inline divs to center.

    quirks mode is better!

    As for that code... it does what it does. try resizing your browser window!

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    fixed.

    methinks there's a bug in FF. No surprise there. So I had to fix it in long winded ways.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by percepts View Post
    thanks for the tip on quirks mode. removing the xml makes them work similar.

    problem is that it works better in quirks mode which doesn't solve my problem.

    Oh well, if no one knows, then I'll revert to float left cos using margin: 0 auto; doesn't do it when you are floating several inline divs to center.

    quirks mode is better!

    As for that code... it does what it does. try resizing your browser window!
    Uhm... I fear that you haven't understood the advantages of the whole CSS thing yet...

    #1: Quirks mode isn't better than standards mode. It's just good if you wanna serve browsers that don't understand modern web standards. But you can be sure that it will make it hard to get your website cross browser compliant.

    #2: What do you mean by "floating inline divs to center"?? There is no float: center; or a thing like that. Can you explain exactly how you want it to look like?

    #3: I'm still thinking you are doing something seriously wrong with all that redundant code because you don't need that if you know what you're doing. When I resize the page it stays as it is until I release my mouse button. There are a lot better ways to get the page flexible and go with the window size while you are resizing it.

    #4: If you have to fix an issue in Firefox the long winded way then I can certainly tell you that you are doing something wrong! You might not know it yet but Firefox is doing what you tell it to do. If IE is doing something presumably right then it doesn't mean anything. And if IE is dislaying an acceptable result but the other - better - browsers aren't then it's IE that is doing something wrong and just trying to make a sense of the bad code you write (while the other standards compliant browsers are just doing exactly what you tell them - if you tell them wrong, they do it wrong).

    The most basic advice for web developers: Always use a standards compliant browser (e.g. Opera, Safari, Firefox, Konqueror...) at first to test pages and then fix what IE is doing wrong.
    If you care for cross browser compatibility then the standards and standards compliant coding is the most important thing to do! And you won't achieve that with quirks mode (where every browser is interpreting code differently).

  • #6
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    so I what I want is to have 3 boxes (div's) which are spaced 20 pixels apart, which will be centered in the screen. If there is enough space, i.e. higher res screen, then I want 4 boxes (div's). They are 170px by 170px and contain thumbnail images. If there were 20 thumbnails on a page and 4 to a row there would be 5 rows. If there were 3 in a row there would be 7 rows. Always centered with 20px space between them horizontally and 20px vertically.

    quirks mode handles this. Firefox can't. Quirks mode can flow the boxes (div's) so that depending on available space there 2 or 3 or 4 or 5 or how ever many boxes centered in the containing div. Firefox can't.

    So instead of telling me there's something wrong with my page which validates as strict XHTML, show us you know what you are talking about and tell us how to do that in Firefox.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I think what Stephan is really getting at , is that the way IE is handling the situation is not the correct way. Reading what you want to do, you can't do it the "correct" way. I've tried and failed using several approaches.

    You can alway sdo something like text-align:center and IE will center EVERYTHING in the element that has that rule. It's wrong because that rule should only apply to text.

    You said your running XHTML Strict. If you weren't you could use the depricated <center> tag. W3C says:
    Differences Between HTML and XHTML

    The center element was deprecated in HTML 4.01.

    The center element is not supported in XHTML 1.0 Strict DTD.
    so im not sure if it wont work in xhtml strict or not. browsers still recognize the tag and it can be used to make what you want to do happen. Might not be th ebest way to go about it, and your going to have to check it in your doctype, but browsers will handle it fine.

    I am intrested in your "long winded" way though. I have tried to center the way your trying before and just let IE have it good and just floatedleft for all the other browsers. If you could show me some code maybe I could play with it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    There's a saying that "The law is an a-s-s". When the law's an a-s-s, quoting the law doesn't cut it for for me.

    I limited the no of thumbnails to three in a row and placed them in a floating container div which works fine. But I need a floating container div for each row which is wasteful and forces a predefined limit of x thumbnails for each row.

    There's other stuff going on to always position the column of rows centrally in the browser window if its wide enough, but thtas not the issue here.

    its fixed in my original link.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hmm, I almost got it... However, browsers are behaving very differently and unpredictably if I use display: inline-block;/display: -moz-inline-box;...
    Your problem is a really special one as far as styling with CSS goes and I guess you'll have to live with some kind of restriction or workaround at this time until browser support is area-wide.

  • #10
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thats a very long winded way of saying: I don't know.

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Well like I said earlier ( i was at work and not a lot of time to fiddle around). You can use <center> xhtml strict will toss a warning but it will still work. getting mozilla to play along takes an extra command for mozilla and a hack for IE PC. Checked on Opera and it likes display: inline-block. I know the underscore doesnt work for IE Mac but you should probally import your css in for legacy browsers anyways. You can run the page as XHTML transitional with no problems error wise.

    short example of what I thought you were after:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>art photo image visual perception</title>
    <style type="text/css">
    #content {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    }
    #content a {
    display: inline-block;
    display: -moz-inline-grid;
    _display: inline-block;
    width: 150px;
    height: 150px;
    margin: 10px;
    background: #ccc;
    }
    </style>
    </head>
    
    <body>
    <div id="content">
    <center>
    <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
    </center>
    </div>
    </body>
    </html>
    and looking at it it appears you do need:
    Code:
    display: inline-block;
    display: -moz-inline-grid;
    _display: inline-block;
    all 3 of those for them to play nice. IE, I guess, sees the -moz display and it overwrites then display and ignores it. so another _display is needed to overwrite the over writing.
    Last edited by harbingerOTV; 09-19-2006 at 12:47 AM. Reason: error checking
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>art photo image visual perception</title>
    <style type="text/css">
    #content {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    text-align: center;
    }
    #content a {
    display: inline-block;
    display: -moz-inline-grid;
    _display: inline-block;
    width: 150px;
    height: 150px;
    margin: 10px;
    background: #ccc;
    }
    </style>
    </head>
    <body>
    <div id="content">
    <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
    </div>
    </body>
    </html>
    if you use A's like I did earlier you can just text-align the div to center. thus avoiding the center tag all together. then you can put spans in the A's for the hover effects. Its now XHTML Strict compliant.

    Edit: Thanks for asking this. my fiddling solved a problem I had some 2 years ago and just left it alone. Now I know how to get around the issue
    Last edited by harbingerOTV; 09-19-2006 at 12:55 AM. Reason: kudos of sorts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks harbinger. You're a star. I haven't tried it yet cos I need sleep but I will tomorrow.


  •  

    Posting Permissions

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