SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Off-color links

  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Off-color links

    Off Topic:

    "off color links" ... you wish, Ryan.


    Went a different direction on this mockup and am (moderately) pleased with the result -- for one, the navbar doesn't break the scheme in IE anymore.

    But this is too weird. In IE6, the top three sidebar links are white instead of their designated color. Here's the CSS:

    Code CSS:
    #listcolutilities {	padding-top: .5em;}
    #listcolutilities a:link, a:visited,
    #listcolutilities2 a:link, a:visited {
    color: #333;
    border-bottom: none;
    }
    #listcolutilities a:hover,
    #listcolutilities2 a:hover {
    background-color: #f7f7f7;
    color: #26466D;
    border-bottom: none;
    }
    #listcolutilities li,
    #listcolutilities2 li {
    font-size: 1em;
    padding: .25em;
    list-style-type: none;
    }

    and here's the pertinent HTML:

    Code HTML 4.01 Strict:
    <div id='font_change'>
    <ul id="listcolutilities">
    <li><img src="images/icons/font_add.png" alt="Increase Text Size"><a href="#" id='large'>&nbsp;Increase Text Size</a></li>
    <li><img src="images/icons/font_delete.png" alt="Decrease Text Size"><a href="#" id='small'>&nbsp;Decrease Text Size</a></li>
    </ul>
    </div>
    <ul id="listcolutilities2">
    <li><img src="images/icons/printer.png" alt="Print this page"><a href="#" title="Print this page" onClick=" window.print(); return false">&nbsp;Print this page</a></li>
    <li><img src="images/icons/sitemap_color.png" alt="Sitemap"><a href="sitemap.html" title="Sitemap">&nbsp;Sitemap</a></li>
    </ul>

    (I created the listcolutilities2 designation so I could use separate IDs instead of the original "listcolutilities" classes, thinking it might be an issue with the original class being superseded by link classes later on in the CSS. Haven't changed it back, and it didn't seem to make a difference.)

    The only difference I can see is the placeholder links: <a href="#"> Changing them to actual URLs, such as foobar.com, solves the problem. However, I can't change the # placeholders in these three, because they don't actually go anywhere, but trigger behaviors -- increasing font size, decreasing font size, and printing.

    And just for more fun, inserting a !important in this line:

    Code CSS:
    color: #333;

    "fixes" the problem, but also forces a color change in the first row of links in the footer.

    To quote Stomme, I be confuzled. Why would a # placeholder link send IE into a snit? And how can I fix it?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Huh? I don't get it


    Hi, the white color links are set later in the CSS file then the #333 color link and as a result (they have same specificity it looks like) IE6 is using that.

    Place that code you have later in the source file (after the #headerlink a stuff)
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Specificity, that was the word I wanted. I thought it might be something along those lines. IE6 just can't keep its link colors within their designated classes, it seems.... A much easier fix than the last one, thanks.

    Off Topic:

    Off-color

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Still don't get it but whateer lol . I'm slow with that stuff. Anything non CSS .

    You're welcome
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Max, just a quick note: In a high resolution (like mine) the header (etc) doesn't span the full width of the page, yet the search and social network function does, meaning the design looks slightly wonky on that side (as it's floating out there like an island on it's own). The footer suffers a similar offset problem!

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Max, just a quick note: In a high resolution (like mine) the header (etc) doesn't span the full width of the page, yet the search and social network function does, meaning the design looks slightly wonky on that side (as it's floating out there like an island on it's own). The footer suffers a similar offset problem!
    Mph. What display are you using? Got any ideas on resolving those?

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I use 1366 x 768 (Wide-screen laptop). My guess (Without looking at the code) is you have absolute positioning on the right hovering element and a fixed width value to the main body of content (overflowing), you would need to either use CSS floats so it's contained within the content or make the content span 100&#37; width

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's not going out past 1200px because of hte max-width set on the body
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You realise that all visited links are being styled here and not just the listcolutilities ones?

    Code:
    #listcolutilities a:link, a:visited,
    
    #listcolutilities2 a:link, a:visited {
    
    color: #333;
    
    border-bottom: none;
    
    }
    It should be of course:

    Code:
    #listcolutilities a:link,#listcolutilities a:visited,
    #listcolutilities2 a:link,#listcolutilities2 a:visited {
    color: #333;
    border-bottom: none;
    }

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I saw that in the beginning I just never got around to mentioning that lol
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Paul walked me through fixing something like this a few months ago; being the chucklehead I am, I made the same error this time around. Also fixed the listutilities link, and the searchbox positioning issue, using float:right and a negative top margin. Made those changes (along with getting rid of the social icons -- client doesn't want 'em). It seems to work in a higher display now. What do you guys think?

    If this passes muster, I'm just going to center the content and let it be until I get some material from the client to begin putting the whole site together.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It seems very stable, I went thorugh and did a minor test on it (not very thourough) but it seems to be a very well built page!

    Very nice lookin' too
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  13. #13
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Well, thank you, kind sir. I blush, I simper. If you or anyone wants to put it through more rigorous testing, please do. I'd like it to be bulletproof!

    I actually wonder if the design/color scheme isn't a bit bland, but I'm going to wait for the client to take a look and give me some input before I go a-tweaking. It will more than likely end up in Website Reviews, where all the guys whose designs I diss can have their revenge.


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
  •