...

View Full Version : Table backgrounds in IE



shane.carr
05-07-2007, 11:12 PM
Hello,

I have been working on this code. It works beautifully in FireFox, but not in Internet Explorer.

Styles:


<style type="text/css">
<!--
.a{
background-image:url(http://lambawards.com/new_scan/medals/solid_blue.jpg);
width:184px;
height:51px;
cursor:pointer;
display:inline-table;
text-align:left;
background-repeat:no-repeat;
}
.b{
position:relative;
top:14px;
left:160px;
font-family:Rockwell;
font-size:18px;
color:#0066CC;
}
.c{
position:relative;
top:14px;
left:-5px;
font-family:Rockwell;
font-size:18px;
color:#0066CC;
}
-->
</style>

And HTML:




<div id="sgamain" style="position:relative;top:0px;margin:0 auto;">

<h1 style="text-align:center;">
<span style="font-family:Comic Sans MS; color:#003366; font-size:48px;">Lorem Ipsum</span><br />
<span style="font-family:Bookman Old Style; font-size:96px;">Dolor Sit Amet</span>
</h1>

<table style="margin:0 auto;" cellpadding="5" cellspacing="0">
<tr style="font-family:Rockwell; font-size:12px; text-align:center; color:#0066CC;">
<td style="width:173px;">

In blandit. Morbi sit amet quam.
</td><td style="width:173px;">
Nulla scelerisque facilisis est. Nam quis.
</td><td style="width:173px;">
Integer est. Fusce sit amet elit.
</td></tr>

<tr><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">A</span>
</div>
</td><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">B</span>
</div>
</td><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">C</span>
</div>

</td></tr>
</table>

</div>

The problems are: One, the table is not centered in IE, and Two, the A>, B>, etc. are not only off-center, but they appear at the top of the page.

What should I do? :confused:

koyama
05-08-2007, 04:24 PM
The problems are: One, the table is not centered in IE
Usually this is because one hasn't specified a document type. This causes the page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html). In IE margin: 0 auto will not be working.

[B]Two, the A>, B>, etc. are not only off-center, but they appear at the top of the page.
Hmm... Do you have some live example showing the problem?

kosstr12
05-08-2007, 05:15 PM
Try putting the "bgcolor" or "background" tag inside the html version, they are usually more compatible...like this:
<div id="sgamain" style="position:relative;top:0px;margin:0 auto;">


<h1 style="text-align:center;">
<span style="font-family:Comic Sans MS; color:#003366; font-size:48px;">Lorem Ipsum</span><br />
<span style="font-family:Bookman Old Style; font-size:96px;">Dolor Sit Amet</span>
</h1>

<table style="margin:0 auto;" bgcolor="red" cellpadding="5" cellspacing="0">
<tr style="font-family:Rockwell; font-size:12px; text-align:center; color:#0066CC;">
<td style="width:173px;">

In blandit. Morbi sit amet quam.
</td><td style="width:173px;">
Nulla scelerisque facilisis est. Nam quis.
</td><td style="width:173px;">
Integer est. Fusce sit amet elit.
</td></tr>

<tr><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">A</span>
</div>
</td><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">B</span>
</div>
</td><td>
<div class="a" onclick="alert('test');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">C</span>
</div>

</td></tr>
</table>

</div>

shane.carr
05-10-2007, 03:55 AM
koyama- The doctype is XHTML 1.0 Transitional

kosstr12- Thanks for the code; however, the same problem persists.

If it helps either of you, I have attached what the page looks like in both Internet Explorer and FireFox (using kosstr12's code), the left being FireFox.

kosstr12
05-10-2007, 01:18 PM
Try putting in the <center> tag, its simple but it might work for HTML

VIPStephan
05-10-2007, 02:22 PM
kosstr12, please don’t give such bad advice. center is deprecated and shouldn’t be used. We should do everything to make the web a cleaner, more semantic place, not to add to the tag soup.

shane.carr, it would be nice if you provided your entire source code of the page in question, the complete HTML and CSS that is. Either as live example (link) or as code here but we need to see the full context. Usually a table can be centered with margin: auto; so there must be something else you did wrong which we can only tell you if we know the full code.

shane.carr
05-11-2007, 12:02 AM
Okay, I am working on the code right now... I'm attaching the real table cell background image. I'll be back in a few minutes!

shane.carr
05-11-2007, 12:42 AM
Okay, here it is!

CSS:


body{
background-color:#6699FF;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#games, div#more{
position:relative;
display:none;
margin:0 auto;
}
.a{
background-image:url(http://www.codingforums.com/attachment.php?attachmentid=5275&d=1178834571);
width:184px;
height:51px;
cursor:pointer;
display:inline-table;
text-align:left;
background-repeat:no-repeat;
margin:0 auto;
}
.b{
position:relative;
top:14px;
left:160px;
font-family:Rockwell;
font-size:18px;
color:#0066CC;
}
.c{
position:relative;
top:14px;
left:-5px;
font-family:Rockwell;
font-size:18px;
color:#0066CC;
}
div#sgamain{
position:relative;
top:0px;
margin:0 auto;
}
.d{
font-family:Comic Sans MS, Verdana, Arial;
color:#003366;
font-size:48px;
}
.e{
font-family:Bookman Old Style, Capitals, Courier, Times;
color:#660000;
font-size:96px;
}
.f{
font-family:Lucida Blackletter, Verdana, Arial;
color:#003366;
font-size:32px;
display:block;
width:550px;
margin:0 auto;
}
.g{
position:absolute;
top:650px;
width:100%;
margin-left:0px;
left:0px;
}
.h{
position:relative;
margin:0 auto;
text-align:center;
}

And 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="shortcut icon" href="http://www.example.com/" />
<meta name="author" content="Lorem Ipsum" />
<meta name="description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ut augue. Curabitur mi justo, vehicula." />
<meta name="keywords" content="a, b, c, d, e" />
<script type="text/javascript">
<!--

function moveUp(id1, id2){

var obj1 = document.getElementById(id1);
var obj2 = document.getElementById(id2);

var pixelsPerInterval = -25;

var curTop = obj1.offsetTop;
var newTop = curTop + pixelsPerInterval;
var finalTop = (obj1.offsetHeight * -1) + (pixelsPerInterval * 2);

obj1.style.top = newTop+"px";

if(newTop > finalTop){
setTimeout("moveUp('"+id1+"', '"+id2+"');", 50);
}else{
obj1.style.display = "none";
obj2.style.display = "block";
obj2.style.top = ((obj2.offsetHeight * -1) + (pixelsPerInterval * 2))+"px";
moveDown(id2);
}

}

function moveDown(id1){

var obj1 = document.getElementById(id1);

var pixelsPerInterval = 25;

var curTop = obj1.offsetTop;
var newTop = curTop + pixelsPerInterval;
var finalTop = 0;

obj1.style.top = newTop+"px";

if(newTop < finalTop){
setTimeout("moveDown('"+id1+"');", 50);
}

}
function browser(){
if (navigator.appName == "Microsoft Internet Explorer"){
alert("You are using Internet Explorer. This page is designed for Firefox, Safari, and other Gecko browsers. Please switch to one of these browsers for ideal site operation.");
}
}

// -->
</script>
<title>Lorem Ipsum</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body onload="browser();">

<div id="games">

<script type="text/javascript">
<!--
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','800','height','550','src','lorem','quality','high','pluginspa ge','http://www.macromedia.com/go/getflashplayer','movie','lorem' ); //end AC code
// -->
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="550">
<param name="movie" value="lorem.swf" />
<param name="quality" value="high" />
<embed src="lorem.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="550"></embed>
</object>
</noscript>

<br />

<div class="a" onclick="moveUp('games', 'sgamain');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Back</span>
</div>

</div>

<div id="more">

&nbsp;

<table style="margin:0 auto; margin-top:100px;" cellpadding="5" cellspacing="0">
<tr>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td>
<td>
<div class="a" onclick="moveUp('more', 'sgamain');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Back</span>
</div>
</td>
</tr>
</table>

</div>

<div id="sgamain">

&nbsp;

<h1 style="text-align:center;">
<span class="d">Lorem Ipsum</span><br />
<span class="e">Dolor Sit Amet</span>
</h1>
<h2 style="text-align:center;">
<span class="f">Curabitur diam eros, dapibus sit amet.</span>
</h2>
<table style="margin:0 auto;" cellpadding="5" cellspacing="0">
<tr style="font-family:Rockwell; font-size:12px; text-align:center; color:#0066CC;"><td style="width:173px;">
Cras dui turpis, egestas quis, gravida.
</td><td style="width:173px;">
Aenean rhoncus. Suspendisse potenti. Duis rhoncus.
</td><td style="width:173px;">
Proin nec ligula ac lacus mattis.
</td></tr>
<tr><td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td><td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td><td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td></tr>
<tr><td>
<div class="a" onclick="moveUp('sgamain', 'games');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Games</span>
</div>
</td><td>
<div class="a" onclick="document.location.href='http://www.example.com/';">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">Lorem</span>
</div>
</td><td>
<div class="a" onclick="moveUp('sgamain', 'more');">
<span class="b" unselectable="on">&gt;</span>
<span class="c" unselectable="on">More</span>
</div>
</td></tr>
</table>

</div>

<div class="g">
<div class="h">

<table style="margin:0 auto; vertical-align:top;" cellpadding="10">
<tr>
<td rowspan="2">
<script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','200','height','290','id','iMediaPOLL','align','','src','ipsum' ,'quality','high','scale','noscale','salign','LT','wmode','transparent','bgcolor','#FFFFFF','name',' ipsum','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','ipsum' ); //end AC code

</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="200" height="290" id="ipsum" align="">
<param name="movie" value="ipsum">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="salign" value="LT">
<param name="wmode" value="transparent">
<param name="bgcolor" value="#FFFFFF">
<embed src="ipsum" quality="high" scale="noscale" salign="LT" wmode="transparent" bgcolor="#FFFFFF" width="200" height="290" name="ipsum" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</noscript>

</td>
<td>
<a href="http://www.example.com/">
<img src="http://www.example.com/image.gif" alt="" style="margin-top:0px;" />
</a>
</td></tr><tr><td>&nbsp;</td></tr></table>

<br /><br /><br />

<!--More Flash below this, but I has nothing to do with the rest of the page-->

</div>
</div>

</body>
</html>

koyama
05-11-2007, 05:18 AM
the A>, B>, etc. are not only off-center, but they appear at the top of the page.

What should I do? :confused:
You are suffering from a bug in IE6 (and possibly earlier versions). It seems to be fixed in IE7. Unfortunately, I know of no good source describing it.

When you have elements in this nesting sequence (from outwards)

relative-div (without hasLayout)
table-cell
relative-div (any kind)
then on page load, the inner-most relative-div gets shifted upwards and drifts to the top of the first relative-div, but jumps in place when the browser window is resized (but possibly be invisible). To see the bug at its full strength I suggest using a liquid table and then try to slowly resize the window horizontally. You will then see the innermost relative-div flicker.

The bug doesn't require a table-cell, but an ordinary div that hasLayout make take its place instead:

relative-div (without hasLayout)
div (hasLayout)
relative-div (any kind)

I put together two demos illustrating the bug. You can play with them if you like.

Demo 1:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>IE6 relative-div \ table \ relative-div</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#wrap {
position: relative;
/* zoom: 1; */
background: lightblue;
color: black;
}
.hello {
position: relative;
background: yellow;
width: 100px;
height: 100px;
}
table {
width: 100%;
border: 5px solid red;
/* width: 300px; */
}
td {
border: 5px solid green;
}
</style>
</head>
<body>

<div id="wrap">
<h1>IE6 relative-div \ table \ relative-div</h1>
<p>The lightblue div is relatively positioned and does not have layout.</p>
<p>Inside it is a table (red border) with some table cells (green border)</p>
<p>The yellow divs are relatively positioned.</p>
<p>When page is loaded, the yellow divs are placed in the wrong position. They fall in place when window is resized, but may be invisible.</p>
<p>While resizing the window, the yellow divs flicker.</p>

<table>
<tr>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
</tr>
<tr>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
<td><div class="hello">hello</div></td>
</tr>
</table>
<p>This problem can be fixed by assigning zoom: 1 to the blue div.</p>
<p>Apparently the bug is fixed in IE7.</p>
<p>Reports: <a href="http://archivist.incutio.com/viewlist/css-discuss/81127">http://archivist.incutio.com/viewlist/css-discuss/81127</p>
</div>
</body>
</html>
Demo 2:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>IE6 - div with position: relative inside div with layout inside div with position relative </title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#wrap {
position: relative;
background: green;
/* zoom: 1; */
}
#one {
width: 50%;
background: blue;
margin-left: 50px;
}
#two {
position: relative;
background: orange;
width: 50%;
}
</style>
</head>
<body>
IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>IE6 is weird<br>

<div id="wrap">What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>What is going on?<br>
<div id="one">
<div id="two">
<ul>
<li>1) Green div is relatively positioned and does not have layout</li>

<li>2) Blue div has layout while having position: static</li>
<li>3) Orange div is relatively positioned (not important whether it has layout or not)</li>
</ul>
Initially, when page loads in IE6 the yellow div is positioned outside the blue box and has drifted upwards to the top of the green box.<br>
When page is resized, the yellow box falls in place, but there may be flickering where the orange div disappears/reappears
</div>
</div>
</div>

</div>
</body>
</html>
What you should do? The easiest thing would be to drop the relative positioning at least on the outer element. It doesn't seem to be needed.

shane.carr
05-11-2007, 05:56 AM
:eek: Wow! That first example especially really helped! Adding "zoom:1" to the style of the outermost div did the trick! I've been working on this for weeks, and you have finally helped me solve it! Thank you very much! :):D:):D:) Again, thank you so much! You're brilliant! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum