IE and Opera Position Problems

Joseph Witchard

12-08-2009, 01:56 AM

<html>
<head>
<title>TESTING</title>
<style type="text/css">
body { color: #FFFFFF; font-size: 8pt; }

#houses { width: 150px; height: 400px; text-align: center; }

#g { width: 75px; height: 100px; float: left; background-image: url(gryffindorcopy.jpg); }

#h { width: 75px; height: 100px; float: right; background-image: url(hufflepuffcopy.jpg); }

#r { width: 75px; height: 100px; float: left; background-image: url(ravenclawcopy.jpg); }

#s { width: 75px; height: 100px; float: right; background-image: url(slytherincopy.jpg); }

p.houseText { position: relative; top: 71px; }


</style>
</head>
<body>
<div id="houses">
<div id="g">
<p class="houseText">100</p>
</div>
<div id="h">
<p class="houseText">100</p>
</div>
<br/>
<div id="r">
<p class="houseText">100</p>
</div>
<div id="s">
<p class="houseText">100</p>
</div>
</div>
</body>
</html>

The background images are 75x100 pixels, as are their container divs. In Firefox and Chrome, the text is right below the hourglass, like I want it to be. In Opera and IE8, however, the text is positioned a little bit on top of the hourglasses. I don't know what to do about Opera, but I would have thought that the conditional comments would have fixed Internet Explorer. Maybe because it's IE 64 bit? I don't know.

Does anyone have any ideas?

Excavator

12-08-2009, 02:05 AM

Hello Joseph Witchard,
Just a quick glance at your code and I'll bet IE would render a lot differently if you had a DocType Declaration.
Check the link about DocTypes in my sig below.

...

Excavator

12-08-2009, 02:24 AM

I'm not sure what you want it to look like... but try this - <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING</title>
<style type="text/css">
body {
background: #fc6;
font-size: 8pt;
}
#houses {
width: 150px;
height: 400px;
margin: 50px auto; /*just for presentation*/
background: #ccc;
text-align: center;
}
#g, #h, #r, #s {
width: 75px;
height: 100px;
float: left;
}
#g{background: #ccc url(gryffindorcopy.jpg); }
#h{background: #f00 url(hufflepuffcopy.jpg); }
#r{background: #00f url(ravenclawcopy.jpg); }
#s{background: #ff0 url(slytherincopy.jpg); }
p.houseText {
position: relative;
top: 71px;
}
</style>
</head>
<body>
<div id="houses">
<div id="g">
<p class="houseText">G100</p>
</div>
<div id="h">
<p class="houseText">H100</p>
</div>
<div id="r">
<p class="houseText">P100</p>
</div>
<div id="s">
<p class="houseText">S100</p>
</div>
</div>
</body>
</html>

That is going to put your p.housetext on top of the images, which may be what your wanting (not a clue what your hourglasses look like). If not, here is a demo of mine that shows one method of doing captions - image captions made easy (http://nopeople.com/CSS/image%20captions/index.html)

Joseph Witchard

12-08-2009, 03:08 AM

I already have in mind what I want it to look like. Thanks:) I always have a doctype declaration in the pages I publish to the web, but I never do for test pages, because I only keep them on my server while I'm testing. Won't do that anymore:)