Landing Pages Look Different in Different Browsers

[Anonymous]

I'm working on a landing page, but I'm struggling b/c it looks different in different browsers. The spacing/formatting will look good in Firefox, but when I look at it in IE or Chrome, the spacing is off. Is there a way to overcome this?

[Anonymous]

Hi Kelly,

I have come across the same issues, but I have found that if I edit it to look good in Firefox, it translates to look fine in Chrome also. But not the other way around. Chrome seems to create overlap in Firefox. Let me know if you've already tried this and we can go from there.

Sorry for the inconvenience and thanks for posting.

Liz

[Anonymous]

Kelly:

What part about the spacing is off in the other browsers? Are you talking about the positioning of images/elements that you've dragged onto the page, or the the internal formatting of text within HTML elements?


Best,

Edward Unthank

[Anonymous]

Kelly,

Liz is on point here, the best case is to build your pages in Firefox and add code for other browsers if needed. If your ok with a little css you can make adjustments that are browser specific. This is a common design challenge that web developers experience. Check out this site for some tips and tricks...

http://css-tricks.com/snippets/css/browser-specific-hacks/

[Anonymous]

Firefox, Chrome/Safari and Internet Explorer are all built on top of different rendering engines, so they will produce slightly different results. Add the fact that Internet Explorer versions are notorious for their lack of compatibility with evolving web standards and you have quite the issue. 

You can use a tool like Browserstack to quickly test between multiple browsers and see how your page looks and try to make changes to the page.

If you like, please provide the URL of the page and the community can help debug 🙂

[Anonymous]

Hi All -

Thanks for the responses. I always build out my landing pages in Firefox and then check to see how they look in IE, Chrome, Safari, etc. The main issue I am facing is in re: to spacing. In the current LP that I am working on, I have a title, below that is body paragraph, and then below that are actionable buttons (read, listen, etc). In firefox, the buttons are spaced just below the body. However, in IE and Chrome, the buttons have a larger spacing from the body (doesn't look as good). This isn't a huge issue, but it just doens't look great and I want my pages to have a good look and feel! Additionally, I have a form on this page, inside a rectangular box element. In Firefox, the form is centered and the rectangle borders it well. However, in IE and CHROME, the border is much longer and the form isn't centered within the rectangle (up at the top of the rectangle and much more white space between end of form and bottom of rectangle). Lastly, I often have problems with the white space at the bottom of the LP (i.e. from the end of the content to the bottom of the template). In Firefox it'll look good, but in IE/Chrome there will be a bunch of extra white space at the bottom. All in all, tihs is frustrating b/c it doesn't make the LP look professional.

I'm unfortunately not familiar with CSS or adding code, so I was hoping for a simpler/easier fix. Sounds like CSS is my main option though?

[Anonymous]

The culprit for this sort of thing almost always lies in the template.  Templates are HTML and CSS and often they aren't tested for cross-browser compatbility.  Each customer puts in their own.  Marketo usually provides the first one, which usually has no problems like this.  However, we don't have a "template designer".  Only a landing page designer that assumes the template has been tested.

The browser makers certainly don't make it easy on people, but Marketo isn't doing anything to make it worse for you.

One extra thing that sometimes happens is that your browser is set to zoom or font-size is set to 150%.

Post the URL of the page that is looking differently and we can take a look.  I guarantee that there is CSS in the template that is not cross-browser compatible.

[Anonymous]

Here is the url: http://info.patientkeeper.com/muse13.html

as you can see, the form embedded in the rectangle looks different in all the browsers. It looks fine in firefox, but not good in internet explorer unfortunately

[Anonymous · Accepted solution]

Hi Kelly,

Here's a small snippet of css that may help your form a bit.  To use it, create a new HTML element and paste this in:

<style>
 form.lpeRegForm li {min-height:24px;}
 form.lpeRegForm ul textarea {height:40px; width:150px;}
 span.lpContentsItem.formSpan {display:inline-block;}
</style>
This will help space the form elements a bit more regularly, which will result in a closer match between the different browsers.

[Anonymous]

Hi Ian,

Thank you so much!! This code works great!