IE 7 problem...

**dwees** · 07-16-2006, 03:53 PM

Hey there,

So I'm working on a website for someone, and before I start tossing the content in, I'm working on the style. I have a problem I'm not sure how to solve.

I started working the website, and got it looking great in IE5, IE5.5, IE7, Safari, Firefox, Opera, but not in IE6. I changed the document type, and now it looks great in 6, but when I shifted a div, an image on the page partially covered by the disappeared in IE7. I have no idea why every other browser doesn't have this problem (IE5 on the Mac is a complete mess, but who cares? If you are still using IE5 on a mac, you deserve this website to render improperly!).

My website is currently at: www.unitorganizer.com/dorothea

The CSS is:

Code:

body {
background-color: #dad9d3;
font-size: medium;
}

a.spoken_link, a.spoken_link:visited{
color: #888a8a; 
text-decoration: none;
padding-left: 0;
font-family: Century Gothic;
font-size: x-large;
font-weight: bold;
position: absolute;
top: 50%;
left: 29%;
z-index: 4;
}

a.spoken_link:hover {
color: #eeedea;
z-index: 4;
}

h1.title {
margin: 0px 0px 0px 0px;
background: transparent;
color: #888a8a; 
text-decoration: none;
padding-left: 0;
font-family: Century Gothic;
font-size: x-large;
font-weight: bold;
position: absolute;
left: 26%;
top: 40%;
z-index: 4;
}

img.photo {
position: absolute;
left: 49%;
top: 18%;
width: 31%;
height: 65%;
z-index: 1;
background-image: URL('http://www.unitorganizer.com/dorothea/images/dorothea_frontpage.jpg');
background-repeat: no-repeat;
}
a.enter_site,a.enter_site:visited {
margin: 0px 0px 0px 0px;
background: transparent;
color: #eeedea; 
text-decoration: none;
padding-left: 0;
font-family: Century Gothic;
font-size: x-large;
font-weight: bold;
position: absolute;
top: 73%;
left: 63%;
z-index: 4;
}
a.enter_site:hover {
color: #888a8a;
z-index: 4;
}

p.topbar {
margin: 0px 0px 0px 0px;
background: #888a8a;
font-family: Century Gothic;
color: #dad9d3;
height:11%;
width:60%;
position: absolute;
left: 20%;
top: 10%;
text-align: center;
z-index: 4;
border-style: solid solid solid solid;
border-width: 0px;
border-color: #000000 #000000 #C94237 #000000;
border-top-width: 7px;
border-bottom-width: 7px;
}

p.bottomtext {
margin: 0px 0px 0px 0px;
background: #888a8a;
font-family: Century Gothic;
color: #dad9d3;
/*font-size: 100%;*/
height:10%;
width:61%;
vertical-align:middle;
position: absolute;
left: 20%;
top: 78%;
text-align: center;
z-index: 4;
border-style: solid solid solid solid;
border-width: 7px;
/*border-color: #9ea3a3 #000000 #000000 #000000;red1=#BF1E11*/
border-color:  #C94237 #000000 #000000 #000000;
border-left-width: 0px;
}
div.left {
background-color: #dad9d3;
position: absolute;
left: 20%;
top: 20%;
height: 65%;
width: 30%;
z-index: 3;
border-style: solid;
border-width: 0px;
border-color: #dad9d3;
border-right-width: 0px;
}
div.left_bar {
background-color: #888a8a;
color: #888a8a;
position: absolute;
width: 4%;
height: 78%;
left: 17%;
top: 10%;
z-index: 2;
border-style: solid;
border-width: 7px;
border-right-width: 0px;
border-color: #000000 #858a7b #000000 #000000;
}
div.right_bar {
background-color: #888a8a;
color: #888a8a;
position: absolute;
width: 3%;
height: 78%;
left: 79%;
top: 10%;
z-index: 5;
border-style: solid;
border-width: 7px;
border-left-width: 0px;
border-color: #000000 #000000 #000000 #858a7b;
}

and the HTML is:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
</title>
</head>
<body>

</body>
</html>

<html>
<head>
<title>Dorothea's Website</title>
<link rel="stylesheet" type="text/css" href="frontpage.css" title="frontpage"/>
</head>
<body>
<img alt="Dorothea's picture" class="photo" src="http://www.unitorganizer.com/dorothea/images/dorothea_frontpage.jpg" height="380" width="285"/>
<p class="topbar">
I will use my skills power, & creativity as a writer, poet...
</p>
<div class="left">
</div>
<h1 class="title">
dorothea smartt
</h1>
<a class="spoken_link" href="My_Song.mp3" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">
spoken word
</a>
<img alt="Dorothea's picture" class="photo" src="http://www.unitorganizer.com/dorothea/images/dorothea_frontpage.jpg" height="380" width="285"/>
<a class="enter_site" href="http://unitorganizer.com/dorothea/pages" > 
ENTER 
</a>
<p class="bottomtext">
live artist and facilitator in order to empower people...
</p>
<div class="left_bar">
<p> te </p>
</div>
<div class="right_bar">
<p> te </p>
</div>
</body>
</html>

Thanks for your suggestions.

Dave

**dwees** · 07-16-2006, 03:57 PM

Hahaha, now that's funny.

Apparently IE7 is actually right on this one. If you look carefully near the top, you'll notice I have a bunch of extra <body> <html> <head> type tags. I took them out, and suddenly it works fine. I have no idea why the image is the only thing to have been effected by the errors, but whatever.

Dave

Thread: IE 7 problem...

Thread Tools

Search Thread

IE 7 problem...

Bookmarks

Bookmarks

Posting Permissions