Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved button alignment is off in IE9


Question

Posted · Report post

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:

ScreenshotLangonSamll.jpg

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

Are you positioning these buttons using CSS?

Share this post


Link to post
Share on other sites

Posted · Report post

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>

Share this post


Link to post
Share on other sites

Posted · Report post


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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Any other suggestions?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina,

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Sure:

http://new.langoncolombia.com/

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

Share this post


Link to post
Share on other sites

Posted · Report post

Try adding to your custom css:


.section-morefoot p {

	 orphans: 3;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites