Jump to content


Photo
- - - - -

Custom CSS vertical alignment (DIV margins) work in Safari but doesn't align in Firefox and IE9


  • Please log in to reply
6 replies to this topic

#1 wworks

wworks

    Member

  • Members
  • 20 posts

Posted 27 July 2012 - 08:57 PM

I am using pagelines framework. I added a few elements to the branding area and all looked fine in Safari, and Opera and some versions of IE. But then I tested it in Firefox and IE9. The small navigation and the "apply now" button on the right side of the branding area causes (pushes) the navigation too low in the red bar. But if I fix the CSS margins for the - "#brandingright" it's too high for Safari and opera How do I fix for one browser without breaking it in the other?

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 July 2012 - 09:10 PM

The margins around the "Apply Now" button are wrong:
Try:

Please Login or Register to see this Hidden Content



#3 wworks

wworks

    Member

  • Members
  • 20 posts

Posted 28 July 2012 - 01:45 PM

Okay but now it breaks in Chrome and more importantly Safari.. The navigation jumped up as did the body of the page into the header section. Not good. Any ideas? IE9 on windows looks fine Firefox on Mac looks fine Firefox on windows looks fine Safari 5.1 on Mac - Bad Chrome 20 on Mac - Bad :(( :(( :((

#4 wworks

wworks

    Member

  • Members
  • 20 posts

Posted 28 July 2012 - 01:47 PM

I sure wish browsers used the same standards.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 July 2012 - 02:35 PM

Unfortunately, they don't and while we endeavor to make everything work across browsers, we can't control how other companies code things, as I'm sure you understand. Try this via our Store (it's free):

Please Login or Register to see this Hidden Content

It might help by applying CSS (such as I gave you) specific to the browsers badly affected by this issue.

#6 wworks

wworks

    Member

  • Members
  • 20 posts

Posted 28 July 2012 - 02:54 PM

I think I will install and try the pagelines browser specific CSS for this one. I just will have to figure out how to use it. It appears documentation is sparse. Thanks! I was also looking at a javascript solution "CSS browser selector" Have you heard anything about that? it looked good. :) Plus it's easy to configure.

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 July 2012 - 02:57 PM

I've not tried that. There are some browser selector plugins, but haven't needed them.