Sign in to follow this  
Followers 0

margin CSS different for different browsers

10 posts in this topic

Posted · Report post

Hi all, I have added the following custom CSS: .home #pagelines_content { margin-top: -25px !important; margin-bottom: -20px !important; margin-left: -10px !important; margin-right: -10px !important; } The bottom margin value seems to differ in its effects depending on browser. It is right where I want it to be in Safari, slightly different in Chrome and way out in Firefox. The other commands seem to work fine across all browsers. Website is: www.benidorm-selections.com theme is PlatformPro. Many thanks for any ideas!! Glyn

Share this post


Link to post
Share on other sites

Posted · Report post

In Firefox, is the bottom margin space too large or too little?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Catrina, It's too large by a long way in Firefox. Slightly too large in Chrome, and just right in Safari.... Thanks, Glyn

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Catrina, Thanks, but I'm not sure it helps much (unless I'm missing something...) All margins are fine apart from the bottom one, and the code included in the article for don't seem to give me any more options... Thanks, Glyn

Share this post


Link to post
Share on other sites

Posted · Report post

Have you already tried adjusting the top margin for the content below the content you've adjusted?

Share this post


Link to post
Share on other sites

Posted · Report post

It's a row of boxes so I've had a quick stab at it with a few bits of code that I've found on the forum, along the lines of: #fbox .content {margin-top: -10px} but haven't got anywhere. Do you know the correct code? thanks,

Share this post


Link to post
Share on other sites

Posted · Report post

Okay this is actually the code that is causing the issue. The problem, i think, is that different browsers calculate

em
relative to different elements.
.fpost {
	    margin-bottom: 1.6em;
	}
So if you add this:
.fpost {
	    margin-bottom: 0px !important;
	}
it will cancel out that margin, and you can get rid of the negative margin you were putting on the bottom of
#pagelines_content

.

Share this post


Link to post
Share on other sites

Posted · Report post

Brilliant, that's worked perfectly! Thanks very much!

Share this post


Link to post
Share on other sites

Posted · Report post

Its actually possible target specific browsers within wordpress

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0