I love scrolling down the forums and seeing how many people are having issues with IE.
Anyway, I have a floating/fixed element on my page that needs to stay at the bottom, floating over the content the whole time. Works fine in all modern browsers, except for every version of IE. I stripped down everything so I could just try to fix this first, and then rebuild the code around it. Currently, it’s fixed and floating properly in IE9 & IE8, except the table is broken apart. I’ve tried to eliminate the cell padding and spacing through old HTML and modern CSS and… I can’t figure it out. This is the biggest issue.
IE7 is drunk and it shoves the bar off the page to the right. Specifically, it seems to align the left side of the floating element with the center of the page. Am I supposed to be declaring this some kind of element in CSS? Like block or table? I guess it’s my code that’s drunk.
<!DOCTYPE html>
<html>
<head>
<title>blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<body style="background-color:#000000">
<p style="color:#ffffff">
float<br>
...etc
</p>
<div id="fixedElement" align="center">
<table width="942px" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="image1.gif" border="0"></td>
<td></td>
<td><a href="feed.xml" target="_blank"><img src="rss-top.gif" border="0"></a></td>
<td></td>
<td><a href="link" target="_blank"><img src="linkedin-top.gif" border="0"></a></td>
</tr>
<tr>
<td style="background:url('table-bg.gif')"><img src="mwtlogo-bottom.gif" border="0"></td>
<td style="background:url('table-bg.gif')" align="center"><p style="margin-left:80px">blah blah blah</p></td>
<td style="background:url('table-bg.gif')"><a href="feed.xml" target="_blank"><img src="rss-bottom.gif" border="0"></a></td>
<td style="background:url('table-bg.gif')"></td>
<td style="background:url('table-bg.gif')"><a href="link" target="_blank"><img src="linkedin-bottom.gif" border="0"></a></td>
</tr>
</table>
</div>
</center>
</body>
</html>
#fixedElement {
position:fixed;
bottom: 0;
float:left;
margin:0 auto;
padding:0;
text-align:center;
width:942px;
overflow:auto;
}
I also wondered:
To test this, I’m just changing the ‘browser mode’ in IE9. Is this an accurate way to do it, or do I actually need to install IE8 (etc) to see the real effects?
Is this just a simple DOCTYPE issue? I tried several of them to no avail.
Many thanks.