Grow your CSS skills. Land your dream job.

Links not working in IE

  • # February 2, 2009 at 11:44 am

    Hi:

    I’m a newcomer to this forum and to building a website. I’m on a Mac OS 10.4, and my site works fine with Safari, Firefox, and IE for Mac … but friends with various incarnations of IE for the PC tell me the links aren’t working. They’re either not there or they wind up at the wrong page.

    I’m wondering if this could be because I’ve attempted to set up two different sorts of links, i.e., cream type on a dark background for the left and bottom nav bars, and colored (red/green/blue) links on the cream-colored content pages.

    If anyone wants to pitch in and help, here’s my website address:

    http://www.maggiedana.com

    I’m pasting my CSS code below. It’s a bit unwieldy and I’m sure could be tightened up, but I come from the world of print layout (I’m a book designer and typesetter) and we approach styles rather differently, hence the staggering number I’ve created in my css stylesheet.

    Many thanks,
    Maggie

    ps: get ready for reams of code!

    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #fefce3;
    background-image: url(images/good-curlies.jpg);
    background-repeat: repeat;
    }
    #wrapper {
    text-align: left;
    width: 960px;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: url(images/navbar_background.png);
    background-repeat: repeat-y;
    background-color: #3f3c33;
    }
    #header {
    height: 229px;
    }
    #contentfirstpage {
    margin-top: 0px;
    padding-top: 0px;
    }
    h1 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 20px;
    font-style: italic;
    line-height: 24px;
    font-weight: normal;
    color: #CC114D;
    text-align: left;
    padding-top: 12px;
    padding-bottom: 0px;
    padding-left: 50px;
    }
    h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #CC114D;
    padding-left: 50px;
    }
    h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 12px;
    color: #CC114D;
    }
    .cover_right_small {
    float: right;
    padding-right: 25px;
    padding-left: 12px;
    }
    .story_location {
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    }
    .story_date {
    font-style: italic;
    text-align: center;
    padding-bottom: 24px;
    font-size: 13px;
    }
    .red_rule {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #CC114D;
    margin-right: 50px;
    margin-left: 50px;
    margin-bottom: 12px;
    margin-top: 0px;
    }
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    margin-top: 2px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    line-height: 20px;
    }
    #leftnavbar {
    float: left;
    width: 215px;
    padding-bottom: 12px;
    padding-top: 3px;
    }
    .leftnavbar_text {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    font-weight: normal;
    color: #fefce3;
    text-align: left;
    padding-left: 28px;
    letter-spacing: 3px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }
    #rightcol {
    width: 700px;
    padding-right: 25px;
    float: left;
    padding-left: 10px;
    }
    #bottomnavbar {
    clear: both;
    background-color: #3f3c33;
    }
    .cover_image_right {
    float: right;
    padding-left: 20px;
    }
    .bottomnavbar_text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #fefce3;
    }
    .old_flames {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 20px;
    font-style: italic;
    text-align: left;
    padding-top: 18px;
    color: #fefce3;
    padding-left: 12px;
    }
    .click_to_order {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #fefce3;
    text-align: left;
    padding-bottom: 12px;
    padding-left: 12px;
    }
    .stickupcap_white {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 30px;
    color: #fefce3;
    }
    .stickupcap_red {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 30px;
    color: #CC114D;
    }
    .carrie_author {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 14px;
    color: #fefce3;
    text-align: right;
    padding-top: 12px;
    padding-right: 200px;
    padding-bottom: 12px;
    }
    .book_title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    padding-bottom: 12px;
    padding-left: 24px;
    }
    img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    a:link {
    color: #fefce3;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #fefce3;
    }
    a:hover {
    color: #fefce3;
    text-decoration: none;
    background-color: #93907F;
    }
    a:active {
    text-decoration: none;
    color: #fefce3;
    }
    .navbar_bullet {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 50px;
    font-weight: bold;
    color: #CC114D;
    }
    .lowernavbar_bullet {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #CC114D;
    }
    .large_space {font-size: 24px}
    .carrie_blurb {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    padding-left: 30px;
    color: #fefce3;
    }
    #name_of_page {
    text-align: left;
    width: 660px;
    padding-bottom: 15px;
    padding-top: 10px;
    margin-left: 0px;
    }
    #main_content {
    background-color: #fefce3;
    text-align: left;
    width: 645px;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-left: 18px;
    }
    .maintext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    line-height: 22px;
    text-align: left;
    text-indent: 24px;
    padding-right: 50px;
    padding-left: 50px;
    }
    .maintext_flushleft {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    line-height: 22px;
    text-align: left;
    text-indent: 0px;
    padding-right: 50px;
    padding-left: 50px;
    }
    .maintext_flushleft_spacebelow {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    line-height: 22px;
    text-align: left;
    text-indent: 0px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 12px;
    }
    .author_flush_right {
    text-align: right;
    padding-top: 0px;
    padding-bottom: 36px;
    padding-right: 50px;
    }
    .childrensblurb {
    font-style: italic;
    padding-right: 75px;
    padding-bottom: 12px;
    padding-left: 75px;
    font-size: 13px;
    }
    .main_text_cAPS_red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    color: #CC114D;
    letter-spacing: 1px;
    }
    .image_left {
    float: left;
    margin-bottom: 10px;
    margin-right: 15px;
    margin-top: 5px;
    }
    .image_right {
    float: right;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 15px;
    }
    .maintext a:link {
    color: #CC114D;
    font-weight: bold;
    }
    .maintext a:visited {
    color: #336600;
    font-weight: bold;
    }
    .maintext a:hover {
    color: #336699;
    background-color: #fefce3;
    }
    .maintext a:active {
    color: #768789;
    }
    .maintext_flushleft_spacebelow a:link {
    color: #CC114D;
    font-weight: bold;
    }
    .maintext_flushleft_spacebelow a:visited {
    color: #336600;
    font-weight: bold;
    }
    .maintext_flushleft_spacebelow a:hover {
    color: #336699;
    background-color: #fefce3;
    }
    .maintext_flushleft_spacebelow a:active {
    color: #768789;
    }
    .click_to_order a:link {
    color: #fefce3;
    }
    .click_to_order a:visited {
    color: #fefce3;
    }
    .click_to_order a:hover {
    color: #fefce3;
    font-style: italic;
    }
    .click_to_order a:active {
    color: #768789;
    }
    .fabricart a:link {
    color: #CC114D;
    font-weight: bold;
    }
    .fabricart a:visited {
    color: #336600;
    font-weight: bold;
    }
    .fabricart a:hover {
    color: #336699;
    background-color: #fefce3;
    }
    .fabricart a:active {
    color: #768789;
    }
    .letter {
    font-style: italic;
    padding-top: 12px;
    padding-right: 75px;
    padding-bottom: 12px;
    padding-left: 75px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .red_12_pt_sans {
    color: #CC114D;
    font-size: 12px;
    }
    table {
    background-color: #fefce3;
    margin-left: 36px;
    }
    .photo_caption {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    }
    .fabricart {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 12px;
    padding-left: 0px;
    text-transform: none;
    }

    # February 2, 2009 at 1:04 pm
    "Maggie" wrote:
    snip

    saying that something does not work does not help us….. tell us exactly what the problem is:
    example, what links don’t work? what versions of IE don’t work.

    it won’t be because you have 2 different styles for links, as long as you have declared the link styles correctly and gave the correct id/class to the links, then you should not have a problem

    we wont go through your site/ every page/every link in every browser just to find the problem.

    So come on, give us something better to go on,

    by the way your site looks good

    # February 2, 2009 at 2:44 pm

    I checked it out in IE 7 and I see what you are talking about now Maggie. REALLY weird problem, I can see how you are frustrated. I think the problem might be the line-height. Something is making those <p> Boxes far too tall in IE and it covers up the links above it so the hover doesn’t work.

    [img]http://css-tricks.com/forum-pics/linkcheckbox.png[/img]

    I’d try killing that line height and just using margin or padding instead to get the spacing right.

    # February 2, 2009 at 3:35 pm
    "chriscoyier" wrote:
    I’d try killing that line height and just using margin or padding instead to get the spacing right.

    Or simply creating an unordered list (<ul>).

    # February 2, 2009 at 4:30 pm

    Thanks, guys. I’ll try reducing the line height (leading) and use padding/margins instead to space things out a bit. As for a UL … I had thought of that but wanted more control over the size and color of the bullet. I couldn’t find a way to increase its size or change its color via CSS, especially when it was also a link. If there is a way … please tell me where to find out about it.

    Like I said, I’m a print typesetter and we have different ways of doing things! Controlling color and size of bullets is pretty straightfoward in Quark or ID … then again, we’re not also asking them to pose as links as well.

    If I may, I’ll come back and ask for someone to check my site again once I’ve done the fixes. Being on a Mac with no direct access to a PC with IE, I’m at the mercy of kindly strangers.

    Maggie

    # February 2, 2009 at 4:45 pm

    You can actually have complete control over your listed item’s bullet/background.

    It’s rather quite simple!

    CSS:

    Code:
    .list custombulletname {
    background:url(images/imagename.gif) center left no-repeat; /* This is your custom bullet image */
    padding-left:15px; /* This moves your text over so that it’s not covering the custom bullet, change to suit your needs (bullet size) */
    list-style:none;
    }

    HTML

    Code:
    • Item 1
    • Item 2
    • Item etc…

    Also, here’s a great article:
    http://www.alistapart.com/articles/taminglists/

    # February 2, 2009 at 5:59 pm

    Thanks, Doc. I’ll experiment with a GIF. I had already thought about using a GIB image (bullet) here but figured a plain text navigation link would download quicker.

    Maggie

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".