Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    I have a navbar containing a text line with links.

    The text line gows like this: "link | link2 | link3 | link4" etc

    If I use a code (supplied by Shadowfiend)
    Code:
    a:link {
      margin: 0 1.5em;
    }
    ...it all works out great if I put it on a test file only containing the above example line.
    But on the site in question (testbed mind you), it collapses.

    Why does this happen?

    --------

    [SIZE="1"] [I]
    If you don't understand the problem, here it is:

    I want to achieve the following:

    link (space)(space)|(space)(space)link2 (space)(space)|(space)(space)link3 (space)(space)|(space)(space)etc

    Instead I get this:
    link|link2|link3|etc
    S. Rosland

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    On your test page I get the result you are after.

    link (space)(space)|(space)(space)link2 (space)(space)|(space)(space)link3 (space)(space)|(space)(space)etc

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    The spacing looks fine on my PC too (IE6.0)
    The only thing to check for is an 800 pixel browser. The last link
    is line-fed to the next line. It doesn't fit across an 800 pixel window.


  5. #4
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Strange!!!!

    I have tested it on various browsers on my three available computers here (in my condo), plus various computers at work (different cities), and they all share ONE common feature:

    They collapse the nav line!

    On every computer I've tried, the line reads "link|link|link" (no spaces. BTW the navline is supposed to stretch almost the full length of the underlying color gradiented bar, is that what you see?).

    Fantastic that you guys can see it as it was supposed to be, but on this end it collapses (fills only the first 50% of that bar).
    If I make a simple demo script just containing "link|link|link" with the appropriate CSS, it works! It's just the actual page that refuses to cooperate. :cross-eyed:
    S. Rosland

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Screenshot from my PC at home (IE6.0 800 pixel monitor) ...
    Attached Images Attached Images


  7. #6
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by mlseim
    Screenshot from my PC at home (IE6.0 800 pixel monitor) ...
    Strange!

    I can see that the spacing works from your nest, however, apperantly you miss the images that represent the banner etc.
    Do you see the final page as attached, or do you see a monster as the one you attached (with no images, but the navbar spacing correct)

    EDIT!
    BTW, I can see link underlining in your screenshot. I have declared "text-decoration::none" so it is very disheartening to see that underlining still occurs.
    As you can see from my attachment, I see no underlining.
    Attached Images Attached Images
    S. Rosland

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    All right a few things about the code I don't like.

    1) Correct me if I'm wrong anyone.. I think when you display all four states of the links in a single style sheet, they need to be in a certain order; link, visited, hover, active. This is important because of order of priority, meaning one can overide the other.

    2) The links collapse for the visited links. When I clicked on a link, it went to a 404 page. When I went used the back button, whatever link I clicked previously is the one that collapsed. See below for a way to avoid this.

    3) Also you may want to code the css so that your links attributes are defined WITH the containing div, otherwise all of your links in the site will carry the same attributes, unless that's what you want.
    Something like this:

    #links a
    {
    margin: 0 1.5em;
    font-size:13px
    ;
    color: white ;
    text-decoration: none;
    }
    #links a:hover
    {
    color: yellow ;
    }


    Now those are the only 2 you need to declare in your style sheet. Style everything in the "a" The visited and active will carry the attributes from the "a" selector. For the hover state,only put attributes in that you want different from the "a" selector. You only need to declare all four selectors in your stylesheet if you want all of them different. In your case you only want the hover different right?

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Your top banner image problem has to do with it being a PNG image.
    That is a problem with IE (background image opacity).


  10. #9
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by aeroweb99
    All right a few things about the code I don't like.
    Thanks for excellent advice. I'll make the necessary changes.

    Quote Originally Posted by mlseim
    Your top banner image problem has to do with it being a PNG image.
    That is a problem with IE (background image opacity).
    Strange!
    The display of the banner image works in all versions of browsers (including IE) I've tried (?)
    S. Rosland

  11. #10
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Strange.

    If I change the CSS to this:
    Code:
    #links a{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:13px;
    	color: white ;
    	text-decoration: none ;
    	margin: 0 1.5em;
    	font-size:13px;
    	color: white ;
    	border:0;
    	position:absolute;
    	top:135px;
    	left:15px;
    	z-index:3;
    }
    #links a:hover {
      color: yellow ;
    }
    Then everything collapses as shown in the attached image.
    ???
    Attached Images Attached Images
    S. Rosland


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com