Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I get IE to present this layout the way Firefox and Opera do? 1

Status
Not open for further replies.

hitsuin

Vendor
Aug 23, 2010
24
GB
Hello everyone, I'm trying to construct a webpage but I'm having a problem with it, or should I say I.E is. Opera and firefox handle it fine and display the page as I intend it to be seen, but internet explorer is determined to say no. If anyone can tell me how to fix this I'd deeply appreciate it.

As explained in the page itself, the two windows are meant to overlap the text and not be objects at the top of the page.

Code:
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">   
<style type="text/css">

.struct {
        background: #fff;
        color: #000;
        position: fixed;
        left: 100px;
        right: 100px;
        top: 100px;
        visibility: hidden;
        margin: 5px;
        padding: 10px;
        border: 2px solid #000;}
 
</style>

<script type="text/javascript">

function showObject(id){
  var myWindow = document.getElementById(id);
  myWindow.style.visibility = "visible";
}
function closeObject(id){
  var myWindow = document.getElementById(id);
  myWindow.style.visibility = "hidden"; 
}


function closeO() {
closeObject('Window1');closeObject('Window2');}


    </script>
</head>
<body link="#000000" vlink="#000000" alink="#000000">
<div id="Window1" class="struct"><p style="FONT-FAMILY: comic sans ms;  FONT-SIZE: 100px" align=center>This is window one</p>
<p style="text-align:center" ><a style="FONT-FAMILY: comic sans ms;  " href="javascript:closeObject('Window1');">close</a></p> 
</div>
<div id="Window2" class="struct"><p style="FONT-FAMILY: comic sans ms;  FONT-SIZE: 100px" align=center>This is window two</p>
<p style="text-align:center" ><a style="FONT-FAMILY: comic sans ms;  " href="javascript:closeObject('Window2');">close</a></p> 
</div>
<p>
<a onclick="closeO();" href="javascript:showObject('Window1');">Link One</a>
<a onclick="closeO();" href="javascript:showObject('Window2');">Link Two</a>
</p>
<p style="FONT-FAMILY: comic sans ms;  FONT-SIZE: 100px" align=center>The windows should overlap this.</p>
</body>
</html>
 
You are missing a DOCTYPE, which means IE will be rendering in "quirks" mode instead of standards-compliant mode.

Have a read of this article, and then choose a complete and valid DOCTYPE that best suits your needs:


Once you have this in place, then validate your HTML and CSS at:

and
to make sure you've removed all errors.

Then, if you still have problems, at least you should have a more level playing field to work with.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Thanks a lot Dan. I actually didn't paste the DOCTYPE here when using my mouse to copy that from notepad and now it occurs to me that I only needed to press ctrl & A. Turns out I was using the wrong one anyway.

As for the inline styles, you know when you know you're doing something wrong but the answer isn't clicking... Its either I'm getting old or I need more sleep. I really hope its the latter. Thanks so much for you help.
 
It looks like I celebrated too early as while the layout works, the expanded version of it won't work with the extra javascript. I have I've been trying all weekend to get it to work to no avail. I really didn't want to go with something that masks the problem but now I have different pages that work on different browsers. What I'm asking is how I can get the page to recognise which brower is which to respond appropriately, like how gmail does on the iPhone. I know it makes things more tedious but I'm not in the position to post the code. however, I'd still appreciate any help I can get
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top