Support » Themes and Templates » Chrome and FF Display "margin-top" Differently

  • Resolved skipper0802

    (@skipper0802)


    Hello All,
    After going round-and-round with this issue, reading posts, and reading more posts. We’re not much farther ahead than where we were.

    Our site.

    Our site renders nicely in Chrome 19, but when I checked FF 12, the thumbnails in our slider are biased downward. I tried using the “-moz-” prefix but learned that there is no support for this attribute– “-moz-margin-top.”

    Here’s what our current child style.css portion looks like:

    .slide_nav {
    margin-top: 23px !important;
    -moz-margin-top: 13px !important; /* for mozilla */
    }

    Our former idea was to use the FF prefix along with the standard attribute in our child style sheet–obviously this isn’t going to work.

    Do we need to create a separate style sheet for FF? If so, we’ll likely have to do the same for IE?

    Thanks in advance.

    Good grief,
    Eric & Barb

Viewing 15 replies - 1 through 15 (of 15 total)
  • WPyogi

    (@wpyogi)

    Forum Moderator

    Thumbnails look fine in FF 12 (Mac) on my machine.

    Hello WPyogi,
    So, the thumbnails are centered in the slider band on your display? That is to say, centered in the gray band?

    WPyogi

    (@wpyogi)

    Forum Moderator

    Yep, and only the margin-top: 23px !important; is visible using Firebug to view the CSS.

    I just checked it in Safari too — no problems.

    BTW, really nice site!

    WPyogi

    (@wpyogi)

    Forum Moderator

    OOps, I take that back…they are lower than exactly the middle. In your initial post, I thought your “biased” downward meant sloping downward — i.e. not evenly horizontal. Sorry about that. But the spacing is really not a big deal IMHO…it looks fine.

    Have you tried using padding instead of margins?

    Thanks for your compliment! This issue is strange because in Chrome, the 23px centers the thumbnails vertically within the gray band. But, in FF, I have to use something like 10px or 13px to have the thumbnails center.

    I don’t know what causes the difference…maybe the rendering engines handling of the margin-top property?

    Not sure.

    Eric

    Haven’t tried the padding option. If one browser renders one way, and the other browser renders another way; I’m back to square one.

    I’ll try it though. 🙂

    WPyogi

    (@wpyogi)

    Forum Moderator

    Yeah, that is kinda weird because FF and Chrome are usually the same (or very close). Now if it were IE, that’s just SOP!

    I agree, IE is kind of out there by itself. Oh well.

    Nonetheless, I’ll have to keep trying because we’d like our website to display uniformly no matter what browser the user is using. This will be very difficult I think.

    Regards,
    Eric

    WPyogi

    (@wpyogi)

    Forum Moderator

    I just downloaded Chrome (I know, I was a holdout!) — and your site looks exactly the same there as on FF and Safari…as I said, these are all on a Mac. So maybe not a browser issue? Have you cleared all your caches?

    I tried clearing the cache in the aforementioned browsers using shift-f5 and the various menus…maybe I did it incorrectly? However, you say that the site is the same on all browsers, and that’s encouraging. My question is, “Are the thumbnails vertically centered between the browsers on your Mac?” If so, then I’ll mark this issue as resolved. If not, maybe I’ll shelf the problem and focus on wrapping Jigoshop with with my theme divs. (A separate thread.)

    Good news I think,
    Eric

    WPyogi

    (@wpyogi)

    Forum Moderator

    No, in Firefox, Safari and Chrome they are all too low. What happens if you change the top margin to 13 or 14 – that DOES center it on Firefox (using Firebug to test it) and THEN clear you browser (and any other server) caches?

    I split the difference to 18.5px. This should be a half-way point between the browsers…not the ideal solution, but acceptable.

    WPyogi–thanks so much for your help. I hope I can return the favor in the future!

    Cheers,
    Eric & Barb

    WPyogi

    (@wpyogi)

    Forum Moderator

    I know you marked this resolved, but another idea I had is to remove the margin and then add a “spacer” div set to a fixed height and with the same color — just above the slide_nav .

    That might work. I’ve pasted your spacer div idea into my “to do” list.

    Thanks friend,
    Eric

    Now, on to the wrapper issue with Jigoshop. Oh right, this is after I meet my deadlines for homework and the presentation due Thursday…ahhggg!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Chrome and FF Display "margin-top" Differently’ is closed to new replies.