CSS blows my mind

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Alright, so I'm currently working on a website. For the main navigation I had some rollover links working, simple background color changes. Well in IE they weren't displaying correctly so I decided to just remove the code and insert a comment if for a new style sheet.

Code: [ Select ]
<link href="style.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link href="style_ie.css" rel="stylesheet" type="text/css">
    <![endif]-->
  1. <link href="style.css" rel="stylesheet" type="text/css">
  2.     <!--[if IE]>
  3.     <link href="style_ie.css" rel="stylesheet" type="text/css">
  4.     <![endif]-->

I went to test this out in the preview IE browser inside of Aptana. To my amazement the rollover links magically started working after I added the new style sheet in the if statement. This confused me at first because the style sheet it was suppose to add if the browser is IE, doesn't have the code to do the roll overs (Technically it still has the code for the roll overs because I've already included it in the first style sheet), but still!!! It started working. I did some testing, I removed the if comment and it stopped working, and the display broke in other browsers like Chrome and FF. I then decided to just remove the second style sheet and go back to my first. Now it works in Both IE, Chrome and FF. I'm basically back to were I started but everything seems to be working... I'm guessing there is some magical caching working here. I'll clear the browser cache and see what happens. If that fails I'll post the code online and let you guys test it out so I dont go crazy.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Alright, I cleared my cache for all my browsers and its still working and I have no idea why because its the same style sheet I used when it was broken. If some one could look at this page and tell me if the navigation under the banner is displaying that would be great!

http://tke.travisperson.com/
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

not working for IE6 or IE7

Works in chrome, FF3.5.

however, you did mispell one of your properties:
CSS Code: [ Select ]
ul.inline_block li:hover
{
    padding: 0px;
    display:inline-block;
    backgrond-color: #6a6a6a;
}
 
  1. ul.inline_block li:hover
  2. {
  3.     padding: 0px;
  4.     display:inline-block;
  5.     backgrond-color: #6a6a6a;
  6. }
  7.  


backgrond-color doesn't have a "u" in it.

Also, from what i gather, IE6 doesn't understand "inline-block" as a display property. I generally just set these to "display:block", give them a width, and then "float:left" to keep them cross browser compatible. The following seemed to work okay when I tested it:
CSS Code: [ Select ]
UL.inline_block LI {
    TEXT-ALIGN: center;
    WIDTH: 90px;
    DISPLAY: block;
    FLOAT: left;
}
UL.inline_block LI:hover {
    backgrond-color: #6a6a6a
}
 
  1. UL.inline_block LI {
  2.     TEXT-ALIGN: center;
  3.     WIDTH: 90px;
  4.     DISPLAY: block;
  5.     FLOAT: left;
  6. }
  7. UL.inline_block LI:hover {
  8.     backgrond-color: #6a6a6a
  9. }
  10.  


The only problem with this is that you won't be able to see the hover state in IE6 because IE6 only understand the pseudo class ":hover" when applied to "a" tags. The best way to fix this problem is to define your css as follows:
CSS Code: [ Select ]
UL.inline_block LI {
    TEXT-ALIGN: center;
    WIDTH: 90px;
    DISPLAY: block;
    FLOAT: left;
}
 
UL.inline_block LI a {
    display: block;
    width: 100%;
}
 
UL.inline_block LI a:hover {
    background-color: #6a6a6a;
}
 
  1. UL.inline_block LI {
  2.     TEXT-ALIGN: center;
  3.     WIDTH: 90px;
  4.     DISPLAY: block;
  5.     FLOAT: left;
  6. }
  7.  
  8. UL.inline_block LI a {
  9.     display: block;
  10.     width: 100%;
  11. }
  12.  
  13. UL.inline_block LI a:hover {
  14.     background-color: #6a6a6a;
  15. }
  16.  
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Awesome, thank you.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.