problem with positioning in IE

Forum Moderators: not2easy

Message Too Old, No Replies

problem with positioning in IE

zozzen

4:43 am on Sep 26, 2010 (gmt 0)

Hi, i'm making a css to display a caption right at the bottom of the photo.

it works in all browsers, except in IE 6. ( IE 7-8 works fine). I've changed the value of overflow and position but it doesn't seem to work. I'm seriously muddled into the code for a few days and wondering if any experts could help me....

Example:
to display part of [google.com...] within a box, and give it a caption...

here is my code:
<head>
<style>
#pic{
overflow: hidden;
background:none repeat scroll 0 0;
width: 200px;
height: 130px;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:5px;
}

#caption
{
font-size: 80%;
font-family: Verdana, Arial, sans-serif;
text-align: center;
background:lightblue repeat scroll 0 0;
position: absolute;
width:200px;
bottom:0px;
height:25px;
overflow:auto;
padding:2px;
}
</style>
</head>

<body>
<div id=pic>
<img src=http://www.google.com/images/logos/ps_logo2.png>
<div id=caption>testing</div>
</div>
</body>

Major_Payne

7:10 am on Sep 26, 2010 (gmt 0)

Try playing around with this. It's in HTML 5, but change if you need to:


<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Test</title>

<meta name="created" content="Sun, 26 Sep 2010 06:36:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">

<style>
#pic {
width: 366px;
height: 155px;
background: #add8e6 url(http://www.google.com/images/logos/ps_logo2.png) no-repeat top center scroll;;
margin: 0 auto;
margin-top:5px;
border: 1px solid #f00; 
}

h3 {
line-height: 1em;
font-size: 1.25em;
font-family: Verdana, Arial, sans-serif;
text-align: center;
padding-top: 32%;
}
</style> 

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
h3 {
font-size: 1em;
padding-top: 35.5%;
}
</style>
<![endif]-->
</head>
<body>
<div id="pic"><h3>TESTING</h3> </div>
</body></html>

Tweak IE's CSS as you see fit, too.

zozzen

8:46 am on Sep 26, 2010 (gmt 0)

Hurray Major_Payne!

I spent a lot of time to figure it out what's wrong with my code and you solved it within a minute. (*flushed*)

Payne, thanks so much!

Major_Payne

10:10 am on Sep 26, 2010 (gmt 0)

You're very welcome. I was hoping that was what you wanted.