Jump to content


Photo
- - - - -
Resolved

button alignment is off in IE9

Internet Explorer buttons

  • Please log in to reply
13 replies to this topic

#1 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 11 October 2012 - 02:25 PM

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:

Posted Image

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 October 2012 - 02:52 PM

Are you positioning these buttons using CSS?

#3 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 11 October 2012 - 03:05 PM

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

Please Login or Register to see this Hidden Content



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 October 2012 - 05:03 PM

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



#5 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 11 October 2012 - 05:47 PM

Thanks, I changed the code but the button is still not properly aligned.
Any other suggestions?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 October 2012 - 06:55 PM

Please replace the code with this:

Please Login or Register to see this Hidden Content


I noticed that there was an error in the code.

#7 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 13 October 2012 - 01:12 PM

Thanks Catrina,

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 07:29 PM

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.

#9 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 13 October 2012 - 08:16 PM

Sure:

Please Login or Register to see this Hidden Content



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

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 09:37 PM

Try adding to your custom css:

Please Login or Register to see this Hidden Content



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 09:38 PM

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

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 October 2012 - 10:08 PM

In terms of what I proposed....

Currently, if you read

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content



#13 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 15 October 2012 - 11:30 AM

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

#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 October 2012 - 11:35 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, Internet Explorer, buttons