Forum Moderators: open
Basically i'm writing a lengthy article on my page, and attempting to end that article with a new paragraph that contains only a link back to the main page in it.
Internet Explorer says: Nope, not happening. The page ends without showing the link line. Other browsers have no issue with it.
A newbie HTMLer might say it looks like my page is "too long for the internet". True, the article is lengthy; but if I remove some of the paragraphs(the link line DOES show up if you remove enough of the article so that the page doesn't scroll), the link line STILL doesn't show up. Or, if I take the link paragraph, and place it in between two article paragraphs, it and all content further down shows up just fine. Un-freaking-believable! What could I be doing wrong?
I am laying the page out in CSS, but even if height declarations were an issue (I have already proven they are not), you'll see I have no such relevant declarations. The HTML and CSS validate for this page.
Help a brother out.
CSS:
#block2 {
position: absolute;
left: 270px;
top: 50px;
text-align: left;
width: 530px;
z-index: 2;
}
#logo2 {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 20px;
border: 1px solid #e7e7e7;
background-color: #fff;
}
#copy2 {
position: relative;
top: 30px;
left: 0;
text-align: left;
width: 500px;
}
HTML:
<div id="block2">
<div id="logo2"><img src="literature.gif" alt="" />
</div>
<div id="copy2">
<h1>The Title of the Article</h1>
<p>blahblahblah this goes on for about 10 paragraphs and the real article is not much more interesting</p>
<p><a href="#">Go back to the list</a></p>
</div>
</div>
the problem lies in your css.
try this, it works for me now.
#block2 {
margin:50px auto auto auto;
text-align: left;
width: 530px;
z-index: 2;
}
#logo2 {
margin:0;
width: 500px;
height: 20px;
border: 1px solid #e7e7e7;
background-color: #fff;
}
#copy2 {
margin:30px 0 0 0;
width: 500px;
}
also, I am using 4.01 strict dtd;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
should work with transitional as well
it's a combination of things..
the
position: relative; top: 30px;<a>Fixes:
1. either don't use relative positioning, and just use margin-top: 30px; to space the elements instead
or
2. give the <a> element layout by giving it a width or height (or zoom: 1; if you don't need IE5 support)
Suzy
