Comments on: strange css quirk with one of my pages http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/ Just another WordPress weblog Fri, 19 Mar 2010 05:19:05 -0700 http://wordpress.org/?v=2.8.4 hourly 1 By: roque http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/comment-page-1/#comment-7340 roque Wed, 23 Dec 2009 06:25:08 +0000 http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/#comment-7340 hi prof, I fix my Exercise 1 Exercise 2, Exercise 3,and Exercise 4, Midterm. excuse for not let you know this before ... hi prof, I fix my Exercise 1
Exercise 2, Exercise 3,and Exercise 4, Midterm. excuse for not let you know this before …

]]> By: Michael http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/comment-page-1/#comment-7339 Michael Wed, 16 Dec 2009 14:56:08 +0000 http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/#comment-7339 Haha, thanks Adnan, I thought there had to be a simpler way to do it too, but couldn't think of it either. I figured out the problem... on my html, the css links points to the home page's css, not the one for Work 1 page... Haha, thanks Adnan, I thought there had to be a simpler way to do it too, but couldn’t think of it either.

I figured out the problem… on my html, the css links points to the home page’s css, not the one for Work 1 page…

]]> By: joe http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/comment-page-1/#comment-7336 joe Tue, 15 Dec 2009 06:39:25 +0000 http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/#comment-7336 Looks like you just need to alter your CSS on that particular page: <code> #home a{ background-position: 0 0; } #work1 a{ background-position: 0 -550px } </code> Set the background-position correctly. Otherwise everything seems fine. Looks like you just need to alter your CSS on that particular page:


#home a{
background-position: 0 0;
}

#work1 a{
background-position: 0 -550px
}

Set the background-position correctly. Otherwise everything seems fine.

]]> By: adnan http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/comment-page-1/#comment-7335 adnan Tue, 15 Dec 2009 02:05:13 +0000 http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/#comment-7335 Over look that code. I just realize image Sprite will not work that way. I tried, no! :) Over look that code. I just realize image Sprite will not work that way.

I tried, no! :)

]]> By: adnan http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/comment-page-1/#comment-7334 adnan Tue, 15 Dec 2009 01:41:16 +0000 http://understandingnewmedia.com/webpro/2009/12/14/strange-css-quirk-with-one-of-my-pages/#comment-7334 Interesting problem. I was trying to solve it. Then gave up. I think you can simplify your css. The way you are coding now if you have 20 menu item then you are creating 20 different ID for them! Instead of doing that you can write generic code. Example: CSS <code> .basictab{ margin: 0; padding: 0; list-style-type: none; text-align: center; } .basictab li{ display: inline; margin: 0; } .basictab li a{ text-decoration: none; margin:1px; padding: 5px 20px; } .basictab li a:visited, a:active { color: black; } .basictab li a:hover{ color: #F00; } .basictab li.selected a { padding-top: 7px; color:#F00; } </code> HTML <code> <div> <ul class="basictab"> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Work 1</a></li> <li><a href="#">Work 2</a></li> <li><a href="#">so on</a></li> </ul> </div> </code> So with the "selected" class whatever you are doing will be active. Interesting problem. I was trying to solve it. Then gave up.
I think you can simplify your css. The way you are coding now if you have 20 menu item then you are creating 20 different ID for them! Instead of doing that you can write generic code.

Example:
CSS



.basictab{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
.basictab li{
  display: inline;
  margin: 0;
}
.basictab li a{
  text-decoration: none;
  margin:1px;
  padding: 5px 20px;
}
.basictab li a:visited, a:active  {
  color: black;
}
.basictab li a:hover{
  color: #F00;
}
.basictab li.selected a  {
  padding-top: 7px;
  color:#F00;
}

HTML


<div>
  <ul class="basictab">
            <li class="selected"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Work 1</a></li>
            <li><a href="#">Work 2</a></li>
            <li><a href="#">so on</a></li>

  </ul>
</div>    

So with the “selected” class whatever you are doing will be active.

]]>