sorry to ask a question that has been asked before, but I tried searching and for some reason can't find a thread to answer my question.
I have a page, 1 image centered, 1 div to the right, and 1 div below the image.
The bottom div...I cannot for the life of me get to position correctly in IE. the page looks perfect in FF (yey!)
funny thing...I went to the msdn site, used the css1 tags that they said to use, and it still won't work as I want it to. (perhaps I did it wrong)
What I'm trying to do is to get the bottom div to extend all the way down to the page, no matter the resolution or size of the window. (800x600 vs. 1024x768 or whatever)
here's my code and css...can someone please point out what I need to do?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"contentpage.css" />
<title>NEAT Welcome Page</title>
</head>
<body>
<center><img src=http://www.webdeveloper.com/forum/archive/index.php/"neatlogo.gif" id="neatlogo" alt="The Official NEAT Logo" border="0" height="305px" width="172px" /></center>
<div id="quicklinks"><p>-This is where we can put "quicklinks" to certain pages within the site, that we think the visitor might like to see. (ie. upcoming events, meetings, conference #'s and their passcode, etc.)</p>
<p>-Alaska State Wide </p>
<p>-just another quicklink</p>
<p>-and another one</p>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"news-000000.htm" target="_self">-Archived news</a></p>
</div>
<div id="news"><p>-New Additions to the website, go check them out now!! The <a href=http://www.webdeveloper.com/forum/archive/index.php/"AlaskaSWAT.htm" target="_self">Alaska State Wide Administrative Team</a>, and the <a href="newmember.htm" target="_self">New Member</a> page, where potential new members are showcased and presented!</p>
<p>-<a href=http://www.webdeveloper.com/forum/archive/index.php/"news-000000.htm" target="_self">Archived news</a></p>
<p>-Some other good news!</p>
<p>-and more!</p>
<p>-still more!</p>
<p>-ok, I think this is good. </p>
</div>
</body>
</html>
and here's my css
body, html
{
background-image: url('ntc_back.gif');
background-attachment: fixed;
margin: 0px;
padding: 0px;
font: "Times New Roman", Times, serif;
font-size: 1em;
text-align: center;
width: 100%;
height: 100%;
}
a, p {
color: black;
font: "Times New Roman", Times, serif;
font-size: 1em;
}
ul, li {
color: black;
font: "Times New Roman", Times, serif;
font-size: 1em;
margin-left: .5em;
padding: 0em;
}
a:link {color: #0033CC} /* unvisited link */
a:visited {color: #0033CC} /* visited link */
a:hover {color: #000066} /* mouse over link */
a:active {color: #0033CC} /* selected link */
#neatlogo {
margin-top: 5px;
width: 172px;
height: 305px;
}
#news {
text-align: left;
overflow: auto;
position: absolute;
padding: 0px;
top: 315px;
right: 10%;
bottom: 5px;
left: 10%;
width: auto;
height: auto;
border-width: 1px;
border-color:#0099FF;
border-style: dashed;
}
#quicklinks {
position: absolute;
right: 5px;
top: 5px;
overflow: auto;
width: 170px;
height: 295px;
margin: 0px;
padding: 0px;
text-align: left;
}
ps...I know the css looks wishy washy....I've been tweaking the settings over and over again trying to figure out a good combo for IE, after I get it working...I'll convert everything to em's etc.If the problem you're having is that your news div doesn't stretch to the bottom of the page in IE, that's because it isn't supposed to. When you put the bottom:5px; in your code what that really means is to place the bottom of the division 5px up from the bottom of the page, or rather the end of the content. The CSS only applies to the content, not to the size of the window.I'm confused, as <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> says:
This example sets the bottom edge of the paragraph to 20 px above the bottom edge of the window:
p
{
position: absolute;
bottom: 20px
}
Are you saying it only effects the contents of the div? not the element it's applied to, in this case the div? Which seems to be what FF seems to be doing. if I set bottom: 10px, it sets the bottom of the div 10px up from the bottom of the window....but IE doesn't seem to be applying this rule.
If this is the wrong way, how else would you position a container, like "div"?Your example is correct , except in IE, if you want the element to sit near the bottom you must define height auto will not work.Originally posted by rpassmore
Are you saying it only effects the contents of the div?
What I was saying is that if there is only 300px worth of content down the page, then placing something with bottom:0px; will place the bottom of the element 300px down the page rather than at the bottom of the window. The same thing happens with setting something's height equal to 100%.
For example, let's say that we had a picture on the left side of the page that was 200px tall, and that's the only thing in the code right now. Now let's say that we add a division and set it's bottom position to 0px. Rather than being at the bottom of the page, the bottom of the new element will be 200px from the top of the page, or aligned with the bottom of the image.ahh I see what you were saying. heh
soo...there's no way to get IE to allow me to have the div stretch down there eh? bugger.
I'm curious...why does this work with mozilla, but not IE? is this a non-compliance thing? or is it not supposed to work this way?Actually, I'm not sure that I know what I'm talking about anymore. I was almost completely sure that what I was saying was true, however after going and testing it it seems to no longer be true. Maybe they updated the CSS complience in IE, or maybe I just got this problem mixed up with something else.
I know I remember someone saying something a long time ago about the CSS height:100%, but I don't remember where. It's going to be a pain to dig that back up...
However, your problem seems to be caused by the fact that you are giving both a top and bottom positioning, and IE dislikes that. Sorry for confusing you.
I have a page, 1 image centered, 1 div to the right, and 1 div below the image.
The bottom div...I cannot for the life of me get to position correctly in IE. the page looks perfect in FF (yey!)
funny thing...I went to the msdn site, used the css1 tags that they said to use, and it still won't work as I want it to. (perhaps I did it wrong)
What I'm trying to do is to get the bottom div to extend all the way down to the page, no matter the resolution or size of the window. (800x600 vs. 1024x768 or whatever)
here's my code and css...can someone please point out what I need to do?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"contentpage.css" />
<title>NEAT Welcome Page</title>
</head>
<body>
<center><img src=http://www.webdeveloper.com/forum/archive/index.php/"neatlogo.gif" id="neatlogo" alt="The Official NEAT Logo" border="0" height="305px" width="172px" /></center>
<div id="quicklinks"><p>-This is where we can put "quicklinks" to certain pages within the site, that we think the visitor might like to see. (ie. upcoming events, meetings, conference #'s and their passcode, etc.)</p>
<p>-Alaska State Wide </p>
<p>-just another quicklink</p>
<p>-and another one</p>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"news-000000.htm" target="_self">-Archived news</a></p>
</div>
<div id="news"><p>-New Additions to the website, go check them out now!! The <a href=http://www.webdeveloper.com/forum/archive/index.php/"AlaskaSWAT.htm" target="_self">Alaska State Wide Administrative Team</a>, and the <a href="newmember.htm" target="_self">New Member</a> page, where potential new members are showcased and presented!</p>
<p>-<a href=http://www.webdeveloper.com/forum/archive/index.php/"news-000000.htm" target="_self">Archived news</a></p>
<p>-Some other good news!</p>
<p>-and more!</p>
<p>-still more!</p>
<p>-ok, I think this is good. </p>
</div>
</body>
</html>
and here's my css
body, html
{
background-image: url('ntc_back.gif');
background-attachment: fixed;
margin: 0px;
padding: 0px;
font: "Times New Roman", Times, serif;
font-size: 1em;
text-align: center;
width: 100%;
height: 100%;
}
a, p {
color: black;
font: "Times New Roman", Times, serif;
font-size: 1em;
}
ul, li {
color: black;
font: "Times New Roman", Times, serif;
font-size: 1em;
margin-left: .5em;
padding: 0em;
}
a:link {color: #0033CC} /* unvisited link */
a:visited {color: #0033CC} /* visited link */
a:hover {color: #000066} /* mouse over link */
a:active {color: #0033CC} /* selected link */
#neatlogo {
margin-top: 5px;
width: 172px;
height: 305px;
}
#news {
text-align: left;
overflow: auto;
position: absolute;
padding: 0px;
top: 315px;
right: 10%;
bottom: 5px;
left: 10%;
width: auto;
height: auto;
border-width: 1px;
border-color:#0099FF;
border-style: dashed;
}
#quicklinks {
position: absolute;
right: 5px;
top: 5px;
overflow: auto;
width: 170px;
height: 295px;
margin: 0px;
padding: 0px;
text-align: left;
}
ps...I know the css looks wishy washy....I've been tweaking the settings over and over again trying to figure out a good combo for IE, after I get it working...I'll convert everything to em's etc.If the problem you're having is that your news div doesn't stretch to the bottom of the page in IE, that's because it isn't supposed to. When you put the bottom:5px; in your code what that really means is to place the bottom of the division 5px up from the bottom of the page, or rather the end of the content. The CSS only applies to the content, not to the size of the window.I'm confused, as <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> says:
This example sets the bottom edge of the paragraph to 20 px above the bottom edge of the window:
p
{
position: absolute;
bottom: 20px
}
Are you saying it only effects the contents of the div? not the element it's applied to, in this case the div? Which seems to be what FF seems to be doing. if I set bottom: 10px, it sets the bottom of the div 10px up from the bottom of the window....but IE doesn't seem to be applying this rule.
If this is the wrong way, how else would you position a container, like "div"?Your example is correct , except in IE, if you want the element to sit near the bottom you must define height auto will not work.Originally posted by rpassmore
Are you saying it only effects the contents of the div?
What I was saying is that if there is only 300px worth of content down the page, then placing something with bottom:0px; will place the bottom of the element 300px down the page rather than at the bottom of the window. The same thing happens with setting something's height equal to 100%.
For example, let's say that we had a picture on the left side of the page that was 200px tall, and that's the only thing in the code right now. Now let's say that we add a division and set it's bottom position to 0px. Rather than being at the bottom of the page, the bottom of the new element will be 200px from the top of the page, or aligned with the bottom of the image.ahh I see what you were saying. heh
soo...there's no way to get IE to allow me to have the div stretch down there eh? bugger.
I'm curious...why does this work with mozilla, but not IE? is this a non-compliance thing? or is it not supposed to work this way?Actually, I'm not sure that I know what I'm talking about anymore. I was almost completely sure that what I was saying was true, however after going and testing it it seems to no longer be true. Maybe they updated the CSS complience in IE, or maybe I just got this problem mixed up with something else.
I know I remember someone saying something a long time ago about the CSS height:100%, but I don't remember where. It's going to be a pain to dig that back up...
However, your problem seems to be caused by the fact that you are giving both a top and bottom positioning, and IE dislikes that. Sorry for confusing you.