WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Chrome and FF Display "margin-top" Differently (16 posts)

  1. skipper0802
    Member
    Posted 1 year ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  3. skipper0802
    Member
    Posted 1 year ago #

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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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!

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  6. skipper0802
    Member
    Posted 1 year ago #

    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

  7. skipper0802
    Member
    Posted 1 year ago #

    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. :)

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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!

  9. skipper0802
    Member
    Posted 1 year ago #

    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

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  11. skipper0802
    Member
    Posted 1 year ago #

    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

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  13. skipper0802
    Member
    Posted 1 year ago #

    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

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 .

  15. skipper0802
    Member
    Posted 1 year ago #

    That might work. I've pasted your spacer div idea into my "to do" list.

    Thanks friend,
    Eric

  16. skipper0802
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic