Internet Explorer problems with some buttons

Resolved cfb
(@cfb)

11 years, 7 months ago
Hello everyone, I’ve got this little issue with Internet Explorer I hope someone may be able to fix:

please go to http://www.oxworldwide.com (if you can, do it in two different browsers, one must be internet explorer so you can see the differences)

1. Buttons on the top horizontal menu:

when hovering the buttons their background should turn orange but in Internet Explorer they seem to not read the CSS which is:
```
ul.menu.l_tinynav1 a:hover  {
	color: white;
	background: #CE9108;
	text-shadow:none;
	border:0;
}
```
2. Big button on the homepage

the other problem is on the big central widget of the homepage where there’s this big button that’s barely readable due to that white color. It should have a texture on the background (as you can see in other browsers like chrome or firefox) and it should turn orange too when hovering it. here’s the code i wrote:
```
a.feature.button {
	background-image: url("http://oxworldwide.com/wp-content/uploads/2012/08/backgroundbotonportada2.png");
	border:0;
	font-family: century gothic;
	text-shadow: none;
	font-size: 10px;
	font-weight:400;
	color: white;
	text-transform:uppercase;
	-moz-box-shadow:4px 4px 3px #ccc;
	-webkit-box-shadow: 4px 4px 3px #ccc;
}

a.feature.button:hover {
	background-image: url("http://oxworldwide.com/wp-content/uploads/2012/08/backgroundbotonportada.png");
}
```
The links are ok (otherwise they wouldn’t be seen on other browsers) and the code apparently too, where’s the problem then? The first issue is not that important but this last one is barely readable so it needs to be fixed.

Thanks in advance to everyone!

Viewing 15 replies - 1 through 15 (of 15 total)

Emil Uzelac
(@emiluzelac)

11 years, 7 months ago
Hi,

The menu would need to be styled under:

.menu{}

instead of:

ul.menu l_tinynav1 {}

no need to include tinynav, that’s the class for mobile menus.

For the featured button a/k/a CTA please note that button have different elements for IE and it would be much easier to do that under:

.call-to-action{}

instead of .feature what you currently have.

But if you wish to proceed with this, please add the rest of the elements such as:
```
a.blue {
	background-color:#4682b4;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#5fb0f4), to(#4682b4));
	background-image:-webkit-linear-gradient(top, #5fb0f4, #4682b4);
	background-image:-moz-linear-gradient(top, #5fb0f4, #4682b4);
	background-image:-ms-linear-gradient(top, #5fb0f4, #4682b4);
	background-image:-o-linear-gradient(top, #5fb0f4, #4682b4);
	background-image:linear-gradient(top, #5fb0f4, #4682b4);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5fb0f4, endColorstr=#4682b4);
	border:1px solid #386890;
	color:#fff;
	text-shadow:0 1px 0 #386890;
}
```
blue is here as an example only, where you will notice filter: which’s specifically for IE.

and also apply to:
```
.menu a:hover{}
.menu .current_page_item a{}
.home .menu .current_page_item a {}
```
if you need to 🙂 Best way of knowing is to look in /responsive/style.css and locate primary menu and copy all menu styles and add your personalizations in.

Thanks for using Responsive!

P.S. You can also find many answers on http://themeid.com/forum as well 🙂

Emil
Thread Starter cfb
(@cfb)

11 years, 7 months ago
Thanks to you for this impressive template! Thank you so much for your help, it finally seemed to work out BUT all of the sudden it seems like the header on IE has gone totally off-centered and I don’t even know where to begin to look at ’cause the only code I’ve used regarding this area is this:
```
div#logo {
	background-color: #CE9108;
}
```
Do you mind telling me what might be the cause and how to fix it? Also, there’s this text on the main widget of the homepage that also looks a little off-centered on IE, can you see it? is there anyway to fix this?

Thank you again!

PS: I just figured out that this ONLY happens on IE9, on IE8 it works perfectly. OMG I hate this browser sooo much!!
Emil Uzelac
(@emiluzelac)

