Forum:

HTML Pages with CSS and JavaScript

Absolute Position in IE

Ranch Hand

Posts: 73

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have a small problem with absolute position in IE.
This CSS class works with all the browsers I have tested with except IE.
Browser Version:
IE 7.0.5730.13
FF 3.05
Safari 3.2.1
Crome 1.0.154.36

With IE, the class is rendered right below the last container not at the bottom of the parent container as I planned.

Thanks in advance for help.

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

IE seems to get very confused with "bottom". I've rarely gotten it to work correctly.

I haven't had an opportunity to evaluate IE8 yet, but here's hoping that they've finally gotten basic CSS implemented correctly.

Maybe Eric knows a trick or two...

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Can you give me a sample code to work off of. Basic layout that gives you the issue.

The code seems to work fine in IE8

. I will look at it in IE6 when I get back from shopping for the wife.

Eric

William Rouse

Ranch Hand

Posts: 73

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Below is the shell code with the CSS placed 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>

Bauke Scholtz

Ranch Hand

Posts: 2458

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by William Rouse:
.bodybody { style="font-size: 12px; }

Remove that doublequote.

William Rouse

Ranch Hand

Posts: 73

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you, the world seems a better place.

Bauke Scholtz

Ranch Hand

Posts: 2458

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You're welcome.

Consider Paul's rocket mass heater.