Back To Website Design Forum

CSS blows my mind

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post January 22nd, 2010, 4:21 pm

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.
#define NULL (::rand() % 2)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 22nd, 2010, 4:21 pm

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post January 22nd, 2010, 4:32 pm

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/
#define NULL (::rand() % 2)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post January 22nd, 2010, 5:53 pm

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.  
Use your words like arrows to shoot toward your goal.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post January 22nd, 2010, 6:46 pm

Awesome, thank you.
#define NULL (::rand() % 2)

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 72 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.