asked on

CSS Reset not working

I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html

You can ignore the stuff below the circles. Just testing stuff down there.

Here is what I added to my 02.html file:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

Open in new window

LZ1

I would honestly just remake that image into a PNG with a transparent background. It would be solve the issue.
If you still want to go the CSS route, then what happens if you give a little more height to the ol#controls?

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Thread7

ASKER

I tried increasing the height of the ol# controls 2 pixels but I just ended up with gaps in both browsers in between the horizontal dividers. It didn't look good.

Changing vertical-align didn't change anything.

Thread7

ASKER

Actually I figured it out. I had this line in my CSS file:

margin:1em 0px;

When I changed it to:

margin: 13px 0px;

Then everything worked. Must be that one browser interpreted the units "em" as slightly different.