Posts: 583
Name: Tony
Location: Seattle Washington
|
I can't figure this out for the life of me. I don't know what the problem is! I just can't figure it out.
Basically I need the image to look like this:
But it shows up like this in IE 6-8:
Here is the HTML:
Code:
<!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" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Elegant Details Boutique</title>
</head>
<body>
<div id="wrap">
<h1>Logo</h1>
<div id="nav1">
<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
<div id="number">
(425) 585-0914
</div>
<div class="clear"> </div>
</div>
<div id="content">
<div id="left">
<i>Dear Friends ~
<br /><br />
<p>Elegant Details, formerly Elegant Clutter, has changed its location (now twice as big) and changed its name… because we're "all about the details." We've not only added more home accents and gifts to our selection, but now we offer a variety of women's apparel and accessories, and yes, all at an affordable price!</p>
<br />
<p>Located in the suburb of Mill Creek, Washington, the shop welcomes customers with a sense of warmth, luscious scents and a welcome homey atmosphere. The two proprietors, Kelly and Lisa, mix their talents and creativity which equals imaginative vignettes offering an eclectic mix of the unexpected… home décor that is understated but never boring; gift ideas that inspire customers to return again and again. </p>
<br />
<p>The attention to detail is what's inside Elegant Details Boutique. An array of home décor that is understated but never boring or typical; gift ideas that inspire customers to return again and again…</p>
<br />
<p>The shop's offerings are trendy, fun, atypical and always changing. It's a store you'll want to tell your friends about!</p>
</i>
<p><i> <br />
Fondly,</i></p>
<p><i><br />
Lisa & Kelly<br />
Proprietors</i>
<br />
<br />
</p>
<img src="img/100_1782.jpg" height="194" width="290" border="none" alt="Kelly and Lisa" /><br /><br />
</p>
</div>
<div id="right">
<div id="rightright"><a href="http://www.facebook.com/pages/Mill-Creek-WA/Elegant-Clutter-Interiors-and-Gifts/116031796082?v=wall&ref=ts#!/pages/Mill-Creek-WA/Elegant-Clutter-Interiors-and-Gifts/116031796082?ajaxpipe=1&__a=4"><img src="img/fb.png" style="border-style: none" /></a></div>
</div>
<div class="clear"> </div>
<div id="footer">
©2010 Elegant Details Boutique
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
Code:
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0}
body{
background-image:url(img/bg1122.png);
background-repeat:no-repeat;
background-position:center 145px;
font-family:Arial, Helvetica, sans-serif;
padding-bottom:50px;
}
.clear{
clear:both}
h1{
height:100px;
width:500px;
position:absolute;
top:30px;
background-image:url(img/logo.png);
background-repeat:no-repeat;
text-indent:-9999px;
overflow:hidden;
}
#wrap{
width:1024px;
margin:0 auto;
background-color:#ede7d9;
padding-top:40px;
background-image:url(img/bg22.png);
height:101px;
}
#number
{
padding-left:400px;
margin-top:-65px;
color:#709ab9;
font-family:Arial, Helvetica, sans-serif;
font-weight:900;
}
#nav1
{
padding-left:400px;
padding-top:56px;
}
ul#list-nav {
list-style:none;
margin:20px;
width:600px
}
ul#list-nav li {
}
ul#list-nav li a {
text-decoration:none;
padding-right:10px;
padding-left:7px;
padding-bottom:7px;
padding-top:5px;
width:100px;
background-image:url(img/nav4.png);
background-repeat:no-repeat;
color:#eee;
float:left;
text-align:center;
font-weight:bold;
}
ul#list-nav li a:hover {
background-image:url(img/nav2.png);
}
#content{
padding:15px;
margin-left:0px;
}
#content #leftmap
{
font-size:14px;
width:650px;
float:right;
margin-top:15px;
}
#content #leftwords
{
width:250px;
margin-left:350px;
margin-top:-300px
}
#content #left{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:650px;
float:right;
margin-top:15px;
}
#content #right{
width:300px;
height:275px;
float:left;
color:#000;
text-align:center;
margin-top:35px;
padding-top:55px;
background-image:url(img/bgright.png);
}
#content #rightright
{
padding-top:207px;
border:hidden;
}
#content #right2{
padding:10px;
background-color:#cdbda7;
text-align:left;
}
#content #right h2{
padding:10px;
background-color:#3a2e20;
}
#fb
{
padding-left:75px
}
#fb2
{
padding-top:20px;
}
#footer
{
padding-left:400px;
padding-top:25px;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}
/* =Internet Explorer Fixes
----------------------------------------------------------------------*/
.hoverbox a
{
position: relative;
}
.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}
.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}
.hoverbox li
{
position: static;
}
Thanks! |
