Jump to content
Sign in to follow this  
yemoonyah

button alignment is off in IE9

Recommended Posts

yemoonyah+    2
yemoonyah

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
yemoonyah+    2
yemoonyah

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


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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

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

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Thanks Catrina,

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Try adding to your custom css:


.section-morefoot p {

	 orphans: 3;

}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The topic was marked as resolved.


Please search our forums, before posting!

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  

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Jason
      By Jason+
      Hi.
      A previous thread mentioned problems with Splashup in IE.
       
      I am having these same issues. Everything is fine in firefox and chrome but IE displays only half the splash up section overlayed across the other content. See screen shots below.
      How it should look is Fire fox Splashup
      How it looks in IE is IE Splashup.
      Site is www.catholiccol.org.nz/live-preview-09-2016
       
      I have also attached shots of Inspect of each browser. As soon as I click on the ::after and ::before elements in IE the page displays correctly.
      I have tried Splashup on other sites and a local install with no custom css and all other plugins disabled but I still get the same problem.
       
      Any ideas?
       




    • arno
      By arno+
      Site that looks great on other browser, are is rendered wrong on IE: http://foodfunded.us/
      We got multiple complaints.
      The height of sections is way too high. Not sure which section is causing the problem, as they are in containers.
      Or is the size of the images?

      While most of us probably don't use IE, it might prevent professionals from getting client engagements with the PL5 tool, if the browsers don't have coverage.

    • sfmstudios
      By sfmstudios+
      Strange issue - see attached screenshot from www.bpetricone.com (cutoff one is IE, the other is Safari on iPad).  Only shows this way in IE11, and all other modern browsers are fine. I removed all extra CSS and all plugins and core files are up to date. 
       
      What are my options?  I already tried both putting them all in one container or having them separate. 


×