• 0
Sign in to follow this  
Followers 0

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

Question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

The margins around the "Apply Now" button are wrong: Try: [code]#branding #maxbutton-11-container { float: right; margin-bottom: 23px; margin-top: 0; text-align: right; width: 200px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 :(( :(( :((

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I sure wish browsers used the same standards.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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): http://www.pagelines.com/store/plugins/browser-css/?product_ref=true It might help by applying CSS (such as I gave you) specific to the browsers badly affected by this issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

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