Floated divs require refresh of page, sometimes

HTML & CSS
1

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

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.


<img src="images/thumbs/sexy.gif" [B]width="274" height="141"[/B] 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.


[B]<a href="courgage.html">[/B]
				<div class="cellmate">
						<div class="thumb"><img src="images/thumbs/courage.gif"></div>
						<h3>Courage Awards</h3>
				</div>
				[B]</a>[/B]

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 :slight_smile:

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

3

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 :slight_smile: