Website dev internet explorer and safari (emergency)

Hi all,

I’ve developed a website with html, css and some javascript, I did so on my mac, and it works relatively well on any webbrowser (firefox, crome, opera, safari), but I test it on a windows under internet explorer and my site is really bad, averything is not at it’s place, no images at it’s position, the javascript effects does not work (changes images onclick , passing the cursor over) and even javascript lightbox does not works…

It’s an emergency, it is my first professional website and I have to release it on monday, but now it’s a big mess on internet explorer.

What a hell is going on?

Pleas help me up.

Let this be a web design wake up for you—you must test your sites in the major browsers of both platforms while you are building them, not after the fact.

Other than that, we can’t help you, especially if we can’t see your site. :wink:

Then I’m in troubles…

At least, could you help me with that?

Is there any guide in internet about the differences to keep in mind for the different webbrowsers when we are writing html with css and javascript? I’ learnd the basis, but I don’t know what to do for been sure working on every single webbrowser.

Thank you

How can I be sure I’m supporting various web browsers, what language rules?

If your code is sound and not too ambitious, there should be very few—if any—cross-browser problems. Most problems are caused by poor coding. So the best thing is to show us a link, and we can suggest what has gone wrong.

EDIT: if you want to find out what can go wrong in browsers, just browse through these forums. Most posts are on that very topic… but there are thousands of them!

I wish I could, but since is a commercial site I would not publish the link :frowning:

Well, you could post the code that is going wrong then. For example, place your html, css and JS into a template like this and post it back here:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Test</title>
	
<style type="text/css" media="all">
[COLOR="Red"]...CSS here...[/COLOR]
</style>

<script type="text/javascript" src="">
[COLOR="Red"]...JavaScript here...[/COLOR]
</script>
	
</head>
<body>
[COLOR="Red"]...HTML here...[/COLOR]
</body>

</html>

Ok, thank you, here it goes:

Index.html

<!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" xml:lang="ja" lang="ja" dir="ltr"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />


		<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" / <script type="text/javascript" src="js/menu.js"></script> 
		
		<title>
			LOST
		</title>
	</head>
	<link rel="icon" type="image/png" href="img/lost_logo48.png" />
	<body onLoad="MM_preloadImages('img/test2.png','img/test1.png','img/coffee.jpg')" >
		<!--##### BANNER #####-->
		<div id="bannerbckgr">
			<div id="banner">
				<center>
					<a href="index.html">
						<img align="left" src="img/banner.png" border="0">
					</a>
					
				</center>
			</div>
		</div>
		<!--##### MENU #####-->
		<div id="topbar0">
		</div>
		<div id="bar0">	
			<div id="sep">
			</div>		
			<div id="sep">
				<img src="img/lc.png">
			</div> 
			<div id="opt0">
					<img src="img/0ya.png" border="0">
			</div>
			<div id="sep">
				<img src="img/rc.png">
			</div>
			<div id="sep">
			</div>
			<div id="opt1">
				<a href="1.html">
					<img src="img/1w.png" alt"" name="menu1" width="98" height ="25" border="0" id="menu1" onMouseOver="MM_swapImage('menu1','','img/1y.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>	
			</div>
			<div id="sep">
			</div>	
		    <div id="sep">
			</div>
			<div id="opt2">
				<a href="2.html">
					<img src="img/2w.png" alt"&#26377;&#27231;&#29640;&#29746;" name="menu2" width="57" height ="25" border="0" id="menu2" onMouseOver="MM_swapImage('menu2','','img/2y.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="sep">
			</div>	
		    <div id="sep">
			</div>
			<div id="opt3">
				<a href="3.html">
					<img src="img/3w.png" alt"&#31354;&#38291;" name="menu3" width="28" height ="25" border="0" id="menu3" onMouseOver="MM_swapImage('menu3','','img/3y.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="sep">
			</div>	
		    <div id="sep">
			</div>
			<div id="opt4">
				<a href="4.html">
					<img src="img/4w.png" alt"&#12513;&#12491;&#12517;&#12540;" name="menu4" width="40" height ="25" border="0" id="menu4" onMouseOver="MM_swapImage('menu4','','img/4y.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="sep">
			</div>
			<div id="sep">
			</div>
			<div id="opt5">
				<a href="5.html">
					<img src="img/5w.png" alt"&#24215;&#33303;" name="menu5" width="28" height ="25" border="0" id="menu5" onMouseOver="MM_swapImage('menu5','','img/5y.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="sep">
			</div>	
		    <div id="sep">
			</div>
			<div id="opt6">
				<a href="6.html">
					<img src="img/6w.png" alt"&#21152;&#30431;&#30456;&#35527;" name="menu6" width="57" height ="25" border="0" id="menu6" onMouseOver="MM_swapImage('menu6','','img/6y.png',1)" 	onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="twitterbar">
				<a href="http://twitter.com/lostscoffee" target="top">
					<!--<img src="img/twitterbar.png" border="0">-->
					<img src="img/twitterbar.png" name="twitterbar" width="270" height ="25" border="0" id="twiterbar" onMouseOver="MM_swapImage('twitterbar','','img/twitterbary.png',1)" 	onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="twitterbird">
				<center>
					<a href="http://twitter.com/lostscoffee" target="top">
						<img src="img/twitterbird.png" name="twitterbird" width="84" height ="48" border="0" id="twiterbird" onMouseOver="MM_swapImage('twitterbird','','img/twitterbirdy.png',1)" 	onMouseOut="MM_swapImgRestore()">
					</a>
				</center>
			</div>
		</div> 
		<div id="topbar1">
		</div>
		<div id="topbar2">
		</div>
		<!--##### MAIN #####-->
		<div id="main">	
			<div id="pag1title1">
				<img src="img/pag0title1.png" border="0">
			</div>
			<div id="pag2sec1sep">
			</div>
			<div id="pag0sec1">
				<img src="img/m1.png" border="0">
			</div>
			<div id="pag0sec2sep">
			</div>
			<div id="pag0sec1-1">
				<a href="1.html" border="0">
					<img src="img/pag0sec1-1.png"  name="pag0sec1-1" width="182" height ="25" border="0" id="pag0sec1-1" onMouseOver="MM_swapImage('pag0sec1-1','','img/pag0sec1-1o.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="pag0sec1-2">
				<a href="2.html" border="0">
					<img src="img/pag0sec1-2.png"  name="pag0sec1-2" width="182" height ="25" border="0" id="pag0sec1-2" onMouseOver="MM_swapImage('pag0sec1-2','','img/pag0sec1-2o.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="pag0sec1-3">
				<a href="3.html" border="0">
					<img src="img/pag0sec1-3.png"  name="pag0sec1-3" width="182" height ="25" border="0" id="pag0sec1-3" onMouseOver="MM_swapImage('pag0sec1-3','','img/pag0sec1-3o.png',1)" onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="news_title"><!-- info title-->
				<img src="img/news_title.png" border="0">
			</div>
			<div id="news_title_sep">
			</div>
			<div id="news"><!--info-->
			</div>
			<div id="info_title"><!--noticias-->
				<img src="img/nani.png" border="0">
			</div>
			<div id="info_title_sep">
			</div>
			<div id="info"><!-- noticias titulo-->
			</div>
			<div id="recruitment">
				<a href="7.html">
					<img src="img/recruitment_banner.png" border="0">
				</a>
			</div>
			<!--<div id="pag0sec1-2">
				<img src="img/pag0sec1-2.png" border="0">
			</div>
			<div id="pag0sec1-3">
				<img src="img/pag0sec1-3.png" border="0">
			</div>-->
			
			<!--
			<div id="m21">
				<a href="1.html">
					<img src="img/m21.png" border="0">
				</a>
			</div>
			<div id="m22">
				<a href="2.html">
					<img src="img/m22.png" border="0">
				</a>
			</div>
			<div id="m23">
				<a href="3.html">
					<img src="img/m23.png" border="0">
				</a>
			</div>-->
			
			<div id="wesocial">
				<img src="img/wesocial.png" boder="0">
			</div>
			<div id="footer_sepp">
			</div>
			<div id="icon"> 
				<a href="http://twitter.com/lostscoffee" target="top">
			 		<img src="img/twitter.png" border="0">	
				</a>
		   	</div>
			<div id="footer_sepp">
			</div>
			<div id="icon"> 
				<a href="http://ja-jp.facebook.com/pages/lost/143338" target="top">
			 		<img src="img/facebook.png" border="0">	
				</a>
		   	</div>
			<div id="footer_sepp">
			</div>
			<div id="icon"> 
				<a href="http://lostcoffee.wordpress.com" target="top">
			 		<img src="img/wordpress.png" border="0">	
				</a>
		   	</div>
			<div id="footer_sepp">
			</div>
			<div id="icon"> 
				<a href="" target="top">
			 		<img src="img/mixi.png" border="0">	
				</a>
			</div>
		</div> 
		<!--##### FOOTER #####-->
		<div id="footer">
			<div id="copyr">
				<img src="img/copyright.png" boder="0">
			</div>
			<div id="footer_sep">
			</div>
			<div id="b10">
				<a href="">
					<img src="img/b1o.png" name="b1o0" width="63" height ="25" border="0" id="b1o0" onMouseOver="MM_swapImage('b1o0','','img/b1oy.png',1)" 	onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
			<div id="footer_sepp">
			</div>
			<div id="b10">
				<a href="">
					<img src="img/b2o.png" name="b1o01" width="63" height ="25" border="0" id="b1o1" onMouseOver="MM_swapImage('b1o1','','img/b2oy.png',1)" 	onMouseOut="MM_swapImgRestore()">
					
				</a>
			</div>
			<div id="footer_sepp">
			</div>
			<div id="b20">
				<a href="">
					<img src="img/b3o.png" name="b2o0" width="86" height ="25" border="0" id="b2o0" onMouseOver="MM_swapImage('b2o0','','img/b3oy.png',1)" 	onMouseOut="MM_swapImgRestore()">	
				</a>
			</div>
			<div id="footer_sepp">
			</div>
			<div id="b20">
				<a href="">
					<img src="img/b4o.png" name="b2o1" width="86" height ="25" border="0" id="b2o1" onMouseOver="MM_swapImage('b2o1','','img/b4oy.png',1)" 	onMouseOut="MM_swapImgRestore()">
				</a>
			</div>
		</div>
	</body>
</html>

NOW styles.css:

body {
	margin:0px 0px 20px;	
	margin-top:0px;
	font-family:verdana;
	#background:#F0EEE7;
	background:#D2C1A6;
	#background:#35241D;
	#background:#a89463;

}

#bannerbckgr{
	margin:0 auto;
	margin-top:0px;

	background:#35241D;

	width:766px;
	height:107px;	
	z-index:0;
	
}

#banner {
	#margin:0 auto;
	margin-top:5px;
	margin-left:5px;

	#background:#a89463;
float:left;
	width:756px;
	height:97px;
	z-index:1;
}

#topbar0 {
	margin:0 auto;
	margin-top:0px;
	border:0px #a89463;
	background:#35241D;
	#background:#a89463;
	#background:#990000;
	#background:#a89463;
	width:766px;
	height:4px;
}

#topbar1 {
	margin:0 auto;
	margin-top:0px;
	border:0px #a89463;
	#background:#35241D;
	background:#a89463;
	#background:#990000;
	#background:#a89463;
	width:766px;
	height:4px;
}

#topbar2 {
	margin:0 auto;
	margin-top:0px;
	border:0px #a89463;
	#background:#35241D;
	background:#F0EEE7;
	#background:#990000;
	#background:#a89463;
	width:766px;
	height:21px;
}

#topbar3 {
	margin:0 auto;
	margin-top:0px;
	border:0px #a89463;
	#background:#35241D;
	background:#a89463;
	#background:#990000;
	#background:#a89463;
	width:766px;
	height:25px;
}

#bar0{
	margin:0 auto;
	margin-top:0px;
	#border:1px solid white;
	background:#35241D;
	#background:#111111;
	width:766px;
	height:25px;
	z-index:0;
}

#opt0 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:42px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt1 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:98px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt2 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:57px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt3 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:28px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt4 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:40px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt5 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:28px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt4test {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:58px;
	height: 50px;
	float:left;
	z-index:2;
}


#opt6 {
	margin:0 auto;
	margin-top:0px;
	border:0px solid white;
	width:57px;
	height: 25px;
	float:left;
	z-index:1;
}

#opt7 {
	#margin:0 auto;
	margin-top:0px;
	margin-left:3;
	border:0px solid white;
	width:56px;
	height: 25px;
	float:left;
	z-index:1;
}

#sep0 {
	margin:0 auto;
	margin-top:0px;
	background:#35241D;
	width:11px;
	height:25px;
	float:left;
	#z-index:1;
}

#sep {
	margin:0 auto;
	margin-top:0px; 
	background:#35241D;
	#width:30px;
	width:8px;
	height:25px;
	float:left;
	z-index:1;
}

#sep1 {
	margin:0 auto;
	margin-top:0px; 
	background:#a89463;
	#width:30px;
	width:8px;
	height:25px;
	float:left;
	z-index:1;
}

#sep2 {
	margin:0 auto;
	margin-top:0px; 
	background:#35241D;
	#width:30px;
	width:126px;
	#width:135px;
	height:25px;
	float:left;
	z-index:2;
}

#twitterbar {
	position: absolute;
	#margin:0 auto;
	margin-top:0px;
	margin-left:515px;
	border:0px;
	width:270px;
	height: 25px;
	float:left;
	z-index:3;
}

#twitterbird {
	position: absolute;
	margin-top:0px;
	margin-left:745px;
	border:0px;
	width:48px;
	height: 72px;
	z-index:4;
}

#sepn {
	margin:0 auto;
	margin-top:0px; 
	background:#ffffff;
	width:10px;
	height:25px;
	float:left;
	z-index:1;
}

#menu {
	font-family:verdana, arial, sans-serif;
	color:#006699;
	font-size:x-small;
	font-weight:normal;
	background:#ffffff;
	line-height:140%;
	border:0px solid black;
	margin-left:20px;
	margin-top:15px;
	margin-bottom:1px;
}

#main {
	margin: 0 auto;
	margin-top:0px;
	background:#F0EEE7;
	#background:#D2C1A6;
	#background:#b7af9f;
	border:1px #000000;
	width: 766px;
	#height:390px;
	height:432px;
	z-index:0;
}

#twit {
	position: absolute;
	margin-top:0px;
	margin-left:523px;	
	border:0px;	
	width:300px;
	height: 65px;
	z-index:1;
}

#recruitment {
	position: absolute;
	margin-top:469px;
	margin-left:491px;
	width:275px;
	height:40px;
	z-index:3;
}



#news_title {
	position: absolute;
	margin-top:10px;
	margin-left:505px;
	border:0px solid red;
	width:240px;
	height:30px;
	z-index:1;
	float:left;
}

#news_title_sep {
	position: absolute;
	margin-top:32px;
	margin-left:505px;
	background:#35241D;
	width:262px;
	height:1px;
	float:left;
	z-index:1;
}

#news {
	position: absolute;
	margin-top:34px;
	margin-left:505px;
	border:0px solid black;
	width:259px;
	height:253px;
	z-index:2;
}

#info_title {
	position: absolute;
	margin-top:289px;
	margin-left:505px;
	border:0px dotted black;
	width:73px;
	height:25px;
	z-index:2;
}

#info_title_sep {
	position: absolute;
	margin-top:310px;
	margin-left:505px;
	background:#35241D;
	width:262px;
	height:1px;
	float:left;
	z-index:1;
}

