SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd CSS Behavior

    I am a network administrator working in a small non-profit employment assistance agency. I run a pseudo intro to computers class and have written a webpage specifically for the class. All it is actually are pages with links to tutorials and what-not on the internet. I have run across a behavioral issue with the pages though. I believe it to be in my css code somewhere but don't see anything out of place. I believe it to be in css due to it misbehaving exactly the same way under both firefox and explorer. I'll leave a link so whoever thinks they can help will have a chance to look through it. Here is the problem first: The links running horizontally are below the initial area they should be residing in until all of the links have been followed and then they reset themselves to the correct positions. Don't understand what I mean? Follow through to nwioic.org/puterlab/puterclass.html I will check back later to see if anyone can figure out my stupidity. Thank you in advance for any assistance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have set the line-height to 55px for all unvisted links contained within #classstage which also includes the links within #classnav. Once the links have been visited then this following style no longer applies and they return to normal line-height.

    Code:
    #classstage a:link {
      text-decoration: underline;
      font-weight: bold;
      font-size: 10pt;
      line-height: 55px;
    }
    remove the line-height from above and just set it on the links you need.

    e.g.
    Code:
    .stagetxt a{line-height:55px}
    You shouldn't be using the deprecated font tag at all but instead use a more semantic html element. As you have a list of links then you should be using an unordered list. You can set the list element to display:inline and it will align hroizontally in the same way.

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I feel completely stupid, I thought I already got rid of the line-height. Thank you for the extra set of eyes. As for the inline lists, I will implement that as well. Thank you for such a quick reply. Seven years of html and css and you'd think I could have thunk of that myself. Thank you again. You rock!


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
  •