3 replies [Last post]
Last seen: 4 years 42 weeks ago
Timezone: GMT-6
Joined: 2004-03-06
Posts: 17
Points: 9

Hello everyone!

I'm having a bit of a strange issue related to Google Chrome. I've used a certain technique for displaying thumbnails on pages of my website for years. Worked great...at least until Google Chrome arrived on the scene. Here's the CSS (http://www.mapformation.com/templates/css/main.css):

ul#gallery, #gallery ul{list-style-type: none; margin: 0px; width: 100%; padding: 0px;}
ul#gallery li{float: left; padding: 0px; margin: 2px; width: 130px; border: 0px solid transparent; z-index: 900;}
ul#gallery li ul{padding: 10px; margin-top: 7px; border: 2px solid #000; background-color: #fff; color: #000; font-size: 90%; max-width: 200px; display: none; position: absolute; z-index: 1000;}
ul#gallery li ul li{margin-top: 0px; width: 200px; margin-bottom: 10px; z-index: 1000;}
ul#gallery li:hover{color: #369; background-color: transparent; border-color: #369;}
ul#gallery li:hover ul{display: block; list-style-type: none;}
ul#gallery ul:before{content: "Image Information"; font-size: 130%; font-weight: bold; border-bottom: 1px solid #999; display: block; margin-bottom: 10px; z-index: 900;}
ul#gallery ul:after{content: "click image to view larger version"; font-size: 90%; text-align: right; display: block; z-index: 900;}
ul#gallery img{display: block; margin: auto;}
img,a img{border: 0px;}
div.clear{clear: both;}
ul#gallery:after{content: "."; display: block; height: 0px; clear: both; visibility:hidden;}

That CSS is called in the effected web pages as follows:

<link rel="stylesheet" href="../../../templates/css/main.css" type="text/css">
<!--[if IE]>
<style type="text/css" media="screen">
body { behavior:url("csshover.htc"); font-size: 100%; }
#gallery li {float: none;}
#gallery ul {width: 200px;}
#gallery ul li {float: none;}
#gallery li ul li {float: none;}
#gallery ul:before {float: none;}
#gallery ul:after {float: none;}
#gallery:after {float: none;}
<ul id="gallery">

... (all the <li> tags and images/content follow)

Works like a charm in MSIE, Firefox, Safari, Opera, etc. An example of an effected page is as follows: http://www.mapformation.com/aboutus/clients/noflash/beckercollege.htm

In Chrome, it'll flash 2-3 of the thumbnails on that page for a split-second, then they will disappear. I refresh the page, and the same thing happens.

Any idea why Google Chrome wouldn't be happy processing that bit of CSS? Any help and advice would be appreciated. Thanks!


regia's picture
San Diego
Last seen: 2 years 28 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Looks the same in all browsers

It works for me in Chrome 7.0.5 on PC and Mac, you may have an earlier version?

Last seen: 4 years 42 weeks ago
Timezone: GMT-6
Joined: 2004-03-06
Posts: 17
Points: 9

I'm using Google Chrome

I'm using Google Chrome 7.0.517.44 myself. I wonder if it might be some type of extension issue?

Here's my Chrome extensions:

AdSweep - Version: 2.1.6
An online ad-removal tool for your favorite web browser.

AdThwart - Version: 1.0.19
Blocks ads using the Firefox AdBlock Plus filter engine. Kiss ads goodbye and browse in peace!

Basic Calculator - Version: 1.5.1
Simple Calculator and easy to use.

DayHiker - Version: 2.0.1
For Google calendar. Check schedule and tasks from toolbar. Manage content on the fly. Plus soft reminders.

Docs PDF/PowerPoint Viewer (by Google) - Version: 3
Automatically previews pdfs, powerpoint presentations, and other documents in Google Docs Viewer.

Downloads - Version: 1
Access the Downloads window directly from the toolbar

Google Voice (by Google) - Version:
Make calls, send SMS, preview Inbox, and get notified of new messages. (US only)

Last.fm free music player - Version:
!! Yes it plays music! Browser as a music player? Why not? Free music player for Google Chrome with Last.fm integration.

Web Developer - Version: 0.3.1
Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

Tyssen's picture
Last seen: 3 years 6 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If it is down to extensions

If it is down to extensions it's likely the ad blocking ones that are causing the problem. You can try changing the names of your classes or IDs although I wouldn't think 'gallery' should be flagged as being an ad. Also, you shouldn't have CSS style blocks in the middle of your page in the way you have; they should all be moved to the head.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference