Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Table backgrounds in IE

    Hello,

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

    Styles:

    Code:
    <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:

    Code:
    <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?

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by shane.carr View Post
    The problems are: One, the table is not centered in IE[B]
    Usually this is because one hasn't specified a document type. This causes the page to be rendered in quirks mode. In IE margin: 0 auto will not be working.
    Quote Originally Posted by shane.carr View Post
    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?

  • #3
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    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;">

    Code:
    <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>

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Table backgrounds in IE-firefox.png   Table backgrounds in IE-ie.png  

  • #5
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Try putting in the <center> tag, its simple but it might work for HTML

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    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.

  • #7
    New Coder
    Join Date
    Jun 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Attached Thumbnails Attached Thumbnails Table backgrounds in IE-up.gif  

  • #8
    New Coder
    Join Date
    Jun 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, here it is!

    CSS:

    Code:
    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:

    Code:
    <!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','pluginspage','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>
    Last edited by shane.carr; 05-11-2007 at 12:45 AM.

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by shane.carr View Post
    the A>, B>, etc. are not only off-center, but they appear at the top of the page.

    What should I do?
    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)
    1. relative-div (without hasLayout)
    2. table-cell
    3. 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:
    1. relative-div (without hasLayout)
    2. div (hasLayout)
    3. relative-div (any kind)

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

    Demo 1:
    Code:
    <!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:
    Code:
    <!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.
    Last edited by koyama; 05-11-2007 at 06:07 AM. Reason: changed title in demo code

  • #10
    New Coder
    Join Date
    Jun 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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! Again, thank you so much! You're brilliant!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •