Safari + Firefox: OK, Chrome: WTF?

HTML & CSS
1

Hi guys, i’m new here.

I’m just having a hard time figuring out a weird problem I have across different browsers.

My website is here:
CLICK

I programmed it about a year and a half ago and didn’t really test it out on browsers other than Firefox and Safari.

Now it turns out that I hate both browsers and switched to Chrome.

Well, the irony is that my website doesn’t really work with Chrome as I get the following page as soon as I land on it:

Check out all the space it leaves on the right…

I’m using a layout based on “floats”, so all thumbnail classes float to the next row, according to window size. This has worked perfectly in both Firefox and Safari, but on Chrome it just doesn’t work.

Any clues as to what it could be?

Thanks so much!
D

2

C’mon Alex, play ball! If we tell the OP it looks terrible, the motivation will be greater to clean up all the mess! :lol:

3

Perhaps the issue is in the version of Chrome you’re using then. My advice would be upgrade and see if the problem persists, because unlike IE, VERY few Chrome users fail to keep their versions up-to-date. If the issue is a rendering fault in early versions of Chrome, it’s not worth trying to hack and patch your way around it. :slight_smile:

4

I have tried it again and I still don’t get any issues. :slight_smile:

5

The first time I checked, it was fine, but as the OP said, try again and the trouble starts…

6

I’ve checked and I’m not getting any issues whatsoever (I’m using Chrome 6.0).

But yikes, your code is really bad (as is the impossibly small navigation menu). :slight_smile:

7

try hitting refresh though…

8

Usually Chrome and Safari will behave in the same way, as they use the same engine.

I just tested the site in Chrome and it looked fine. See screen shot attached below.

9

Hey guys,
thanks so much for the advice and pointers.

I’m using a somewhat outdated version of Chrome and the issue persists.

Yes, I need to clean up my code quite a bit (and change that damn nav bar!)

The thing is that I wasn’t aware that you couldn’t use <a> tags for divs. Dunno if that’s the real issue there that’s making the entire thing collapse on refresh, but I should get that covered.

What do you guys recommend me to do instead of using <a> for the divs?
I’ve assigned a rollover function for the “thumbnail” class.

Thanks again so much for your help, you guys are awesome!!!

10

OK, I think the problem is that the page has a lot of serious coding errors (sorry to be blunt). First thing I notice is that you have block elements (divs) nested inside <a> (inline) elements… which is not good. But there are other problems like unclosed elements, meta tags in the wrong place etc.

Just checking the HTML in the validator produces 164 errors, so you need to clean these up before doing anything else.