Resolved button alignment is off in IE9

[yemoonyah+ 2]

Hi,

I have some buttons at the bottom of my page and they are off in Internet Explorer 9.

How can I fix this? Thanks!

See screenshot:

[catrina 103]

Are you positioning these buttons using CSS?

[yemoonyah+ 2]

I added them to the footer widget area with the following code:

<a href="http://new.langoncolombia.com/brochure.pdf" title="About Us"><p style="text-align: center;"><button class="btn btn-large btn btn-info" type="inverse"><i class="icon-book icon-white"></i>	 FIRM BROCHURE</button></p>

[catrina 103]

<a href="http://new.langoncolombia.com/brochure.pdf" title="About Us">

<p style="text-align: center;"><button class="btn btn-large btn btn-info" type="inverse">

<i class="icon-book icon-white"></iFIRM BROCHURE</button></p>

In your code, you're placing the <p> tags in a strange place. You'll need to put the entire button code inside of the <p> tags so that it's like this:

<p style="text-align: center;"><a href="http://new.langoncolombia.com/brochure.pdf" title="About Us">

<button class="btn btn-large btn btn-info" type="inverse">

<i class="icon-book icon-white"></iFIRM BROCHURE</button></p>

[yemoonyah+ 2]

Thanks, I changed the code but the button is still not properly aligned.

Any other suggestions?

[catrina 103]

Please replace the code with this:

<p style="text-align: center;"><a href="http://new.langoncolombia.com/brochure.pdf" title="About Us">

<button class="btn btn-large btn btn-info" type="inverse">

<i class="icon-book icon-white"></iFIRM BROCHURE></button></p>

I noticed that there was an error in the code.

[yemoonyah+ 2]

Thanks Catrina,

I changed the code again but the buttons are still misaligned.

[Rob 547]

Hi Yemoonyah,

If the site is live, may we have a link?

I'm not sure than inline CSS is the best idea. I'm also unsure if a <p> tag is good in this case. Instead, I think the buttons should be wrapped in a div with their own class (which they seem to have) and that the applicable CSS be implemented more typically for custom code.

[yemoonyah+ 2]

Sure:

http://new.langoncolombia.com/

Could you help me with that code? I'm not sure how to implement your suggestions.

[Rob 547]

Try adding to your custom css:

.section-morefoot p {

	 orphans: 3;

}

[Rob 547]

It seems you're currently using 4 orphans, not 3. So IE9 is probably looking for 4 columns.

[Rob 547]

In terms of what I proposed....

Currently, if you read http://www.w3schools.com/css/css_howto.asp you will see inline CSS, which is how you're doing it. But we use LESS and inline doesn't work nicely with LESS in some browsers. IE comes to mind ;-)

However, centering can be done with some different CSS. Replacing the entire <p string, with a div and class, this would work brilliantly: http://www.w3schools.com/css/css_align.asp

[yemoonyah+ 2]

Ok thanks, I fixed it. This topic can be marked as closed now.

[Danny+ 1,327]

The topic was marked as resolved.