Jump to content


Photo
- - - - -

Custom CSS on NavBar not working IE


  • Please log in to reply
13 replies to this topic

#1 tuanma

tuanma

    Advanced Member

  • Members
  • 83 posts

Posted 22 June 2012 - 06:33 AM

Hello,

I used the following css to remove the background color on the standard navbar, which seems to work on all browsers except internet explorer. On IE, the background is still black, but should be white.

Please Login or Register to see this Hidden Content


Any help is greatly appreciated.

Thanks,

Tuan

#2 anthalis

anthalis

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:Dev. Latest. Always.
  • Country: Country Flag

Posted 22 June 2012 - 06:45 AM

Hi Tuan,
I tried

Please Login or Register to see this Hidden Content

in firebug and it seems to remove the border. Try it out and let us know if the issue is not solved.

#3 Danny

Danny

    Is Awesome!

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

Posted 22 June 2012 - 11:25 AM

Hi Tuan, Have you tried anthalis suggestion ?

#4 tuanma

tuanma

    Advanced Member

  • Members
  • 83 posts

Posted 22 June 2012 - 03:00 PM

No Luck. Black background is still there and I've added '!important' to all css changes. But IE is still not co-operating.

#5 catrina

catrina

    Advocate

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

Posted 22 June 2012 - 04:27 PM

That is IE just being IE :. What other custom CSS do you have? (If there's black somewhere else, that may be where it's coming from - but can't be too sure)

#6 anthalis

anthalis

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:Dev. Latest. Always.
  • Country: Country Flag

Posted 22 June 2012 - 05:54 PM

Hmmm, I see a

Please Login or Register to see this Hidden Content

in

Please Login or Register to see this Hidden Content


and also

Please Login or Register to see this Hidden Content


Try

Please Login or Register to see this Hidden Content


It might just do the trick.

#7 tuanma

tuanma

    Advanced Member

  • Members
  • 83 posts

Posted 22 June 2012 - 09:38 PM

@anthalis

This is what I have for css to get the white background, which can be seen in all browsers except IE.

Please Login or Register to see this Hidden Content


I've gone ahead and added 'background-image: none !important;' css you recommended but no luck.


Tuan

#8 anthalis

anthalis

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:Dev. Latest. Always.
  • Country: Country Flag

Posted 23 June 2012 - 07:52 AM

Ok,

I forgot the navbar was defaulting to the Black Transparent theme by default. It's been a hectic week.

So, since removing borders, shadows etc worked, all that's left is the darn background.

I replicated the black navbar on a site of mine and added the following css in the custom code area:

Please Login or Register to see this Hidden Content


My navbar now shows only the menu elements.

Please Login or Register to see this Hidden Content



I hope this solves it for you too.

#9 tuanma

tuanma

    Advanced Member

  • Members
  • 83 posts

Posted 23 June 2012 - 04:08 PM

@anthalis Thanks for all you help. I pasted the code above into custom css and still no luck with IE, the black background still exist. Ready to pull my hair out. Tuan

#10 catrina

catrina

    Advocate

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

Posted 23 June 2012 - 04:48 PM

A workaround I've thought of would be to use a background image in the solid color that you want and adding the background-image attribute to the appropriate CSS selector to generate it so that hopefully it replaces that pesky black background:

Please Login or Register to see this Hidden Content


You'll need to use an image editing program to create a 5x5-pixel solid black image, upload it to your Media Library, and then use the direct image URL where it says DIRECTIMAGEURL in the code above.

#11 tuanma

tuanma

    Advanced Member

  • Members
  • 83 posts

Posted 25 June 2012 - 03:48 PM

@catrina Replaced the background image with the css code above, but still no luck.

#12 Rob

Rob

    One Smart Egg

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

Posted 25 June 2012 - 06:28 PM

Tuanma, try the Simple CSS Lite plugin available in the Store. It's free and is specialized to color the background colors, font colors and both active and hover states for the menu. Let us know if it works for you.

#13 anthalis

anthalis

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:Dev. Latest. Always.
  • Country: Country Flag

Posted 26 June 2012 - 06:26 AM

Hi Tuanma,

When inspecting your page with F12 dev tools in IE your .pl-color-black-trans appears with a filter: 1 in either your Custom Code area or some other place where the stylesheet is not linked. Please double check that this filter: 1 is not added to the Custom Code area.
This filter should be filter: alpha(opacity=0);. Without it you will end up pulling your hair out.

Try to add

Please Login or Register to see this Hidden Content

to your child theme style sheet or in pagelines customize. One of them should work for you, but I don't see the code in either of them.

Also make sure to refresh with CTRL+F5 when checking for the results to refresh any present cache done by your browser.

#14 catrina

catrina

    Advocate

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

Posted 27 June 2012 - 02:37 AM

Thanks for posting your insight, anthalis