11 years, 7 months ago

I don’t really like IE that much either 🙂

Good I am glad that all worked it out for you, if that’s all for now, please close this topic as resolved 🙂

Thanks,
Emil

Thread Starter cfb
(@cfb)

11 years, 7 months ago

Hi emil, before I close this thread, do you mind telling me how to fix the header part for IE8? please read my last comment above where I explain it. Thanx! :D!

Emil Uzelac
(@emiluzelac)

11 years, 7 months ago

I can’t see that, can you please provide me with the screenshot?

Emil

Thread Starter cfb
(@cfb)

11 years, 7 months ago

yeah sure, sorry, it was for IE9, in IE8 it is seen perfectly. here you go:

http://subefotos.com/ver/?fa6a855b45adae7a0d8a6a49a7be5296o.jpg

Emil Uzelac
(@emiluzelac)

11 years, 7 months ago

All right, I will have to get Windows machine to test this for you, don’t have one handy, give me till tomorrow 🙂

Emil

Thread Starter cfb
(@cfb)

11 years, 7 months ago

sure man! whenever you like! I’d appreciate it a lot! thank you.
Emil Uzelac
(@emiluzelac)

11 years, 7 months ago
All right, just got my PC and IE7 in place and the reason why the custom header is all the way right is because of this:
```
#header #logo {
    text-align:center;
}
```
Thanks,
Emil
Thread Starter cfb
(@cfb)

11 years, 7 months ago
Ok, so now I’ve erased that line and looks like this:
```
#header #logo {
	    float:none;
    }
```
but still doesn’t work in IE9. Any ideas? :S

PS: By the way, yesterday I tried to register on your ThemeID forums but i didn’t receive any mail with the password, my e-mail is: eduardsans@hotmail.com
Emil Uzelac
(@emiluzelac)

11 years, 7 months ago

#header #logo{}

is from previous version of Responsive and that has been replaced by

#logo{}

Now, what’s needed here is to go over your Child Theme style.css and make sure that you’re not adding “desktop” styles into Media Queries, that’s where I think we have a problem. And see http://themeid.com/forum/topic/505/child-theme-example/ once again as well.

Yes, that sounds like hotmail.com issue, please try another address instead.

Emil

Thread Starter cfb
(@cfb)

11 years, 7 months ago

ok, here’s what i’ve done, I don’t remember writing any styles into Media Queries but just in case i downloaded the newest child theme example from your link, copied the css and replaced it from the old Media Queries I had. Then, erased the lines of text-align:center; that appeared inside #logo, and now looks like this:

` #logo {
float:none;
}
`

BUT still doesn’t work in IE9 :S, what else might be?
Emil Uzelac
(@emiluzelac)

11 years, 7 months ago
I cannot see any issues with IE9, please take a look: http://i.imgur.com/q6K8G.png what you had/have is IE7 problem http://i.imgur.com/Kn3xW.png and you can apply what I mentioned above and also please check your Media Queries as well 🙂
```
.ie7 #header #logo {
    text-align:left;
}
```
that should also fix the issue.

Emil
Thread Starter cfb
(@cfb)

11 years, 7 months ago

Hey Emil! it’s FINALLY fixed but it’s so embarassing at the same time :S!! it was all about the cookies (I kept reloading the page but I forgot about erasing the damn cookies!) that’s why I couldn’t be able to see it well in IE9, sorry for all this mess but I usually work with firefox and/or chrome and I never had these issues with the cookies.

Now I’ll register on your forums with a non-hotmail.com e-mail ’cause I have a couple more issues I need to solve. I’m such a noob! Thank you very much for your time and patience!

Emil Uzelac
(@emiluzelac)

11 years, 7 months ago

Cool, now we can mark this resolved and please feel free to join our dedicated forums as well 🙂

And no worries, it’s all good!

Thanks,
Emil

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Internet Explorer problems with some buttons’ is closed to new replies.

Internet Explorer problems with some buttons

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics