[RESOLVED] Making code compatible with IE [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Making code compatible with IE

shane.carr

04-26-2007, 02:41 PM

Hello,

Here is a simplified version of the code that I have been working with. It works fine in Firefox, but in IE it is not successful. What should I do to fix it?

Note that the background pics for the buttons aren't the pictures that are actually being used.

<style type="text/css">

</style>

<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</span>

</h1>
<h2 style="text-align:center;">

<div style="font-family:Verdana; color:#003366; font-size:32px; display:block; width:550px; margin:0 auto;">
Amet. Aliquam ut elit et velit tempus.
</div>
</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;">

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('Maecenas suscipit, metus quis ultricies consectetuer.');">
<span class="b" unselectable="on">></span>
<span class="c" unselectable="on">A</span>
</div>
</td><td>
<div class="a" onclick="alert('Maecenas suscipit, metus quis ultricies consectetuer.');">
<span class="b" unselectable="on">></span>
<span class="c" unselectable="on">B</span>
</div>
</td><td>
<div class="a" onclick="alert('Maecenas suscipit, metus quis ultricies consectetuer.');">
<span class="b" unselectable="on">></span>
<span class="c" unselectable="on">C</span>
</div>

</td></tr>

<tr><td>
<div class="a" onclick="alert('Maecenas suscipit, metus quis ultricies consectetuer.');">
<span class="b" unselectable="on">></span>
<span class="c" unselectable="on">D</span>
</div>
</td><td> 

</td><td>

<div class="a" onclick="alert('Maecenas suscipit, metus quis ultricies consectetuer.');">
<span class="b" unselectable="on">></span>
<span class="c" unselectable="on">E</span>
</div>
</td></tr>
</table>

</div>

Chikara

04-26-2007, 03:14 PM

What exactly is failing here?

shane.carr

04-26-2007, 05:08 PM

I've attached pictures of what it looks like in IE and in FireFox. In Internet Explorer, in the table with the different buttons:

The background pictures are not centered
The text (A >, B >, etc) isn't only not centered, but it is at the top of the page!

WebJoel

04-26-2007, 05:27 PM

Here's a start..
-concentrate upon that "div not allowed in h2" part... that's a biggie.

I'm surprised that this looks the way you seem to want it to, in Firefox. I'd think it is displying your page incorrectly even though it is what you want.

shane.carr

04-26-2007, 05:34 PM

The div in the h2 isn't the problem. The main problem is within the table, especially the cells that contain the divs that contain the A>, B>, etc.

WebJoel

04-27-2007, 09:42 AM

Is this a <form>, -or, -could it be? What are you building here? :) Maybe the DIV inside the H2 isn't causing the problem, but as an error, it should be repaired.

Fang

04-27-2007, 10:34 AM

Don't forget to add a doctype (http://www.w3.org/QA/Tips/Doctype)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

WebJoel

04-27-2007, 11:09 AM

-I'm usually very punctual to remind postees about using valid !doctype, and didn't mention that I was using strict !doctype, offline. :) In my testing this, saw no difference. Again, like the DIV nested in the H2, -no change noted but a necessary requirement for inclusion. :)

Just for fun & giggles, I repaired the H2-nested DIV, -and see no change. Installed strict !doctype, -still & again, -no change.

Curious that this works in Firefox (and thus presumeably Mozilla, Seamonkey, etc).

So, -what about the remaining 10 errors:

...- Warning: <span> proprietary attribute "unselectable"

Usually, this type of warning/error ("proprietary attribute") implies an InternetExploder-only tag, -but what is "unselectable", anyway?? It sounds like a tag that might be used in a "<form>"...
What software (DW, FP, ??) created this tag? Maybe, -is this a Netscape-only proprietary tag?? In which case, yeah, expect IE to throw a royal wobbly and not play fair or at all... :o

Is there a URL, or can we see your entire code (including CSS)?

This:

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

is not shown in your offered code, -could have alot to do with why this isn't working..

Fang

04-27-2007, 12:16 PM

unselectable (http://msdn2.microsoft.com/en-us/library/ms537840.aspx)

felgall

04-27-2007, 01:41 PM

So anyone wanting to select that content just needs to use a standards compliant browser instead of IE.

shane.carr

04-27-2007, 06:35 PM

The doctype I'm using is XHTML 1.0 Transitional.

I changed the div to a span.

About the unselectable, if a browser supports it great; if one doesn't, it's not that big of a deal. I use the text as labels for buttons, and it doesn't look right when text from a button is selected.

And about the CSS, I don't have a stylesheet :( The one I attached I actually just assembled as the styles were all inline before.

I would rather not post the URL of the page. Notice that I changed all the text to the Lorem Ipsum.

Thank you all very much for you're help so far. It is very much appreciated! :)

Centauri

04-27-2007, 06:49 PM

Get rid of the relative positioning on #sgamain, as it is causing the spans to be positioned relative to it :<div id="sgamain" style="margin:0 auto;">

Cheers
Graeme

shane.carr

04-27-2007, 09:24 PM

:( Sorry, I wish I could do that, but I need that style because of javascript usage.

Oh yes, that brings up a good point. After the javascript runs, everything appears okay. I know that you're going to ask, so here is the javascript that goes along with it:

//ex: moveUp("original_div", "new_div"); -will move original_div up and dissapear over
//the top of the page, and replace it by bringing down new_div

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);
}

}

The "buttons" (ie table cells) that users click will trigger this function. When the user clicks "Back >" on the new menu, the original one will reappear, but correctly positioned. The problem only happens before the script is run. Does this help any?

shane.carr

04-28-2007, 09:56 PM

So you can see what the whole thing actually looks like, I've uploaded the actual table cell "button" background.

In my first post, background-image:url(http://lambawards.com/new_scan/medals/solid_blue.jpg); should now be
background-image:url(http://www.webdeveloper.com/forum/attachment.php?attachmentid=8827&stc=1&d=1177815197);

Again, thank you all SOOO much for all of your help so far.

shane.carr

04-30-2007, 03:54 PM

Hello?

shane.carr

05-04-2007, 06:58 PM

Should I post this on the CSS Forum?

shane.carr

05-11-2007, 05:13 PM

Wow! I have found a solution! Adding "zoom:1" to the style of #sgamain solved the problem! Thanks for all your help anyway, though!