CSS Reset not working

Posted on 2011-10-14
Last Modified: 2012-05-12
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="">

Open in new window

Question by:Thread7
    LVL 30

    Expert Comment

    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?
    LVL 21

    Accepted Solution

    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.
    LVL 1

    Author Comment

    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.
    LVL 1

    Author Comment

    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.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now