layout working fine in firefox but not in IE

Discussion in 'HTML & Website Design' started by akinak, Apr 11, 2008.

0
  1. #1
    Im new to web designing but I managed to design a layout which is working fine with firefox but in IE, its totally messed up.

    <!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=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JAVASCRIPT" type="text/javascript">
function showtime()
{var d = new Date();
var m_names = new Array("January", "February", "March","April", "May", "June", "July", "August", "September", "October", "November", "December");
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(m_names[curr_month]+" "+ curr_date+ ","+curr_year);
}

</SCRIPT>
<style>
body{
	background-color:#EBEBEB;
	margin-bottom:0em;
	margin-left:2em;
	margin-right:2em;
	margin-top:0em;
	color:#FFFFFF;
	padding-bottom:0em;
	padding-left:2em;
	padding-right:2em;
	padding-top:0em;
				}
#header{border:none;
font-family:Haettenschweiler;
margin-bottom:0;
margin-left:2em;
margin-right:0.5em;
margin-top:0;
}
.logo{font-family:Haettenschweiler; font-size:4em; font-weight:bold; color:#CC3300; font-style:italic; width:6em; text-align:center;}
.logobottom{
	font-family:Haettenschweiler;
	font-style:italic;
	font-weight:bold;
	color:#999999;
	font-size:1.2em;
	text-align:center;
	position:absolute;
	top:105px;
	left:301px;
}
#navigation{	
	text-align:center;
	margin-top:1em;
	font-size:1.4em;
	}
a{ color:#999999;
	text-decoration:none;}
a:hover{color:#FFFFFF;
	text-decoration:none;}
#main{background-image:url(images/bgrd_seashell.gif);
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:0;
margin-left:2.6em;
margin-right:2.6em;
margin-top:1em;
font-size:0.8em;
	}
	#links{
	font-size:1.4em;
	border-right:solid;
	margin-right:35em;
	border-right-color:#000000;
	border-right-width:thin;
			}
</style>
</head>

<body>
<div id="header">
<img src="images/hg-sand1.jpg" align="absmiddle" width="820" height="40" />
<img src="images/txt00403.jpg" align="absmiddle" width="820" height="5"/>
<img src="brazil_fl_md_clr.gif" style="float:left; vertical-align:text-top; margin-right:2em; margin-left:3em;" alt="Brazil Flag" title="Brazil Flag"/><span class="logo">www.sitename.com</span>
<img src="united_states_of_america_fl_md_clr.gif" style="float:right; vertical-align:text-top; margin-left:2em; position:absolute; top:59px; left:707px;" alt="USA flag" title="USA Flag" /> 
<span class="logobottom">education guide </span><br />

</div>
<div id="main">
<img src="images/txt00403.jpg" width="820" height="5" />
<div id="navigation"><span style="font-weight:bold; margin-right:1em;">Home</span> <a href="index.html">Home</a> |<a href="contact.html">Contact Us</a><br />
<img src="images/in00104.jpg" width="310" />
</div>
<script language="javascript">showtime();</script><br /><br />
<div id="links">
<span style="text-decoration:underline; font-weight:bold;">Education Resources</span><br />
<br />
<a href=" ">MBA Degree Programs</a><br /><br />
<a href=" ">English Courses</a></div>
</div>
</body>
</html>
    Code (markup):
    where did I go wrong?? plz help.
     
    akinak, Apr 11, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well on a quick look, this is optional but when you are adding images instead of adding width, align, height to the image just add a class to the image, and then define it in your stylesheet. The same goes for defining span styles inline inside the body.
    All your styles can also be moved to an external stylesheet to clean things up, rather than defining them inside the head as you have done.
    However if you are going to define them in the head then use <style type="text/css" media="screen> YOUR STYLES HERE </style>.

    What exactly is the difference/problem in IE anyways, I couldn't tell from just looking at the code. Maybe somebody else can.
     
    wd_2k6, Apr 11, 2008 IP
  3. akinak

    akinak Peon

    Messages:
    256
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thnx for your suggestion wd_2k6. But I haven't figured out the problem yet. I need some more help...anyone???
     
    akinak, Apr 14, 2008 IP
  4. mistiecloud

    mistiecloud Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    In you style declaration for #main{} add
    float: left;

    In your style declaration for #links{} add

    float: right;

    so you should have something like this

    #main{background-image:url(images/bgrd_seashell.gif);
    color:#999999;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom:0;
    margin-left:2.6em;
    margin-right:2.6em;
    margin-top:1em;
    font-size:0.8em;
    float: left;}
    #links{
    font-size:1.4em;
    border-right:solid;
    margin-right:35em;
    border-right-color:#000000;
    border-right-width:thin;
    float: right; }

    that takes care of your alignment like in firefox, maybe you want to declare the width of each div so that you will have similar spacing like it appears in firefox.

    include a font declaration in the body{} style

    Hope that helps a little
     
    mistiecloud, Apr 14, 2008 IP