#info {
	position: absolute;
	margin-top:312px;
	margin-left:505px;
	border:0px solid black;
	width:260px;
	height:75px;
	z-index:1;
}

#recruitment {
	position: absolute;
	margin-top:390px;
	margin-left:491px;
	width:275px;
	height:40px;
	z-index:1;
}



/* social networks*/

#wesocial {
	#margin-top:365px;
	margin-top:407px;
	#background:#35241D;
	border:0px solid white;
	width:88px;
	height:25px;
	float:left;
	z-index:1;	
}

#footer_sepp {
	#position:absolute;
	#margin-top:407px;
	#background:#F0EEE7;
	border:0px solid black;
	width:18px;
	width:10;
	height:25px;
	float:left;
	z-index:1;	
}

#icon {
	#position:absolute;
	margin-top:407px;
	#background:#35241D;
	border:0px solid white;
	width:18px;
	height:25px;
	float:left;
	z-index:1;
}






#img1 {
	margin: 0 auto;
	margin-top: 3px;
	margin-left:0px;
	color:#000000;
	background:#ffffff;
	border:1px solid black;
	width:159px;
	height: 119px;
}



#footer{
	margin:0 auto;
	margin-top:0px;
	background:#35241D;
	width:766px;
	height:25px;
	#float:0 auto;
	z-index:0;
}

#copyr {

	#position: absolute;
	margin-top:0px;
	margin-left: 0px;
	background:#35241D;
	border:0px solid white;
	width:240px;
	height:25px;
	z-index:1;	
	float:left;
}

#footer_sep {
	#position:absolute;
	margin-top:0px;
	background:#35241D;
	border:0px solid white;
	#width:418px;
	width:170px;
	#width:312px;
	height:25px;
	float:left;
	z-index:1;	
}

#b10 {
	#position:absolute;
	margin-top:0px;

	#background:#35241D;
	border:0px solid white;
	width:63px;
	height:25px;
	float:left;
	z-index:1;
}

#b20 {
	#position:absolute;
	margin-top:0px;
	#background:#35241D;
	border:0px solid white;
	width:86px;
	height:25px;
	float:left;
	z-index:1;
}
/*pag 0*/
#pag0sec1 {
	position: absolute;
	margin-top:58px;
	margin-left:1px;
	width: 255px;
	height: 35px;
	z-index:1;	
	float:left;
}

#pag0sec2sep {
	position: absolute;
	margin-top:100px;
	margin-left:0px;
	background:#35241D;
	width:277px;
	height:1px;
	float:left;
	z-index:1;
}

#pag0sec1-1  {
	position: absolute;
	margin-top:51px;
	margin-left:1px;
	width: 182px;
	height: 25px;
	z-index:1;	

}
#pag0sec1-2  {
	position: absolute;
	margin-top:61px;
	margin-left:1px;
	width: 182px;
	height: 25px;
	z-index:2;

}
#pag0sec1-3  {
	position: absolute;
	margin-top:71px;
	margin-left:1px;
	width: 182px;
	height: 25px;
	z-index:2;

}	
/* page 1 */
#pag1title1 {
	position: absolute;
	margin-top:10px;
	margin-left:0px;
	#background:#35241D;
	border:0px solid black;
	width:280px;
	height:36px;
	float:left;
	z-index:1;	
}

#pag1sec1 {
	position: absolute;
	margin-top:58px;
	margin-left:0px;
	border:0px solid black;
	width:490px;
	height:90px;
	float:left;
	z-index:1;	
}
#pag1sec2title {
	position: absolute;
	margin-top:162px;
	margin-left:0px;
	background:#35241D;
	#background:#a89463;
	border:0px solid black;
	width:300px;
	height:26px;
	float:left;
	z-index:1;

}

#pag1sec2 {
	position: absolute;
	margin-top:191px;
	margin-left:0px;
	border:0px solid black;
	width:362px;
	height:15px;
	float:left;
	z-index:1;	
}

