ansaurus

Question

Cross Browser Issue

Answer 1

+5 A:

You are self-closing a div tag, which is not allowed to be self-closed.

You must close the div tag like this: </div>.

Some browsers will support stupid mistakes like these, and attempt to close the tags for you. IE, on the other hand, doesn't.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title></title>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
    .workarea
    {
        position: relative;
        border: 1px solid black;
        background-color: #ccc;
        overflow: hidden;
        cursor: move;
        -moz-user-focus: normal;
        -moz-user-select: none;
        unselectable: on;
    }

    .semitransparent
    {
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background-color: Gray;
    }
</style>
</head>
<body style="width: 800px; height: 600px;">
<div id="workArea" class="workarea" style="width: 800px; height: 350px;
    left: 100px; top: 50px; background-color: White; border: 1px solid black;">
    <img alt="" src="images/TestImage.jpg" style="left: 0px; top: 0px; border: none;
        z-index: 1;" />
    <div id="topBar" class="semitransparent" style="position: absolute;width: 800px;
        height: 75px; left: 0px; top: 0px; min-height: 75px; border: none; z-index: 2;" ></div>
    <div id="bottomBar" class="semitransparent" style="position: absolute; width: 800px;
        height: 75px; left: 0px; top: 275px; min-height: 75px; border: none; z-index: 2;"></div>
</div>
</body>
</html>

Jacob Relkin 2010-04-28 01:24:49

I've noticed IE dropping tags simply because it doesn't like how they're written in the code. Good eye.

Jeff Rupert 2010-04-28 01:26:03

Yeah, for a list of self-closing tags check out http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-brFirefox and Webkit (Safari, Chrome) are smart enough to close those tags for you, which is why it worked in those browsers.

Mike Tierney 2010-04-28 01:28:49

Just because you can rely on the browser to clean up your markup it doesn't mean you should do it. Stick with the standards.

Ben 2010-04-28 01:39:56

Rather, validate -for- the standards, since the validator is ideally a "multiple-browser-standards-check-in-a-can".

Tchalvak 2010-04-28 01:57:10

@Ben, @Tchalvak I agree.

Jacob Relkin 2010-04-28 01:58:48

I knew it would be something stupid. Nevertheless, your answer led me down an interesting path that ended with a better understanding of loose vs. strict doctypes and finding the w3c validator page which, had I known about it last night, would have identified this issue for me. Thanks for all the comments, they were very helpful.

dazedandconfused 2010-04-28 22:46:39

ansaurus

tags:

views:

answers:

Cross Browser Issue

related questions