Jump to content


Photo
- - - - -

Css For Menu Bg In Ie 8+


Best Answer Rob , 21 December 2012 - 10:21 PM

Hi,  We're not able to provide CSS solutions here, and I strongly recommend using Firebug or Chrome's Inspection Tools for your development work on what seems a very nicely done site. 

 

This is your problem CSS:

 
header#header, header#header a {
    color: #FFFFFF;
    text-shadow: 2px 2px 2px #000000;
}

As you can see, it's adding a 2 pixel text shadow of black to the menu items.  The problem with this is that IE doesn't really support shadows, opacity, transparency of a number of manipulations of text. 

 

If you like this effect in other browsers, leave it, but use our Browser Specific CSS plugin (free in the Store) to modify it for IE, removing each 2px and replacing them with one 0 (zero).

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 webmktco

webmktco

    Super Member

  • Members

  • 176 posts
  • Country: Country Flag

Posted 21 December 2012 - 09:24 PM

Delete



#2 Rob

Rob

    One Smart Egg

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

Posted 21 December 2012 - 10:21 PM   Best Answer

Hi,  We're not able to provide CSS solutions here, and I strongly recommend using Firebug or Chrome's Inspection Tools for your development work on what seems a very nicely done site. 

 

This is your problem CSS:

Please Login or Register to see this Hidden Content

As you can see, it's adding a 2 pixel text shadow of black to the menu items.  The problem with this is that IE doesn't really support shadows, opacity, transparency of a number of manipulations of text. 

 

If you like this effect in other browsers, leave it, but use our Browser Specific CSS plugin (free in the Store) to modify it for IE, removing each 2px and replacing them with one 0 (zero).



#3 webmktco

webmktco

    Super Member

  • Members

  • 176 posts
  • Country: Country Flag

Posted 21 December 2012 - 10:39 PM

First off- thanks for the response!  

 

Initially I was in the PL+ live chat and they directed me to the forum for CSS help.  

 

As for the shadow- I've also added a IE fix, so the text shadow works in IE.  I'm just having issues w/ the menu BG active and hover states.

 

I do use Firebug, but the one drawback is you can't view hover states with Firebug.



#4 webmktco

webmktco

    Super Member

  • Members

  • 176 posts
  • Country: Country Flag

Posted 21 December 2012 - 10:59 PM

I've never liked Chrome's inspect element tool, but it actually works better when trying to pinpoint stubborn CSS rules.


I fixed the issue.

 

Thanks for your input.   :)



#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 December 2012 - 11:47 PM

You can view :hover in firebug by clicking the little drop down arrow next to the style tab and selecting it.

 

Please Login or Register to see this Hidden Content

 

Check hover, active, focus and it will add them to the css for the element you're inspecting


  • Simon_P likes this

#6 webmktco

webmktco

    Super Member

  • Members

  • 176 posts
  • Country: Country Flag

Posted 22 December 2012 - 04:33 PM

Nice!  Too bad I didn't come here a couple years ago- woulda saved me lots of time.