#pag1sec3a{
	position: absolute;
	margin-top:225px;
	margin-left:0px;
	background:#35241D;
	border:0px solid black;
	width:162px;
	height:95px;
	float:left;
	z-index:1;
}


#pag1sec3b{
	position: absolute;
	margin-top:225px;
	margin-left:172px;
	border:1px solid black;
	#background:#000000;
	width:203px;
	height:95px;
	float:left;
	z-index:1;
}

#pag1sec3c{
	position: absolute;
	margin-top:325px;
	margin-left:0px;
	border:0px solid black;

	width:365px;
	height:95px;
	float:left;
	z-index:1;
}

#pag1sec4a{
	position: absolute;
	margin-top:225px;
	margin-left:391px;
	background:#35241D;
	border:0px solid black;
	width:162px;
	height:95px;
	float:left;
	z-index:1;		
}

#pag1sec4b{
	position: absolute;
	margin-top:225px;
	margin-left:563px;
	border:1px solid black;
	#background:#000000;
	width:203px;
	height:95px;
	float:left;
	z-index:1;

}

#pag1sec4c{
	position: absolute;
	margin-top:324px;
	margin-left:391px;
	border:0px solid black;
	width:365px;
	height:95px;
	float:left;
	z-index:1;
}


#pag1sec5a{
	position: absolute;
	margin-top:420px;
	margin-left:0px;
	background:#35241D;
	border:0px solid black;
	width:162px;
	height:95px;
	float:left;
	z-index:1;		
}

#pag1sec5b{
	position: absolute;
	margin-top:420px;
	margin-left:172px;
	border:1px solid black;
	#background:#000000;
	width:203px;
	height:95px;
	float:left;
	z-index:1;

}

#pag1sec5c{
	position: absolute;
	margin-top:520px;
	margin-left:0px;
	border:0px solid black;
	width:365px;
	height:140px;
	float:left;
	z-index:1;
}

#pag1sec6a{
	position: absolute;
	margin-top:420px;
	margin-left:391px;
	background:#35241D;
	border:0px solid black;
	width:162px;
	height:95px;
	float:left;
	z-index:1;		
}

#pag1sec6b{
	position: absolute;
	margin-top:420px;
	margin-left:563px;
	border:1px solid black;
	#background:#D2C1A6;
	#background:#000000;
	width:203px;
	height:95px;
	float:left;
	z-index:1;

}

#pag1sec6c{
	position: absolute;
	margin-top:520px;
	margin-left:391px;
	border:0px solid black;
	width:365px;
	height:95px;
	float:left;
	z-index:1;
}

/*
#pag1sec4a{
position: absolute;
margin-top:335px;
margin-left:0px;
background:#35241D;
border:0px solid black;
width:162px;
height:95px;
float:left;
z-index:1;		
}

#pag1sec4b{
position: absolute;
margin-top:335px;
margin-left:167px;
border:0px solid black;
background:#D2C1A6;
width:203px;
height:95px;
float:left;
z-index:1;

}
*/

#pag1sec6{
}

#pag1sec6{
}

/* page 2 */

#pag2sec1 {
	position: absolute;
	margin-top:10px;
	margin-left:0px;
	#background:#35241D;
	border:0px solid black;
	width:175px;
	height:36px;
	float:left;
	z-index:1;	
}

#pag2sec1sep {
	position: absolute;
	margin-top:50px;
	margin-left:0px;
	background:#35241D;
	width:277px;
	height:1px;
	float:left;
	z-index:1;
}


#pag2sec2 {
	position: absolute;
	margin-top:58px;
	margin-left:0px;
	border:0px solid black;
	width:228px;
	height:100px;
	float:left;
	z-index:1;	
}

#pag2img1 {
	position: absolute;
	margin-top:159px;
	margin-left:9px;
	border:1px solid black;
	width:275px;
	height:100px;
	float:left;
	z-index:1;

}


