Slider buttons not in the center

Community Forums Forums Design Tips and Tricks Slider buttons not in the center

This topic is: not resolved

This topic contains 12 replies, has 4 voices, and was last updated by  Sunil 1 year, 1 month ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #18228

    Sunil
    Participant
    Post count: 85

    Hi,

    I know its very hard to please every browser in order for your site to look good. So far, my site looks good on Chrome, Firefox and Safari. But unfortunately, there seems to be a problem all types of IE browsers including the latest version.

    My site is http://adultacnetreatmentreviews.com. I’m using the Agency theme. The slider works fine on all the browsers except for IE. The home slider initially did not appear on IE at all until I managed to removed a plugin called NextGen Gallery. Then it finally appeared.

    However the problem did not end there. If you can see right now, the bottom round buttons are appearing on the left. Yes, if I change it to [float: center] the buttons will appear in the center for all the browsers except in IE. It will end up displaying the buttons vertically!

    So I’ve no choice but to leave it as [float: left;]. Here is how the codes look like:

    .flex-control-nav li {
    display: block;
    float: left;
    margin: 0 0 0 5px;
    }

    .agency .flex-control-nav {
    margin: 20px auto;
    }

    But it looks quite ugly to see the slider buttons on the left. Any ways to resolve this problem? Besides the curved edges of the slider also disappears in IE unlike other browsers.

    Thank You.

    Regards,
    Sunil

    #21401

    cdils
    Participant
    Post count: 399

    Hi Sunil,

    I tried viewing your code on your site, but you have right-click disabled. :)

    Here’s a stab at a solution though:

    Float: center isn’t valid CSS, so that’s why you’re getting inconsistent results.

    .flex-control-nav li {
    display: block;
    float: none;
    margin: 0 auto;
    overflow: hidden;
    }

    Carrie


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I tweet @cdils.

    #21682

    Sunil
    Participant
    Post count: 85

    Hi Carrie,

    I’ve enabled right click on my site. You can help me check the codes.

    Can you let me know where exactly do I need to paste those codes in the style.css file?

    Will this work?

    I really hope it does!

    Thanks!

    Regards,

    Sunil

    #21684

    Sridhar Katakam
    Participant
    Post count: 847

    Add the suggested CSS at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor).


    #21689

    Sunil
    Participant
    Post count: 85

    Hi Sridhar,

    Thanks for the mention. I’ve already added a host of codes to modify the appearance of the slider. So, I just want to know whether is there any other codes under the slider effect in the style.css file that I need to remove before pasting the above mentioned codes.

    Else the whole thing might get messed up. Probably IE browsers might not be able to understand the codes. Haha!

    #21691

    cdils
    Participant
    Post count: 399

    Do a search for this in your style.css: .flex-control-nav li

    If it already exists, just add this bit (no need to delete anything):

    float: none;

    If it doesn’t exist, then add this entire block to style.css:

    .flex-control-nav li {

    float: none;

    }


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I tweet @cdils.

    #21692

    cdils
    Participant
    Post count: 399

    p.s. Turns out the rest of the CSS I suggested wasn’t needed. Just doing that bit in  my last post should get you centered. :)


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I tweet @cdils.

    #21694

    Sunil
    Participant
    Post count: 85

    Hi,

    I’ve added float: none;

    This is how the current code looks like:

    .flex-control-nav li {
    display: block;
    float: none;
    margin: 0 0 0 5px;
    }

    .agency .flex-control-nav {
    margin: 20px auto;
    }

    But now if you look at my site in IE, the buttons appear vertically!

    #21695

    Sridhar Katakam
    Participant
    Post count: 847

    Sunil,

    Unless otherwise mentioned, you don’t have to delete existing CSS code. If two different values are entered for the same selector the one that appears latter in the file will be used. Browsers parse stylesheets from top to bottom.


    #21696

    Sunil
    Participant
    Post count: 85

    Hi,

    So what should I do now? The buttons are in the center now in other browsers like firefox, safari, chrome and opera. That’s how its supposed to look like.

    It just can’t seem to please IE at all.

    #21700

    Sunil
    Participant
    Post count: 85

    I’ve just placed back the float: left; for the time being. Hope to see some solutions from you guys.

    Thank you.

    Regards,

    Sunil

    #21709

    Norcross
    Participant
    Post count: 2

    In my testing, I was able to get them centered with the following CSS:

    .flex-control-nav li {
    display: inline-block;
    float: none;
    margin: 0 0 0 5px;
    }

    that put them in the center

    #21998

    Sunil
    Participant
    Post count: 85

    Hi Norcross,

    That nearly almost worked! Even though it did not work on the IE browsers as its still on the left, the slider buttons are in the center on other browsers!

    Thanks Norcross if that’s your name.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.