Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu isn't working properly. Anyone spot my errors so I can learn and fix?

    Hi.

    This page has a horizontal, CSS based menu. There are only two effective links while I test my code, 'home' and 'testimonials'.

    http://www.thunderin.co.uk/shaun/v3/

    If I click on any menu item the text size is correct. If I then click onto the body of the page the text within the menu item suddenly shrinks down to teeny weeny.

    The green colour of the text identifying the current page is inconsistent. It doesn't appear on first opening the page unless I click on the menu item for the page and it doesn't appear on the testimonials page at all.

    To my inexperienced eye the CSS looks OK, but it doesn't work as expected so it obviously isn't. Both HTML and CSS validate with W3C therefore it's a logic problem, not bad code. It must also be partly related to the cascade of text sizing, I guess.

    It's equally as wierd in IE7 as it is in FF 2.

    Can anyone explain what I have done wrong here? Have I misunderstood the interactions in the links? I guess I must have.

    Thanks.

    Mike.
    --
    Newbie, learning.
    Regards from the UK.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    The problem seems to be caused by a combination of two things, although I don’t know why that particular effect is produced. The two things that seemed to be relevant:

    • The shrinkage seems to only affect anchor elements that refer to a URI of “#”. You really shouldn’t use that anyway; either fill in real URIs or leave out the href attribute.
    • Take note that the selector #menulist a:link, a:visited is not the same as #menulist a:link, #menulist a:visited. The problem goes away when I change the former to the latter.


    This is a bit unrelated, but you can significantly increase the efficiency of the following code:

    Code:
    #menulist a:link, a:visited
    {
    display: block;
    text-decoration: none;
    font: bold 1.3em Arial;
    color: #ffffff;
    width: 100px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: 4px;
    background-image:url(menubutton.gif);
    background-repeat: no-repeat;
    padding-top: 4px;
    text-align:center;
    }
    
    
    #menulist a:hover
    {
    display: block;
    text-decoration: underline;
    font: bold 1.3em Arial;
    color: yellow;
    width: 100px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: 4px;
    background-image:url(menubuttonhover.gif);
    background-repeat: no-repeat;
    padding-top: 4px;
    text-align:center;
    }
    
    
    #menulist a:active
    {
    display: block;
    text-decoration: none;
    font: bold 1.3em Arial;
    color: red;											/*testing purposes*/
    width: 100px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: 4px;
    background-image:url(menubutton.gif);
    background-repeat: no-repeat;
    padding-top: 4px;
    text-align:center;
    }
    Revised:

    Code:
    #menulist a {
    	float: left;
    	width: 100px;
    	height: 30px;
    	margin: 0 4px 0 0;
    	padding: 4px 0 0;
    	background: url("menubutton.gif") no-repeat;
    	color: white;
    	text-align: center;
    	text-decoration: none;
    	font: bold 1.3em Arial, Helvetica, sans-serif;
    }
    #menulist a:hover {
    	background-image: url("menubuttonhover.gif");
    	color: yellow;
    }
    #menulist a:active {
    	background-image: url("menubutton.gif");
    	color: red;
    }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the answer. One thing I have discovered about this place is the SPEED that someone can look at a problem and diagnose it, all for the love of it. A rare and bueatiful thing!

    Quote Originally Posted by Arbitrator View Post
    The problem seems to be caused by a combination of two things, although I don’t know why that particular effect is produced.
    You don't? Look out, the walls are tumbling down!

    Quote Originally Posted by Arbitrator View Post
    The two things that seemed to be relevant:
    [*]The shrinkage seems to only affect anchor elements that refer to a URI of “#”. You really shouldn’t use that anyway; either fill in real URIs or leave out the href attribute.
    Aha, one silly mistake. Will correct in a few minutes... I'm learning but I forget so quickly. Sigh.

    Quote Originally Posted by Arbitrator View Post
    [*]Take note that the selector #menulist a:link, a:visited is not the same as #menulist a:link, #menulist a:visited. The problem goes away when I change the former to the latter.
    Again, a silly mistake.

    Quote Originally Posted by Arbitrator View Post
    This is a bit unrelated, but you can significantly increase the efficiency of the following code:
    <Snip code for brevity.>

    So, the second and third blocks of css are inheriting the rest of their characteristics from the ones above in the text file? I thought inheritence was a logical thing, parent / child etc rather than the order they were parsed from the text file.

    I Must read more on this. (And that, and the other... yadda yadda.)

    Again, thanks for the pointers.

    Mike.
    --
    Newbie, learning.
    Regards from the UK.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmmm.

    Working locally, not online:

    1. If I remove the <href="#"> completly from the anchor then the menu breaks completly. No images show for these items and the list alignment goes tits up.

    2. If I just remove the # and leave the <href=""> then selecting one of the links selects the directory.

    3.
    "Take note that the selector #menulist a:link, a:visited is not the same as #menulist a:link, #menulist a:visited."
    OK, changed that. It now reads...

    Code:
    #menulist a:link,
    #menulist a:visited
    {
    	display: block;
    	text-decoration: none;
    	font: bold 1.3em Arial;
    	color: #ffffff;
    	width: 100px;
    	height: 30px;
    	float: left;
    	display: inline;
    	margin-right: 4px;
    	background-image:url(menubutton.gif);
    	background-repeat: no-repeat;
    	padding-top: 4px;
    	text-align:center;
    }
    
    
    #menulist a:hover
    {
    	background-image: url("menubuttonhover.gif");
    	color: yellow;
    }
    
    
    #menulist a:active
    {
    	background-image: url("menubutton.gif");
    	color: red;
    }
    Now I get a green 'home' to start, good. Click on Testimonials... no green and the text gets bigger!

    I'm off to the garden for 10 mins. Been looking at this for too long.

    Thanks anyway.
    --
    Newbie, learning.
    Regards from the UK.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got It!

    I found this...

    Code:
    #atsshome #lihome a,
    #atsstests #litestimonials
    {
    ...instead of this...

    Code:
    #atsshome #lihome a,
    #atsstests #litestimonials a
    {
    ...in my CSS! At last. Validation doesn't do everything!
    --
    Newbie, learning.
    Regards from the UK.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Collywobbles View Post
    So, the second and third blocks of css are inheriting the rest of their characteristics from the ones above in the text file? I thought inheritence was a logical thing, parent / child etc rather than the order they were parsed from the text file.
    Nothing is being inherited. You style the anchor element. Then you style the pseudo‐classes :link, :visited, :hover, :focus, :active if you want something to change when the psuedo‐class is active.

    In other words, a and a:hover refer to the same element. The second only affects the hover state of the element. If, for example, the :link (unvisited link) state will be identical to the original state, then there’s no need to specify that pseudo‐class.

    Quote Originally Posted by Collywobbles View Post
    1. If I remove the <href="#"> completly from the anchor then the menu breaks completly. No images show for these items and the list alignment goes tits up.
    A significant difference between the plain a and a:link:visited is that the second only applies to anchors that are links (with a href attribute). Internet Explorer 6 also does not apply the :hover or :active pseudo‐classes to anything except anchor elements that are links.

    Quote Originally Posted by Collywobbles View Post
    2. If I just remove the # and leave the <href=""> then selecting one of the links selects the directory.
    Having a blank href attribute makes no sense either; that would be a link that leads to nowhere. <a href="/"> makes sense though; it points to the root directory.

    The main reason that I mention this (aside from how it affected your problem) is that I see people using poor code like this in finished documents:

    • <a href="#" onclick="doSomething();">
    • <form action="#">


    Being that your document doesn’t appear to be finished, it doesn’t matter much, although it would make more sense to test your pages with something actually correct, such as <a href="/">, mentioned above, until you figure out what the real URI will be. Then, hopefully, you won’t run into any more weird bugs like this.

    Quote Originally Posted by Collywobbles View Post
    Click on Testimonials... no green and the text gets bigger!
    I guess that you fixed this since I’m not seeing the noted problems.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Nothing is being inherited. You style the anchor element. Then you style the pseudo‐classes :link, :visited, :hover, :focus, :active if you want something to change when the psuedo‐class is active.

    In other words, a and a:hover refer to the same element.
    Some snipped.

    Again, thanks for the insights on how this stuff works.


    Quote Originally Posted by Arbitrator View Post
    <a href="/"> makes sense though; it points to the root directory.
    Never seen this before. But, now I know I'll use it. The original hash version was part of a cut n paste some time in history.

    Quote Originally Posted by Arbitrator View Post
    The main reason that I mention this (aside from how it affected your problem) is that I see people using poor code like this in finished documents:

    • <a href="#" onclick="doSomething();">
    • <form action="#">


    Being that your document doesn’t appear to be finished,
    Hah! Not by a lonnnnnggg way!

    Quote Originally Posted by Arbitrator View Post
    it doesn’t matter much, although it would make more sense to test your pages with something actually correct, such as <a href="/">, mentioned above, until you figure out what the real URI will be. Then, hopefully, you won’t run into any more weird bugs like this.
    Knowing the correct ways of doing even the simple things like this makes life so much simpler.

    Quote Originally Posted by Arbitrator View Post
    I guess that you fixed this since I’m not seeing the noted problems.
    Yep. See post above.

    Again, thanks for the input. But I feel another thread coming on soon on flash and divs!

    Mike.
    --
    Newbie, learning.
    Regards from the UK.


  •  

    Posting Permissions

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