Hi Everyone,
I have not posted here in quite some time but I would like to thank everyone for the help and inspiration given in the past and hope you can help again.
I am very new to web design, I am trying to make a site for a friend and have become stuck on cross browser problems.
In fireFoxx everything is appearing as it should - especially some images that I have included. However on trying it on IE they just do not appear. I just cannot work out why they will not appear. I am sure I have something conflicting that seems to pass through with FF but not IE.
The images are top-fade2.jpg and manel2.jpg.
If anyone can help I would be so grateful.
/*
css for tocaretoc main
*/
/*
tocaretoc logo red #9c0d15
*/
body {
background-color: black;
width: 1200px;
padding-left: 20px;
}
#bodycontent {
background: url(top-fade2.jpg)repeat-x;
height: 130px;
margin-left:-10px;
margin-top: -25px;
}
#body2 {
position: absolute;
left: 380px;
top: 150px;
height: 450px;
width: 400px;
background: url(manel2.jpg)no-repeat;
}
h1 {
font-size: 300%;
color: white;
font-family: arial-bold;
margin-left: 420px;
}
h2 {
color: #9c0d15;
margin-left: 420px;
margin-top: -35px;
font-family: arial-bold;
}
.styled{
color: black;
}
a {
text-decoration:none
}
#navigation{
position: absolute;
top: 200px;
left: 60px;
font-weight: bold;
}
#home {
font-weight: bold;
color: blue;
list-style-type: none;
}
#navigation li {
padding-top: 50px;
}
#navigation a:link{
color: #9c0d15;
}
#navigation a:visited {
color: #9c0d15;
}
#navigation a:hover .styled2{
color: #9c0d15;
}
#navigation a:hover {
color: white;
}
#navigation a:active {
color: #9c0d15;
}
.styled2{
color: white;
}
#whoami{
float: right;
color: white;
font-size: 75%;
width: 300px;
padding-top: 50px;
padding-right: 80px;
}
#whoami h3 {
text-align: center;
}
#picture a {
top: 150px;
left: 280px;
width: 400px;
height: 500px;
display: block;
background: url(model1-1.jpg) no-repeat;
position: absolute;
}
#picture a:hover {
text-decoration: none;
width: 561px;
height: 700px;
background: url(model1-2.jpg) no-repeat;
}
#navigation-moda {
right: 300px;
text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TocaReToc - Inicio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="KEYWORDS, KEYWORS,"/>
<meta name="keywords" content="KEYWORDS, KEYWORS, KEYWORDS, KEYWORS,"/>
<link rel="Shortcut Icon" href="favicon.ico"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bodycontent">
<div id="header-filler">
<h1>toca<span class="styled">Re</span>toc<h1/>
<h2>un mon de Retocs<h2/>
</div><!-- end of header-filler div -->
<ul>
<div id="home"><li><a href="index.html">Inicio</li>
</div><!-- end of home div -->
<div id="navigation">
<li><a href="portafolio.html">Po<span class="styled2">rta</span>folio</a></li>
<li><a href="marcas.html">Ma<span class="styled2">rc</span>as</a></li>
<li><a href="colaboratores.html">Cola<span class="styled2">bora</span>dores</a></li>
<li><a href="contacto.html">Co<span class="styled2">nta</span>cto</a></li>
</ul>
</div><!-- end of navigation div -->
<div id="body2">
</div><!-- end of body2 div -->
<div id="whoami">
<h3>Quien Soy</h3>
<p>Thanks for stopping by.</p>
</div><!-- end of who am i div -->
</div><!-- end of bodycontent div -->
</body><!-- end of body div -->
</html>