[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

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

0
Thread7
Asked:
Thread7
  • 2
1 Solution
 
LZ1Commented:
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?
0
 
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.
0
 
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.
0
 
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.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now