SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue with IE6 CSS and SPRY

    I have this spry drop down menu and whenever you hover over a menu item using IE6, the hover color changes to #88b2ea. Problem is that IE6 is choosing that color automatically and I cannot figure out how to change it. Any ideas?

    Here is the menu:
    http://www.jwebxpress.com/portfolio/jwx_2/

    Here is the CSS file:
    http://www.jwebxpress.com/portfolio/...styles/ie6.css

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Too bad Javascript is required to view content : (

    So based on just your text, likely IE6 is just taking some older value and really wants you to be more specific.

    In making dropdowns (and tables and other things) I've sometimes found that IE6 required me to make a separate, hidden-away statement that was simply more specific for link colours. I would hide them behind the Tan Hack just to make sure repeating something didn't screw with other browsers:

    (some page I had a calendar table with clickable days)

    td {
    colour set here;
    }

    td a {
    styles and link colour here;
    }

    td a.foo {
    other styles;
    }

    td a:hover {
    special hover styles and colour;
    }

    IE would then need something like
    * html #table td a { color: #f00;}
    and
    * html #table td a:hover {color: #0f0;}

    or something.

    At least testing that out could tell you if my hunch is in the right direction.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing you are using PNGs on your page so you need to use a PNGfix for that, like twinhelix

    Second, remove that stylesheet you have for IE6 specifically, it's not needed at all.

    Get that PNG fix in there first and then we will worry about everything else.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I got the pngfix in place but I do not know which tags ti add to it.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well go throuigh your HTML/CSS and figure out which elements have PNGs applied.

    Then just add onto the selector as such
    Code:
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style>
    Note that the location of the PNGfix may vary depending on where you put it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only locations where I have png's are:

    These first two are the only transparent ones.

    In styles.css
    Code:
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    
    {
    
    	background:url(../_images/linkBackground.png) repeat-x;
    
    	color: #FF0;
    
    	text-decoration:underline;
    
    }
    
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    
    {
    
    	background:url(../_images/linkBackground.png) repeat-x;
    
    	color: #FF0;
    
    }
    in SpryMenuBarHorizontal.css
    Code:
    #navHeader {
    
    	background:url(../_images/navHeader.png) repeat-x;
    
    	display:inline;
    
    	float:left;
    
    	height:300px;
    
    	margin:0 auto;
    
    	width:900px;
    
    }

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well sincve one PNg is applied to <a> we will addd that to our list..#navHeader in the HTML is a <div> so lets add that..

    <style type="text/css">
    img, div, a{ behavior: url(iepngfix.htc) }
    </style>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't for the life of me figure this out. I've included a link to the files if anyone is willing to give it a shot.

    http://www.jwebxpress.com/jwx_2.rar

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a little progress but it does not allow repeat-x

    http://www.jwebxpress.com/portfolio/jwx_2989/

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I almost got it working. I added:
    Code:
    <script type="text/javascript" src="iepngfix_tilebg.js"></script>
    But now I have this problem (Seems to float to the right):

    Attached Images Attached Images

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have you updated the link as I'm seeing something different in Ie6? (I believe you also need to the whatever:hover with that script if you want to add transparency on rollover in IE6 (unless your other script is handling it somehow))

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, make sure the padding/margins are set to 0 on the <ul> and you don't set a width on the <ul> dropdown

    I'm not seeing it either so if you are still seeing it then you might wanna clear your cache.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll look into both suggestion and get back with an update. I did clear my cache however and even tried it on a different computer and I'm still getting the same effect.

    Quote Originally Posted by Paul O'B View Post
    Have you updated the link as I'm seeing something different in Ie6? (I believe you also need to the whatever:hover with that script if you want to add transparency on rollover in IE6 (unless your other script is handling it somehow))
    Quote Originally Posted by RyanReese View Post
    Hi, make sure the padding/margins are set to 0 on the <ul> and you don't set a width on the <ul> dropdown

    I'm not seeing it either so if you are still seeing it then you might wanna clear your cache.

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:
    Okay, removed the padding but now all my links are all mushed together. Is there another way beside padding I can us to separate the items?

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I found the problem. Originally for padding I had
    Code:
    padding: 1em 1.3em;
    I seems when I changed the 1.3em to 10px, this fixed the problem. I think that IE6 is having problems with em's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •