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:

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

Who is Participating?
Kim WalkerWeb Programmer/TechnicianCommented:
You might try setting the vertical-align to bottom on the image tag. Vertical-align baseline seems to behave differently in different browsers when there's no text beside the image.
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?
Thread7Author Commented:
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.
Thread7Author Commented:
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.