Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#186622

Hi all. I’m building out my first real template using the T3v3 and Joomla 3 and so far it’s going ok, but I’ve com upon a bit of an issue. For the area that wraps the NAV area on the page, no matter what I do, I can’t get Internet Explorer (9) to reflect the changes.

I should have a background color of #888888 and no backjground image, but the wrapped area keeps showing the default css3 gradient there. For the header, footer, conteainer, article, etc, it seems to be find – it’s just the nav part. When you use the development tools to see what’s going on, it appears that the correct styling is there, but it’s not showing on the screen that way.

In Firefox and Chrome, it does just what I want it to.

Here’s the CSS:


.t3-mainnav {
background-color: #888888
background-image: none;
border: none;
}


I have use this particular selector becasue it’s what’s on the default t3 framework page, but I’ve also tried other combos – as above they all seem to “take” but are not obeyed on the screen. I’ve also tried nav#t3-mainnav.wrap and other varations on the theme.

This is one of two examples that aren’t working right and both are centered around the NAV bar. You can also see the that “current” page you are on should have a background-image that’s a reverse of the navbar itself, but instead in IE, it’s just showing the default blue css3 gradient. It’s particularly odd/interesting that the actual navbar background image seems to be working just fine across all of the browsers.

Please take a look at the demo I’ve got running here and let me know what you think:
http://dyplastproducts.technicalrs.net

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#489367

Quick update: The above is NOT a problem in IE10 in Windows 8. It seems to be completely isolated to IE9. Anyone have any ideas?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#489481

Anyone? I’ve tried on several PCs and they all have the same behavior. Even IE10 with “compatibility mode” shows the problem. I’m kinda lost as to how to find this since the developer panel shows that the right styles are being applied, but the actual on screen look is wrong.

Please help. 🙂

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#489483

Ok – I found it! I don’t know how I didn’t see it there, but when I looked at the page in IE10 compatibility mode using the development tools, it jumped out at me: there is an IE specific command in there: filter – a css3 gradient workaround, I suppose. Not sure why it’s specifically applied to the nav area and none of the other spaces, but it’s fixed and that’s good enough for me.

I simply added


filter: none;


to override the default filter that was in there for the wrap and the active/current states. Problem solved.

For what it’s worth, the original filter looked like this:


filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0)


I hope someone comes across this fix in their (otherwise frustrating) search! 🙂

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

2 users say Thank You to Scott Lavelle for this useful post

1. phong nam
2. filmlover

[Author]

Posts