this is 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="../assets/css/location.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="../assets/css/locationie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container1">
<div id="link1">
<ul>
<li><a href="location.html">location</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div><!--link1 ends here!-->
<img src="../assets/photos/logoliv.png" id="img2" alt="logo" /><!--zindex on top!-->
<div id="container2">
<div id="mpic"><!--<img src="../assets/photos/location.png" id="img1" alt="table"/>!--></div>
<div id="current"><img src="../assets/photos/location.jpg" id="img3" alt="curentlink" /></div>
<div id="maintext">
<p>test goes here</p>
</div><!--maintext ends here-->
<div id="clr"></div>
</div><!--container2 ends here!-->
<div id="link">
<ul>
<li><a href="terms.html">terms</a></li>
<li><a href="tariffs.html">tariffs</a></li>
<li><a href="bedrooms.html">bedrooms</a></li>
<li><a href="living.html">living area</a></li>
<li><a href="../index.html">home</a></li>
</ul>
</div><!--link ends here!-->
</div><!--container1 ends here!-->
</body>
</html>
this is my css
body
{text-align:center;
}
/*main cotainer*/
#container1
{
position:relative;
text-align:left;
margin:auto;
width:1000px;
border: #FFFFFF solid 1px;
}
/*logo pics*/
#img2
{
background-color:transparent;
z-index:1;
position:absolute;
top:35px;
left:50px;
}
/*container witch photo and textbox*/
#container2
{
height:500px;
width:900px;
margin:70px 50px 0px 50px;
background:#babf9e;
padding:1px;
}
/*left floated picture in content2 div bedzie gdzie indziej*/
#img1
{
margin:0px;
padding:0px;
}
#mpic
{
width:266px;
height:400px;
background-image:url(../photos/location1.jpg);
margin:60px 20px 30px 30px;
float:left;
border:#000 solid 1px;
}
/*current photo*/
#img3
{
margin:0px;
padding:0px;
}
#current
{
margin:0px 20px 0px 20px;
float:left;
}
/*text next to pics3*/
#maintext
{
margin-top:80px;
margin-right:20px;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
color:#5B6335;
}
#maintext p
{
text-align:justify;
margin:0px;
padding:0px;
}
/*#container2 p span
{
display:inline-block;
}
/*when is dirty */
#clr
{
clear:both;
}
/*MAIN links*/
#link
{
margin-right:40px;
margin-top:-15px;
padding:0px;
}
#link ul li
{
display:inline;
list-style-type:none;
margin-right:40px;
float:right;
margin-top:0px;
}
/*behavior for hover i current - main menu*/
#link ul li a
{
font-size:18px;
text-decoration:none;
color:#999;
font-family:Arial, Helvetica, sans-serif;
}
#link ul li a:hover
{
display:block;
border-bottom:solid 2px;
border-bottom-color:#cbcb32;
}
#link ul li a#current
{
border-bottom:solid 2px #66cc00;
}
/*extra links, above the content2*/
#link1
{
margin-right:20px;
margin-top:0px;
padding:0px;
}
#link1 ul li
{
list-style-type:none;
margin-right:40px;
margin-top:30px;
float:right;
display:inline;
}
/*behaviour for hover i current - main menu*/
#link1 ul li a
{
font-size:14px;
text-decoration:none;
color:#999;
font-family:Arial, Helvetica, sans-serif;
}
#link1 ul li a:hover
{
border-bottom:solid 2px;
border-bottom-color:#cbcb32;
}
#link1 ul li a#current
{
border-bottom:solid 2px #66cc00;
}
And the problem:
Mozilla - no problems,
IE - ignoring jpgs/pngs - i do not know - was playing with background as a picture, <img /> itslef. Nothing zero, null. and the strange thing is - when i open page website, all looks ok, one click, and there you go - crap - all pics disappearing, and because is floated, all text move around.
whats wrong with pics and ie - was troubleshooting it some time ago, was ok.
o maybe its me...