Jump to content
  • Advertisement
Sign in to follow this  
Themonkster

[web] Works in IE but not OP or FF

This topic is 4654 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

this is driving me nuts. anyone tell me why this works perfectly in IE but not in FF or Opera. I would expect it to render nav above the content but they are rending overlaping. They have thier display is set to block but are acting like they are inline.....
[source lang="cpp]

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Title</title>
<style type="text/css">
	body{
		background-color:#F5F5F5;
		text-align:center;	
	}
	#nav, #content{
		width:800 px;
		display:block;
	}
	#content{
		background-color:white;
		border:dashed #666666 1 px;
		height:450 px;
		text-align:left;
	}
	
</style>
</head>

<body>

<div id="nav"> <img src="images/logo.gif" alt="logo image" align="right" /> </div>
<div id="content"> <img src="images/news.gif" alt="news image"/> </div>

</body>
</html>


Share this post


Link to post
Share on other sites
Advertisement
whats odd is I have used this exact same technique before and it works ok. I think I'll just have to use tables for the structure.


anyone see any non standard markup in the code above?

the page validates ok so I must be missing something here.

Share this post


Link to post
Share on other sites
I believe the '<?xml version="1.0" encoding="iso-8859-1"?>' line causes IE to go into quirks mode. Try removing that line and see if MSIE changes behavior.

If Opera and Firefox agree on CSS, then you are (always?) safe to blame IE.

Share this post


Link to post
Share on other sites
The problem is your use of the deprecated "align" attribute on one of your images.

This causes (probably unknown to you), the image to "float" to the right. This means that text and other inline elements will flow around it. This is probably not what you want.

If you intended to float the image to the right, be sure that the next block element that you want to appear below it, has the style "clear:both" set, if you want to be sure.

IE renders it wrong, Moz / Opera render ir right.

PLEASE do not use the deprecated "align" attribute. It is highly confusing to everyone, as it has several distinct meanings depending on the context it's used in, and is ambiguous at best. Use CSS instead of deprecated HTML.

Mark

Share this post


Link to post
Share on other sites
Thanks Mark, Fixed it kinda :P

its not overlapping but it still also looks nothing like my design.

I just bought the css zen garden book so hopefully this should give me some pointers on it.

I really don't understand at the moment why the width and height css is not having an effect on the page in FF and OP. also the dashed line is not there...

I am gonna go back to laying out with tables soon :P

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!