IE8 Table Contents Not Being Rendered_问答_开发者

开发者 https://www.devze.com 2023-01-24 15:59 出处：网络

I have a header layer at the top of the page with a background image.There is a table in this layer with links that is aligned with the background image.The background image\'s position is toggled usi

I have a header layer at the top of the page with a background image. There is a table in this layer with links that is aligned with the background image. The background image's position is toggled using jquery. The font for the links are done with Google Webfonts. Everything is A-Okay in Firefox. In IE8, none of the contents of the table render,开发者_JAVA百科 all you see is the background image underneath.

I tried changing the font to the default, problem persists. The links are anchor tags inside the cells, I tried changing these to , assigning more parameters to the anchor tags, problem persists.

When I google IE table bug, all results are for width issue with colspan. I tried searching for bugs related to Google Webfonts, but when I changed the font to the default, it still did not show anything. Your help is appreciated:

Relevant CSS:

@import url(http://fonts.googleapis.com/css?family=Tangerine&subset=latin);
@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=latin);
body, html {
 margin:0px;
 padding-top:0px;
}
#header {
 width:792px;
 height:190px;
 overflow:hidden;
 border:1px solid #754c78;
 background-color:#754c78;
 background:url('images/header_sprite.jpg') no-repeat top left;
}
.header_td {
 width:132px;
 height:190px;
 padding-top:150px;
 text-align:center;
 cursor:pointer;
}
.link {
 font-family: 'Tangerine', serif;
 font-size: 32px;
   text-shadow: 1px 1px 0px #ffffff;
 text-decoration:none;
 color:#754c78;
}
.link_over {
 font-family: 'Tangerine', serif;
   font-size: 32px;
   text-shadow: 1px 1px 0px #754c78;
 text-decoration:none;
 color:#ffffff;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript" src="nav.js"></script>        <title>{B&amp;E} - Contact/RSVP</title>
    </head>
    <body>

        <center>
        <div id="container">
                        <div id="b_e"></div>
            <div id="header">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td id="sprite1td" class="header_td" title="Welcome"><div class="link">Welcome</div></td>
                    <td id="sprite2td" class="header_td" title="Proposal"><a class="link">Proposal</a></td>

                    <td id="sprite3td" class="header_td" title="Ceremony"><a class="link">Ceremony</a></td>
                    <td id="sprite4td" class="header_td" title="Reception"><a class="link">Reception</a></td>
                    <td id="sprite5td" class="header_td" title="Registry"><a class="link">Registry</a></td>
                    <td id="sprite6td" class="header_td" title="Contact/RSVP"><a class="link">Contact</a></td>
                  </tr>
                </table>
            </div>            <div id="content">

                <div class="title">Contact</div>
                <div class="text"><br /><br /></div>
            </div>
        <div id="footer"><div class="copy">&copy;<a class="credentials">&nbsp;Brandon Condrey 2010</a></div></div>        </div>
        </center>
    </body>
</html>

Any help you have is appreciated.

PS - I cannot get a grip on this markdown thing, that HTML code block took forever to pull off.

Solved it. The padding-top CSS property is rendered differently in IE for some reason. This was set to 150px in the CSS, but had to be cut in half for IE to give the same result.

Stupid IE.