Advanced Search

Results 1 to 3 of 3

Thread: IE CSS Issues

  1. #1
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default IE CSS Issues

    Hello folks -

    I've been working on an accessible website, have used several DD nav scripts and all have worked great. The question I have is actually regarding a slight shifting of links/images when moused over in IE5-6. I realize the padding/margins double in IE and I have the 8 main icons in the center of the home page floated in two columns so narrow resolutions will push the 2nd column down. When mousing over the "Community Living" or "Assistive Technology" icon text/image links, the image and text shift up about 5 pixels. My page is valid and I've tested the site in every browser I can find and this is the only issue I have to fix before we go live.

    Here's the website -
    http://72.167.136.99/index.shtml

    The css file is a bit big, so I didn't copy it all here but its located here -
    http://72.167.136.99/css/styles.css



    CODE -
    Here's the XHTML code for the icons -

    <div class="homeboxcontainer">

    <div class="homeboxcontainer_right">

    <div class="homebox_blue">
    <a href="programs/technology.shtml" tabindex="230">Assistive Technology<br />
    <img src="images/HOME_AssistiveTechnology.jpg" alt="Assistive Technology" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>
    <div class="homebox_purple">
    <a href="programs/employment.shtml" tabindex="250">Employment<br />
    <img src="images/HOME_Employment.jpg" alt="Employment" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>
    <div class="homebox_teal">
    <a href="clinics/index.shtml" tabindex="270">Specialty Clinics<br />
    <img src="images/HOME_SpecialtyClinic.jpg" alt="Specialty Clinics" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>
    <div class="homebox_gold">
    <a href="programs/sfcp/index.shtml" tabindex="270">Specialized<br />Family Care<br />
    <img src="images/HOME_SpecializedFamilyCare.jpg" alt="Specialized Family Care" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>

    </div>


    <div class="homeboxcontainer_left">

    <div class="homebox_orange">
    <a href="programs/community.shtml" tabindex="240">Community Living&nbsp;&nbsp;<br /><img src="images/HOME_CommunityLiving.jpg" alt="Community Living" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>

    <div class="homebox_red">
    <a href="programs/health.shtml" tabindex="260">Health &amp; Wellness<br /><img src="images/HOME_HealthWellness.jpg" alt="Health and Wellness" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>

    <div class="homebox_darkblue">
    <a href="programs/tbi/index.shtml" tabindex="260">Traumatic<br />Brain Injury<br /><img src="images/HOME_TraumaticBrainInjury.jpg" alt="Traumatic Brain Injury" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>

    <div class="homebox_green">
    <a href="programs/arts/index.shtml" tabindex="260">Fine Arts&nbsp;&nbsp;<br /><img src="images/HOME_FineArts.jpg" alt="Fine Arts" width="160" height="120" style="margin-top: 5px;" /></a>
    </div>


    </div>
    </div>


    Here's the CSS code related to these boxes:

    /* COLORED HOME PAGE 'FOCUS AREAS' BOXES */

    .homeboxcontainer {
    width: 75%;
    max-width: 410px;
    min-width: 190px;
    height: 100%;
    margin: 1% auto;
    padding: 0;
    }
    .hombeoxcontainer ul {
    text-align: left;
    }
    .homeboxcontainer ul li a {
    text-align: left;
    color: #000066;
    background-color: #FFFFFF;
    }
    .homeboxcontainer ul li a:hover {
    text-align: left;
    color: #000099;
    background-color: #FFFFFF;
    text-decoration: underline;
    }

    .homeboxcontainer_left ul li a {
    text-align: left;
    color: #000066;
    background-color: #FFFFFF;
    }
    .homeboxcontainer_right ul li a {
    text-align: left;
    color: #000066;
    background-color: #FFFFFF;
    }

    .homeboxcontainer_right {
    float: right;
    width: 186px;
    height: 100%;
    margin: 0 auto;
    }
    .homeboxcontainer_left {
    float: left;
    width: 186px;
    height: 100%;
    margin: 3% auto 0 auto;
    }

    .homebox_blue {
    width: 180px;
    text-align: left;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 80%;
    padding: 15px 0 0 5px;
    margin: 0 0 0 2%;
    background-image: url(../images/blue__.gif);
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    }
    .homebox_teal {
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: left;
    font-size: 80%;
    padding: 15px 0 0 5px;
    margin: 1% 0 0 2%;
    background-image: url(../images/teal__.gif);
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    }
    .homebox_purple {
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    text-align: left;
    font-weight:bold;
    font-size: 80%;
    padding: 15px 0 0 5px;
    margin: 1% 0 0 2%;
    background-image: url(../images/purple__.gif);
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    }
    .homebox_red {
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 15px 2px 0 5px;
    text-align: right;
    font-size: 80%;
    margin: 1% 2% 0% 0;
    background-image: url(../images/red__.gif);
    background-attachment: scroll;
    background-position: right top;
    background-repeat: no-repeat;
    }
    .homebox_orange {
    text-align: right;
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 15px 2px 0 5px;
    font-size: 80%;
    margin: 5% 2% 0% 0%;
    background-image: url(../images/orange__.gif);
    background-attachment: scroll;
    background-position: right top;
    background-repeat: no-repeat;
    }
    .homebox_darkblue {
    text-align: right;
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 7px 2px 0 5px;
    font-size: 80%;
    margin: 1% 2% 2% 0;
    background-image: url(../images/darkblue__.gif);
    background-attachment: scroll;
    background-position: right top;
    background-repeat: no-repeat;
    }
    .homebox_gold {
    width: 180px;
    height: 175px;
    color: #000066;
    font-weight: bold;
    text-align: left;
    font-size: 80%;
    padding: 7px 0 0 5px;
    margin: 1% 0 0 2%;
    background-image: url(../images/yellow__.gif);
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    }
    .homebox_green {
    text-align: right;
    width: 180px;
    height: 175px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 7px 2px 0 5px;
    font-size: 80%;
    margin: 1% 2% 2% 0;
    background-image: url(../images/green__.gif);
    background-attachment: scroll;
    background-position: right top;
    background-repeat: no-repeat;
    }


    Any help on solving this annoying little bounce would be greatly appreciated!

    Kitty

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Hello and welcome to the forums.

    When posting code at length like you have, we ask that you use the regular [code][/code] tags, rather than what you are using, which are meant more for inline use... hence "icode".

    however regarding your problem, I wouldn't hold a site back because of something like this.

    I didn't look at the entire site code, however from above I did notice that you have padding and margins around those elements
    padding: 15px 0 0 5px;
    margin: 0 0 0 2%;
    chances are you have not replicated those properties wherever you are declaring the psuedo :hover selector for the elements.

    if that doesn't fix the problem, then next I would try explicitly setting the padding and margin of the anchor images to zero, which should reset those properties.

  3. #3
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Margins and padding

    Thanks boogyman. I wasn't sure about that icode, my first post. I'll remember next time. I tried adding the padding/margin settings to the :hover which didn't change anything. I also zeroed out the padding/margins and still had the same problem. The client is editing program information now, site is going live on Friday, just thought I could figure that out but have tried everything.IE's quirky behavior can be such a headache! I'll keep trying those adjustments, I appreciate your response!

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
  •