Slider buttons not in the center

[Sunil]

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

[cdils]

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 host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Sunil]

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

[Sridhar Katakam]

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

---

Genesis Tutorials | Follow me on Twitter

[Sunil]

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!

[cdils]

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 host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[cdils]

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 host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Sunil]

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!

[Sridhar Katakam]

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.

---

Genesis Tutorials | Follow me on Twitter

[Sunil]

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.

[Sunil]

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

Thank you.

Regards,

Sunil

[Norcross]

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

[Sunil]

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.

[Author]

Posts