SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floated divs require refresh of page, sometimes

    Hi all,

    I am experiencing an odd issue with some floated divs. It's odd because sometimes it looks fine, and other times it doesn't. If it looks wrong and I hit refresh though, it usually corrects it, but not always. I've never had a css issue that was so fickle, and changed with a refresh of the page. Also it seems to be worse in Google Chrome, requiring multiple refreshes were Safari typically one does the trick. Anyway the divs should be gridded out over the video 4x3, but its mostly one long column. I hope this makes sense, and you guys experience the issue, because it is possible that the page will load up fine for you, I don't know. Below is a link to the page and its CSS. Thank you very much for any help!

    note: video on page will not load in firefox yet, so please use chrome or safari to see what I'm talking about.

    http://www.robpizzolato.com/twin/nine/projects.html

    http://www.robpizzolato.com/twin/nine/bigstyle.css

    Again, any help is greatly appreciated. Cheers

    -Rob

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    There's three things I would look at here:

    First add the closing bracket to the html element as you neve know what effect broken tags will have

    Secondly add the correct width and height attributes to all your images in the html so that the browser allocates the space correctly.

    Code:
    <img src="images/thumbs/sexy.gif" width="274" height="141" alt="" >
    Lastly and which I suspect is the real issue is that stupid html5 technique of letting anchor tags wrap block elements. This always causes trouble and I've seen it upset a number of pages and IE usually hates it.

    Code:
    <a href="courgage.html">
    				<div class="cellmate">
    						<div class="thumb"><img src="images/thumbs/courage.gif"></div>
    						<h3>Courage Awards</h3>
    				</div>
    				</a>
    I would add a class to all those anchors and give them a width and height and then float them also. This will stop them being empty elements in the html because its children have flown the coup.

    If none of the above works we will have to think again

    (As an afterthought because I didn't check I assume all your measurements are adding up exactly also including borders.)

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    that's the ticket!

    Paul,

    Thanks a ton for your help. I'm embarrassed about that unclosed html tag :X. Fixed that, and then added the width and height to the thumbnails, and was still experiencing the issue. Finally I did what you suggested about defining and floating the anchors and that did it! You're brilliant, thank you kind sir!

    Cheers,
    Rob


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
  •