Jump to content


Photo
- - - - -

margin CSS different for different browsers


  • Please log in to reply
9 replies to this topic

#1 glynt

glynt

    Super Member

  • Members
  • 194 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 02 July 2011 - 06:19 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 July 2011 - 06:43 PM

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

#3 glynt

glynt

    Super Member

  • Members
  • 194 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 02 July 2011 - 06:45 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 July 2011 - 06:49 PM

I think this topic on margin difference between browsers is insightful: http://support.westc...space-different

#5 glynt

glynt

    Super Member

  • Members
  • 194 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 02 July 2011 - 06:59 PM

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

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 July 2011 - 07:01 PM

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

#7 glynt

glynt

    Super Member

  • Members
  • 194 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 02 July 2011 - 07:32 PM

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,

#8 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 02 July 2011 - 11:03 PM

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
.

#9 glynt

glynt

    Super Member

  • Members
  • 194 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 02 July 2011 - 11:35 PM

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

#10 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 03 July 2011 - 02:41 AM

Its actually possible target specific browsers within wordpress