#pag2sec3title {
	position: absolute;
	margin-top:161px;
	margin-left:400px;
	background:#35241D;
	border:0px solid black;
	width:366px;
	height:26px;
	float:left;
	z-index:1;

}
#pag2sec3 {
	position: absolute;
	margin-top:187px;
	margin-left:400px;
	border:0px solid black;
	width:256px;
	height:100px;
	float:left;
	z-index:1;	
}


#pag2sec4title {
	position: absolute;
	margin-top:283px;
	margin-left:0px;
	background:#35241D;
	border:0px solid black;
	width:300px;
	height:26px;
	float:left;
	z-index:1;
}

#pag2sec4 {
	position: absolute;
	margin-top:312px;
	margin-left:0px;
	border:0px solid black;
	width:450px;
	height:83px;
	float:left;
	z-index:1;	
}

#pag2sec5title {
	position: absolute;
	margin-top:399px;
	margin-left:0px;
	background:#35241D;
	border:0px solid black;
	width:300px;
	height:26px;
	float:left;
	z-index:1;
}	

#pag2sec5 {
	position: absolute;
	margin-top:426px;
	margin-left:0px;
	border:0px solid black;
	width:468px;
	height:41px;
	float:left;
	z-index:1;	
}
/* page 3 */
#pag3sec2 {
	position: absolute;
	margin-top:58px;
	margin-left:0px;
	border:0px solid black;
	width:493px;
	height:35px;
	float:left;
	z-index:1;	
}		
#pag3sec2title {
	position: absolute;
	margin-top: 145px;
	margin-left:253px;
	#background:#35241D;
	background:#35241D;
	border:0px solid black;
	width:515px;
	height:26px;
	float:left;
	z-index:1;
}

#pag3sec3 {
	position: absolute;
	margin-top: 173px;
	margin-left:253px;
	border:0px solid black;
	width:515px;
	height:60px;
	float:left;
	z-index:1;
}
/* page 3 */
#pag5sec2 {
	position: absolute;
	margin-top:58px;
	margin-left:0px;
	border:0px solid black;
	width:410px;
	height:40px;
	float:left;
	z-index:1
}

#pag2sec1sep {
	position: absolute;
	margin-top:50px;
	margin-left:0px;
	background:#35241D;
	width:277px;
	height:1px;
	float:left;
	z-index:1;
}

#pag5sec3sep {
	position: absolute;
	margin-top:107px;
	margin-left:0px;
	background:#35241D;
	width:277px;
	height:1px;
	float:left;
	z-index:1;
}


#pag5sec3 {
	position: absolute;
	margin-top:118px;
	margin-left:0px;
	border:0px solid black;
	width:470px;
	height:20px;
	float:left;
	z-index:1
}

#pag5sec4{
	position: absolute;
	margin-top:158px;
	margin-left:243px;
	border:2px solid yellow;
	background:#35241D;
	width:280px;
	height: 64px;
	float:left;
	z-index:1;
}

#mise0{
	position: absolute;
	margin-top:65px;
	margin-left:2px;
	border:2px solid yellow;
	width:95px;
	height:86px;
	float:left;
	z-index:1
}

#mise1{
	position: absolute;
	margin-top:171px;
	margin-left:2px;
	border:2px solid yellow;
	width:95px;
	height:86px;
	float:left;
	z-index:1
}

#mise2{
	position: absolute;
	margin-top:277px;
	margin-left:2px;
	border:2px solid yellow;
	width:95px;
	height:86px;
	float:left;
	z-index:1
}

Thank you!!!

Thanks in advance!!!,

The main problem is with internet explorer, the images does not apear, even not the position, and the java script effects does not work…

I dunno why is not working in iexplorer… with firefox and safari it works right.

Any sugestion? thank you guys.

Any help? why is not correct for internet explorer?

Does IE support the PNG images you’re using? The MacroMedia javascript?

Yes, the main problem now is about the I can not put divs one bellow nother in explorer, in the other browsers it works, but with ie this does not have effect:

float:left;
z-index:1;

I cannot put divs horinzotally, just vertically…

Well here I give you more details after dealing a little bit (I’m new so I really don’t have a lot of Idea):

  1. Problem positioning “boxes” on the web one on the top of another:

I created two div into the css file trying two put one box bellow another:

This is the css :

#pag1title1 {
	position: absolute;
	margin-top:10px;
	margin-left:0px;
	#background:#35241D;
	border:0px solid black;
	width:280px;
	height:36px;
	float:left;
	z-index:1;	
}

#pag1sec1 {
	position: absolute;
	margin-top:58px;
	margin-left:0px;
	border:0px solid black;
	width:490px;
	height:90px;
	float:left;
	z-index:1;	
}

An this is the html file :

<div id="main">
 <div id="pag1title1">
	<img src="img/pag1title1.png" border="0">
 </div>
 <div id="pag2sec1sep">
 </div>
</div>

I happens that instead of appear vertically the second it’s move to the right, that only happens with internet explorer

This is the main css , just in case:

#main {
	margin: 0 auto;
	margin-top:0px;
	background:#F0EEE7;
	#background:#D2C1A6;
	#background:#b7af9f;
	border:1px #000000;
	width: 766px;
	#height: 355px;
	height:694px;
	z-index:0;
}

2 problem javascript onMouseOver effect for changing images:

Pretty much the same, it works on any browser excep in internet explorer:

This is the html

<a href="2.html">
	<img src="img/2w.png" alt"test" name="menu2" width="57" height ="25" border="0" id="menu2" onMouseOver="MM_swapImage('menu2','','img/2y.png',1)" onMouseOut="MM_swapImgRestore()">
</a>

This is how I call the javascript:

<link rel="stylesheet" href="styles.css" type="text/css" media="all" / <script type="text/javascript" src="menu.js"></script> 

This is the javascript code:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Any sugestions? many thanks

I getting mad with the internet explorer…

I’ve solve the rows problem using this:

.row {float: left; margin: 0; padding: 0; width: 100%;}
<div class=“row”>
the correspondant content to that row (even div id=whatever)
</div>

What about the javascript issue?

I forgot the details, but I remember seeing someting about IE handling z-index differently. Something about “starting over” I think.

Anyway, you got that sorted for now.

For the javascript you should be able to pinpoint the problem area by using some alerts. eg.

function MM_swapImgRestore() { //v3.0
	var i,x,a=document.MM_sr;
	for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
	var d=document;
	if(d.images)
	{
		if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
		for(i=0; i<a.length; i++)
		if (a[i].indexOf("#")!=0)
		{
			d.MM_p[j]=new Image;
			d.MM_p[j++].src=a[i];
		}
		else
		{
			alert('a[i].indexOf == 0');
		}
	}
	else
	{
		alert('d.images is false');
	}
}
 
function MM_findObj(n, d) { //v4.01
	var p,i,x;
	if(!d) d=document;
	if((p=n.indexOf("?"))>0&&parent.frames.length)
	{
		d=parent.frames[n.substring(p+1)].document;
		n=n.substring(0,p);
	}
	if(!(x=d[n])&&d.all) x=d.all[n];
	for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
	if(!x && d.getElementById) x=d.getElementById(n);
	return x;
}
 
function MM_swapImage() { //v3.0
	var i,j=0,x,a=MM_swapImage.arguments;
	document.MM_sr=new Array;
	for(i=0;i<(a.length-2);i+=3)
	if ((x=MM_findObj(a[i]))!=null)
	{
		document.MM_sr[j++]=x;
		if(!x.oSrc) x.oSrc=x.src;
		x.src=a[i+2];
	}
	else
	{
		alert('MM_findObj is null');
	}
}

Could you help me up with the z-index problem? I think taht’s definetively why I’m not being able for positioning things like in the other browsers, but I have not Idea how to solve it :frowning:

Here is a nice article on how z-index should work:

and here’s a useful post on what IE does wrong and how to fix it: