SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Table breaks from page reloading

    Hi,

    I have found a very strange bug in my css layout.

    I have a 3 x 3 products table. The styling is really simple, just 9 list items, styled as
    Code:
    display:block, float: left; width: 32%
    Everything works perfectly across all modern browsers.

    However, I have been experiencing a strange bug. Every now and then the 3x3 table breaks.

    Here is the image:

    Screen Shot 2012-03-17 at 10.27.19 PM.png

    List item 7 is the white watch, 8 is the blue watch and 9 is the golden watch.

    Sometimes this appears between the 1st and 2nd rows, and sometimes it appears between the 2nd and 3rd rows. More so, sometimes everything loads fine, without the break.

    I have reproduced this bug on Safari and Mozilla, so I'm guessing this is a gecko related bug. More so, this never happens when I F5 the page. So I get the feeling this happens when the browser starts pulling files from its cache.

    Any ideas on what is going on here and how to fix this?
    Content Writing Service - Get custom SEO articles for 10$

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Safari is webkit I believe .

    Do you have a website where we can take a look at this? Even with the screenshot (which isn't approved yet, and doubtfully ever will. I never see attachments approved anymore), I doubt that'll be enough to help us recreate the problem.

    At the very least we need the full HTML and CSS so we can recreate the problem ourselves .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    % widths are a headache and a half because they do weird out sometimes, though I'm hoping this:

    display:block, float: left; width: 32%

    ... is a typo, since first, commas can't separate properties, and second there is no reason to ever say display:block on a float, since they are inherently so. The only reason to state display on a float is for :inline, and that's JUST to trip a rendering bug in IE that actually fixes the broken margin behavior -- where IE will stack or even double facing floats..

    Though as Ryan said, we'd have to see the site in question to weigh in -- though it SOUNDS like you might have a fixed layout, which is accessibility rubbish, or a fluid layout in which case the floats will still expand to what's inside them, so if you have a image or single word longer than it wants to collapse, your floats will stack too big and bust onto the next line.

    Honestly, I'd probably use inline-block, let natural spacing do it's job so it's NOT a fixed width table.... since fixed widths are broken inaccessible trash and a complete/miserable /fail/ at web design.

    Though again -- wild guess pulling a conclusion out of my rump; would have to see the actual page and it's full code to say for sure.

  4. #4
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't notice that the attachment was pending approval, since I could see it from my account. Sorry about that.

    The page in question is here: http://www.replicaster.com

    There was a typo up in my first post. That comma is not present in the actual code. And I meant webkit. Sorry

    I have changed the code right now to display:inline-block;width:32%

    The trick was to also give the encapsulating UL a text-align:justify;width:100%

    That got the table completely filling the fluid width layout.

    However it does seem to break at small resolutions.
    Content Writing Service - Get custom SEO articles for 10$

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I never see attachments approved anymore
    Just flag it if we've missed it.

    Quote Originally Posted by dragonfly_7456 View Post
    I have changed the code right now to display:inline-block;width:32%
    ... However it does seem to break at small resolutions.
    By the looks of you screen shot, the boxes were snagging because of unequal heights. inline-block fixes that.

    One of you columns drops in some browsers on narrow screens because of your padding. Mixing fixed-width padding with % widths is dangerous, because there's always the risk that the total width of the boxes will exceed the available container width as some screen sizes.

  6. #6
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Mixing fixed-width padding with % widths is dangerous, because there's always the risk that the total width of the boxes will exceed the available container width as some screen sizes.
    Oh, I see. So I should use % padding in a fluid table? Never occurred to me that this could be risky!
    Content Writing Service - Get custom SEO articles for 10$

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dragonfly_7456 View Post
    Oh, I see. So I should use % padding in a fluid table? Never occurred to me that this could be risky!
    unfortunately no, because % on padding is based on font size, NOT element width.

    Inline-block also has white-space between them, and since you shouldn't be using px metric fonts declaring % width can break when the font auto enlarges.

    Which is why multiple % widths going across on content elements is usually rubbish. "Not viable web design" -- even though you see people TRYING to do it all the time (and why it's broken on my machine ALL the time!)

    As to mixing width and padding, usually the solution is to margin or pad the child elements instead of padding the parent.


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
  •