Absolute position problem with IE

Question

rouse 0 Junior Poster

15 Years Ago

I have a problem with absolute positioning in IE. This works in all other browsers. Here are the browsers that I tested this on:
Browser Version:
IE 7.0.5730.13
FF 3.05
Safari 3.2.1
Crome 1.0.154.36

The code works fine on all browsers but IE. On IE it hugs the last container, not at the bottom of the parent container.

.credits {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 15px;
left : 80px;
color: #000;
background-color: #FFFFFF;
}

Any help provided would be of value.
Thanks!

web-design

2 Contributors
3 Replies
98 Views
12 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by rouse

ccube921 2 Junior Poster in Training

15 Years Ago

Giving us the code might help

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rouse 0 Junior Poster · Answer 1 · 2008-12-24T06:29:22+00:00

Here is an example with the CSS combined in the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Absolute short test</title>
<style type="text/css">

@CHARSET "ISO-8859-1";
/********/
/* DEBUG */
/* All */
/*
*{
border: medium double rgb(250,0,255)
}
*/
/* Div and Paragraphs */
/*
div, p {
    border: 1px dotted black;
}
*/

/**************/
/* Containers */
/**************/
#wrapper {
        position: relative;
        margin: 0 auto;
        margin-top: 0px;
        padding: 0px;
        width: 800px;
        height: 900px;
        /*#ffffff is the bottom color in gradient*/
        background: #ffffff url(../images/fading_background_12.png) repeat-x;
        border-style: groove;
}
#branding {
    padding: 0;
    width: 800px;
    height:80px;
    clear: both;
    background-image: url(../images/fading_branding.png);
    border-bottom-style: groove;
}
#content{
position: relative;
    margin: 0 auto;
    margin-top: 1px;
    padding: 1px;
    width: 792px;
    height: 775px;
    /*border-style: grove; */
    /*#ffffff is the bottom color in gradient*/
    background: #ffffff url(../images/fading_background_12.png) repeat-x;
}
#leftMenuContent{
    position: relative;
    float:left;
    width:250px;
    padding:1px;
    margin:5px;
    height: 775px;
/*    border-right: thin RED; */
    /*#ffffff is the bottom color in gradient*/
    background: #ffffff url(../images/fading_background_12.png) repeat-x;

}
#rightContent {
    float:right;
    width: 495px;
    padding: 10px;
    margin: 5px;
    height: 775px;
    /*#ffffff is the bottom color in gradient*/
/*    background: #ffffff url(../images/fading_background_12.png) repeat-x; */
    border-left: thin solid #ff0000
}

#furi-logo-left-container{
    margin: 0 auto;
    margin-top: 1px;
    padding: 0px;
    width: 229px;
    height: 339px;
    border: 2px outset #FFFFFF;
}

@CHARSET "ISO-8859-1";
/* Menu Items */
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu a {
  display: block;
  width: 9em;
    height: 1.5em;
    font-family: verdana,helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
//    background-color: #cccc66;
    background-color: orange;
    text-align: center;
    color: #000;
  text-decoration: none;
    margin: 2px 0;
}
.menu a:link, .menu a:visited {
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
}
.menu a:hover {
  border-bottom: 1px solid #cecece;
  border-top: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-left: 2px solid #4a4a4a;
}
/* text styles */
.bodybody {
  style="font-size: 12px;
  margin-bottom: 9px;
  line-height: 16px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}
.li{
    margin-left: 3em;
}

/* credits */
.credits {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 15px;
left : 80px;
color: #000;
background-color: #FFFFFF;
}
a.credit {
    text-decoration: none;
    color: #222;
}
a.credit:hover{
    text-decoration: underline;
}



</style>
</head>
<body>

<div id='wrapper'>
<div id='branding'>
</div>
<div id='content'>
<div id='leftMenuContent'>
    <ul class="menu">
    <li><a href='index.html'>Home</a></li>
    <li><a href='whoarewe.html'>Who Are We</a></li>
    <li><a href='sponsors.html'>Sponsors</a></li>
    <li><a href='history.html'>History</a></li>
    <li><a href='#'>How to Help</a></li>
    <li><a href='projects.html'>Projects</a></li>
    <li><a href='contact.php'>Contact Us </a></li>
    <li><a href="slideShow.html">Images</a></li>
    <li><a href="">More Choice 01</a></li>
    <li><a href="">More Choice 02</a></li>
    <li><a href="">More Choice 03</a></li>
    </ul>
    <br />
    <div id='furi-logo-left-container'>

    </div>
   
    <div class='credits'>Should be near bottom of pagee<br />
    </div>
</div>
<div id='rightContent'>
<div class ='bodybody'>
FURI is an innovative 501-C- 3, not-for-profit
corporation, ...
<br /><br />

</div>
</div>
</div>
</div>
</body>
</html>

rouse 0 Junior Poster · Answer 2 · 2008-12-24T07:35:44+00:00

I made a typo in this class sith the style statement:
/* text styles */
.bodybody {
style="font-size: 12px;
margin-bottom: 9px;
line-height: 16px;
font-family: Verdana,Arial,Helvetica,sans-serif;
}