SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: IE CSS Issues

  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    gborg
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE CSS Issues

    I have a page that I designed entirely using CSS. It validates perfectly as HTML 4.01 STRICT. The css style sheet also validates perfectly. It works exactly as intended in netscape etc.... but in the latest version of Internet Explorer it is buggy. I have a link near the bottom of the page in the right div column. (It is a two column design. Right column fixed, left column liquid) If the browser window is wide enough so that the right fixed column extends below the left liquid column, when I roll over the link at the bottom of the left column, the right column that extends behond the left column dissappears into the footer... no scrolling nothing.... gone. Please note that this is only in IE and works perfectly in every other current browser. I don't know what to do. It is just a normal text link with a hover element. Every other link just like it on the page works fine, but not this one. Does anyone have any IE workarounds for this? Has anyone ever encountered this problem before?? Thanks for any and all help.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Show us your problem, don't just tell us that you have a problem.

    It makes finding the solution much easier, because we get to know what the question is.

    If it doesn't work in IE, it probably doesn't work in IE6 and IE5. IE has the least standards support of the "modern browsers".

    Thanks,
    Douglas
    Hello World

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Dougs right and we need some code to fix your problem properly without a guessing game.

    However it sounds much like the peek a boo bug in ie which can be cured by setting position:relative (without co-ordinates) in various places.

    Usually you place it on the element that's misbehaving but sometimes you may have to follow through from parent to child.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    gborg
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THE HTML CODE:




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>
    <head lang="en">
    <title>a i s. | info</title>
    <link href="http://www.testsite.com/wmd/stylesheet.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META NAME="description" CONTENT="Tax Guide for College Teachers is designed to keep college teachers and other college personnel informed about the latest tax rules that apply to them.">
    <META NAME="keywords" CONTENT="Tax Guide for College Teachers,2002 tax guide for college teachers,tax guide,college teachers,college professors,new tax laws,Academic Information Service,AIS,professor deduction,tax return,professor tax return,college teacher tax return,2002 tax guide,Allen Bernstein">
    </head>

    <body>
    <div class="banner">
    <h1><a href="#">a i s. </a> <span class="smallheading"> ACADEMIC INFORMATION
    SERVICE</span></h1>
    </div>
    <div id="container">
    <div id="info">
    <div class="right">
    <div class="upper">
    The Book
    </div>
    <div class="pic">
    <h1></h1>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="right">
    <div class="upper">
    How to Deduct the Interest on Your Auto Loan </div>
    <div class="lower">
    <p>Read how to deduct all your interest when buying an automobile.Instead
    of taking out an ordinary auto loan,
    use a home-equity loan to make the purchase.</p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="right">
    <div class="upper">
    Section 529 College Savings Plans</div>
    <div class="lower">
    <p>Just about all 50 states now offer &quot;Section 529&quot;
    plans you can use to save for your childís college education.<b>And
    under the 2002 law, withdrawals are free of federal income tax when
    used for college expenses.</b>Furthermore, the withdrawals donít count
    as income to the student when computing eligible financial aid.
    <p>Each state has rules that apply to plans it operates.
    <b>And some states allow you to purchase future tuition at todayís rates.
    </b>The <i style='mso-bidi-font-style:normal'>Tax
    Guide</i> updates where you can get information on the plan in your state.</p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="right">
    <div class="upper">
    Home Office Deduction Improved
    </div>
    <div class="lower">
    <p><b>The home office deduction news is good. You
    no longer have to prove your home office is the focal point where most
    of your working time is spent.</b> All that is required is that you
    need your home office to &quot;manage&quot; or &quot;administer&quot; your
    job or business activity. Also, part of a room may qualify as a home
    office. Read
    details in the <em>2005 Tax &amp; Financial Guide for College Teachers</em>.</p>
    </div>
    </div>
    </div>
    <div id="content">
    <div class="left">
    <div class="upper">
    Tax Guide for College Teachers</div>
    <div class="lower">
    <h2>
    The 2005 Tax and Financial Guide for College Teachers and Other College Personnel for the
    Tax Year 2004
    </h2>
    <p>A readable account of how the new tax laws can save you money.<b>
    You'll need this important information to fill out your 2004 tax
    return and plan for the future. </b>The <em>2005 Tax &amp; Financial
    Guide for College Teachers</em> contains special information not found
    in any other tax guide nor understood by most professional tax preparers
    - including new IRS rulings and court cases involving college teachers.</p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Important 2004 Tax Changes
    </div>
    <div class="lower">
    <p>Congress passed 3 separate tax acts of special interest to college teachers.
    <b>Together, these tax acts have produced the largest tax reduction in decades.</b>
    Not only have the basic rates been lowered, but<b> dozens of tax slashing provisions
    apply to college teachers.</b><br>Read complete details in the<em>
    2005 Tax &amp Financial Guide for College Teachers.</em></p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Complete New Chapter on Tax Planning
    </div>
    <div class="lower">
    <p><em>Tax Guide</em> now includes a separate chapter for 2004 year-end tax
    planning as well as moves you can make in 2005 to save taxes and money.
    Order early and take advantage of the ideas discussed in the new chapter. </p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Increase for Books, Equipment, Etc.
    </div>
    <div class="lower">
    <p>There's a substantial increase in the depreciation
    you can claim on your 2004 tax return.<b> This applies to job-related
    books, furniture, equipment, etc.</b> Read details in the <em>2005
    Tax &amp; Financial
    Guide for College Teachers</em></p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Rules for Outside Income
    </div>
    <div class="lower">
    <p><b>Do you have outside income from consulting, refereeing, etc.?
    </b> Then read how to best set up a Self-Employed
    Retirement Plan (formerly called a Keogh Plan) for your own benefit.<b>With
    the right type of plan, you can contribute far more than under prior law</b>,
    no matter if your income is large or small. Read details in the <em>2005 Tax &amp;
    Financial Guide for College Teachers</em>.</p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Complete New Chapter on Tax Planning
    </div>
    <div class="lower">
    <p><em>Tax Guide</em> now includes a separate chapter for 2004 year-end tax
    planning as well as moves you can make in 2005 to save taxes and money.
    Order early and take advantage of the ideas discussed in the new chapter. </p>
    </div>
    </div>
    <div class="gutter2">
    </div>
    <div class="left">
    <div class="upper">
    Travel
    </div>
    <div class="lower">
    <p><b>Learn how to deduct for driving</b> around campus, traveling
    between job locations, going to libraries, commuting
    to a temporary job, picking up campus visitors at the airport, etc. In most
    cases, there may also be an extra tax break if you spend
    less than $46 a day for meals while away from home.<b>You
    can actually claim the full $46 - whether you spend it or not.</b></p>
    <p><a href="info1.asp" class=ahidden>More...</a></p>
    </div>
    </div>
    </div>
    </div>
    <div class="gutter3"></div>
    <div id="footer">
    <ul>
    <li><a href="http://www.testsite.com/wmd/order2.asp">ORDER &nbsp; </a></li>
    <li><a href="http://www.testsite.com/wmd/teacher/info.asp">INFO &nbsp; </a></li>
    <li><a href="#">FOOTER ITEM 3 &nbsp; </a></li>
    <li>COPYRIGHT &copy; A I S</li>
    </ul>
    </div>
    </body>

    </html>







    THE CSS CODE:



    body
    {
    margin: 0;
    padding: 0;
    font-size: 95%;
    font-family: georgia, "times new roman", times, serif;
    color: #000000;
    background-color: #FFFFFF;
    text-align: center;
    }

    .smallheading {
    font-family: arial, helvetica, sans-serif;
    font-size: .35em;
    padding: .4em 0 .4em .9em;
    }

    .banner
    {
    color: #FFFFFF;
    background-image: url(teacher/images/banner.gif);
    background-repeat: repeat-x;
    height: 76px;
    text-align: left;
    }

    .banner h1
    {
    margin: 0;
    padding: .4em 0 .4em .5em;
    font-size: 2.2em;
    font-weight: normal;
    }

    .banner h1 a:link {
    color: #FFFFFF;
    text-decoration: none;
    border-right: 1px dashed;
    }

    .banner h1 a:visited {
    color: #FFFFFF;
    text-decoration: none;
    border-right: 1px dashed;
    }

    .banner h1 a:hover {
    color: #B2C6C0;
    text-decoration: none;
    border-right: 1px dashed;
    }

    .banner h1 a:active {
    color: #B2C6C0;
    text-decoration: none;
    border-right: 1px dashed;
    }

    #container {
    margin: 2em 5em 5em 5em;
    }

    .left {
    padding: 0 0 0 0;
    border: 1px dashed;
    }

    #content {
    margin-right: 255px;
    }

    .upper {
    padding: .5em .5em .5em .5em;
    font-size: 1.5em;
    line-height: 70%;
    color: #347879;
    border-bottom: 1px dashed;
    background-color: #B2C6C0;
    }

    .lower {
    padding: 0em 1em .5em 1em;
    font-size: 95%;
    font-family: georgia, "times new roman", times, serif;
    color: #000000;
    }

    .lower h2 {
    font-style: italic;
    font-size: 1.0em;
    color: #8DB3B4;
    }

    .lower a:link {
    color: #034B38;
    text-decoration: none;
    font-weight: bold;
    }

    .lower a:visited {
    color: #034B38;
    text-decoration: none;
    font-weight: bold;
    }

    .lower a:hover {
    color: #B2C6C0;
    text-decoration: none;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-right: none;
    font-weight: bold;
    }

    .lower a:active {
    color: #B2C6C0;
    text-decoration: none;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-right: none;
    font-weight: bold;
    position: relative;
    }

    .gutter2 {
    height: 20px;
    }

    .right {
    padding: 0 0 0 0;
    border: 1px dashed;
    }

    .pic h1 {
    background: transparent url(teacher/images/cover50.gif) no-repeat top left;
    width: 225px;
    height: 269px;
    }

    #info {
    width: 235px;
    float: right;
    }

    #footer {
    clear: both;
    margin: 0;
    padding: 1.7em 0em 0em 0em;
    color: #FFFFFF;
    background-image: url(teacher/images/bannershort.gif);
    background-repeat: repeat-x;
    height: 43px;
    text-align: right;
    font-size: .7em;
    font-family: arial, helvetica, sans-serif;
    }

    div#footer ul
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

    div#footer li {
    display: inline;
    margin-right: 1em;
    }

    div#footer a:link {
    color: #FFFFFF;
    text-decoration: none;
    border-right: 1px dashed;
    }

    div#footer a:visited {
    color: #FFFFFF;
    text-decoration: none;
    border-right: 1px dashed;
    }

    div#footer a:hover {
    color: #B2C6C0;
    text-decoration: none;
    border-right: 1px dashed;
    }

    div#footer a:active {
    color: #B2C6C0;
    text-decoration: none;
    border-right: 1px dashed;
    }

    .gutter3 {
    height: 20px;
    clear: both;
    }

    #container {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
    width: 90%;
    }

    #align {
    text-align: left;
    }

    #fullcontent {}

    label.most,input.most, select.most {
    display: block;
    width: 150px;
    float: left;
    margin-bottom: 10px;
    }

    label.most {
    text-align: right;
    width: 75px;
    padding-right: 20px;
    }

    br.most {
    clear: left;
    }

    table {
    font-size: .9em;
    }



    Thanks again for any help...

  5. #5
    SitePoint Member
    Join Date
    Aug 2004
    Location
    gborg
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS-- I have my window size at 1152 x 864. At this size the right column extends below the right. It is the link labeled 'More' near the bottom of the left column that is causing me trouble when I rollover it... only in Internet Explorer, mind you... Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this fix (hack).
    Code:
    #content {
    margin-right: 255px;
    }
    * html #content {display:inline-block}
    
    If that doesn't work or you notice anything unusual then you will probably have to resort to putting position:relative on everything from container to child elements.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    gborg
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thanks so much!


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
  •