Page 1 of 1
nasty little "content pushed to the bottom of the page" problem in IE again.
Posted: Tue Jul 10, 2007 3:08 pm
by johnbmcdonald
Hi All,
Several times I've run into issues where Firefox will render the page just fine and IE will push the content down below the fold. I searched through the forum here, and found several pieces of advice. Most dealing with reducing the size of tables and elements.
I've been tweaking those things to no avail. here is the site:
http://www.dogsiteballyhoo.com ( don't mind the name.. its just a temporary domain..)
Does this problem have to do with mixing traditional HTML tables and stylesheets? Just wondering if I go to the trouble to convert that whole table based design to pure CSS if that problem would go away.
Any ideas?
Thanks Guys
John
Re: nasty little "content pushed to the bottom of the page" problem in IE again.
Posted: Tue Jul 10, 2007 3:14 pm
by harleyquinn
Hi John,
I took a quick peek at your code and I saw that you have an extra tag in your code. Delete it and see if that fixes your issue.
HQ
Re: nasty little "content pushed to the bottom of the page" problem in IE again
Posted: Tue Jul 10, 2007 4:32 pm
by johnbmcdonald
That was a good catch, Thanks!
Unfortunately that didn't do the job.
Something else I noticed. its not that the content is being pushed down, It appears that the first few lines are actually missing when you view in IE:
Home
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisl est, commodo sit amet, adipiscing ut, mattis et, neque. Morbi blandit, ligula ut convallis venenatis, leo orci lobortis lectus, at facilisis sem orci at nisi. Ut posuere sagittis nunc. Morbi nunc risus, volutpat eu, consectetuer vel, vehicula bibendum, nibh. Curabitur felis eros, aliquet at, pellentesque ac, ullamcorper at, nibh. Praesent semper odio a orci. Quisque laoreet neque ut nisl. Integer consectetuer commodo lorem. Nulla sagittis, massa vitae ullamcorper condimentum, risus urna fermentum urna, eu eleifend velit justo id ipsum. Curabitur in est. Sed tortor. Ut condimentum arcu ut libero. Phasellus interdum, ligula ac gravida accumsan, odio diam pellentesque quam, non cursus odio orci non magna. Morbi eget ligula. Nunc placerat, nulla in
Weird.
Re: nasty little "content pushed to the bottom of the page" problem in IE again.
Posted: Tue Jul 10, 2007 4:54 pm
by harleyquinn
I'm on a Mac and when I looked at your site in Safari the content is stuck at the very top of your page ontop of your header and navbar with the first few lines being cut off, but when I look at your site in Firefox the content first appears at the very top of your page but then jumps to where you expect it to be. It's most likely a css problem. I noticed you have 2 div#content css styles in your stylesheet and they may be conflicting with each other. Try consolidating and see if that fixes your problem.
HQ
Re: nasty little "content pushed to the bottom of the page" problem in IE again
Posted: Tue Jul 10, 2007 5:25 pm
by johnbmcdonald
Hmm. I gave that a shot. I started by removing the secondary content element. I saw no difference. after much tweaking, I went so far as to remove all style sheets associated with the template. and the problem remains.
I've got all the stylesheets unhooked right now.
I am not positive, but I think that eliminates the stylesheets from the equation (Unless I have some inline style or something in the template.) I'll go investigate that now.
Thanks for your suggestions.
John
Re: nasty little "content pushed to the bottom of the page" problem in IE again.
Posted: Tue Jul 10, 2007 6:39 pm
by harleyquinn
I definitely think the problem is due to your table based layout. I think you might need to start from scratch to clean up some of your code. I threw this together real quick to help you get started.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#content{padding:10px}
</style>
<head>
<title>test.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
</__body bgcolor="#990066">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="84" colspan="3" bgcolor="#CC6699"><img src="images/header-1.jpg" alt="image" width="800" height="84" /></td>
</tr>
<tr>
<td height="50" colspan="3" bgcolor="#FFFFFF">navigation</td>
</tr>
<tr>
<td height="30" colspan="3" bgcolor="#FFFFFF">search</td>
</tr>
<tr>
<td height="32" colspan="3" bgcolor="#FFFFFF"><img src="images/header-3.jpg" alt="image" width="799" height="32" /></td>
</tr>
<tr>
<td width="172" bgcolor="#CC6699">left</td>
<td width="369"><div id="content"><h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisl est, commodo sit amet, adipiscing ut, mattis et, neque. Morbi blandit, ligula ut convallis venenatis, leo orci lobortis lectus, at facilisis sem orci at nisi. Ut posuere sagittis nunc. Morbi nunc risus, volutpat eu, consectetuer vel, vehicula bibendum, nibh. Curabitur felis eros, aliquet at, pellentesque ac, ullamcorper at, nibh. Praesent semper odio a orci. Quisque laoreet neque ut nisl. Integer consectetuer commodo lorem. Nulla sagittis, massa vitae ullamcorper condimentum, risus urna fermentum urna, eu eleifend velit justo id ipsum. Curabitur in est. Sed tortor. Ut condimentum arcu ut libero. Phasellus interdum, ligula ac gravida accumsan, odio diam pellentesque quam, non cursus odio orci non magna. Morbi eget ligula. Nunc placerat, nulla in viverra fermentum, tellus sapien mollis neque, quis pharetra leo metus sit amet mi. Donec tortor.</p>
<p>Donec nisi massa, pharetra quis, eleifend a, auctor sit amet, mi. Vivamus rutrum lectus. Nulla facilisi. Donec nulla turpis, fermentum sed, volutpat eget, sodales eu, massa. Maecenas cursus ligula eget felis. Proin in lorem. Vivamus pellentesque orci ut magna. Pellentesque augue. Nullam vel sem. Aenean velit nulla, feugiat nec, faucibus sit amet, suscipit non, erat. Nam libero est, malesuada sit amet, interdum sit amet, bibendum sed, velit. Aenean viverra mi nec ipsum. Quisque nisi nibh, tempor ut, aliquet vel, pulvinar vel, urna. Nulla purus quam, iaculis ac, fermentum at, sollicitudin a, neque. Praesent leo arcu, porttitor ut, varius elementum, dapibus eu, augue. In aliquam.</p>
<p>Ut faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tortor libero, faucibus aliquet, porta ut, mollis nec, nibh. Curabitur arcu. Suspendisse potenti. Vestibulum pede. Curabitur rhoncus leo eget magna. In hac habitasse platea dictumst. Ut ullamcorper. Mauris elit arcu, aliquam eu, pretium eget, porta vel, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tempor ullamcorper tortor. Nulla neque. Integer condimentum rhoncus diam. Mauris a velit quis orci rutrum egestas. Vivamus vel odio. Aenean dictum lorem a leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div></td>
<td width="153" bgcolor="#CC6699">right</td>
</tr>
<tr>
<td height="50" colspan="3">footer</td>
</tr>
</table>
<__body>
</__html>
Hope this helps a bit. I've been there myself too many times obsessing over why something doesn't work. Good luck!
HQ
Re: nasty little "content pushed to the bottom of the page" problem in IE again
Posted: Tue Jul 10, 2007 6:45 pm
by Dr.CSS
Personally I would change it to a div layout and eliminate some of the problems... Table based layouts are hard for the disabled to view/read, do your self a favor and learn the div layout...
Then install the developer toolbars for Firefox and IE (IE toolbar works on 6 and 7) they can give you a lot better picture of what is going on with your divs/tables by outlining them, ie toolbar has the css displayed on the right when you click the item in the left pane, Firefox toolbar lets you edit the CSS on the fly w/o messing with original, then if you like it just hilite copy/paste into original...
Re: nasty little "content pushed to the bottom of the page" problem in IE again.
Posted: Tue Jul 10, 2007 7:11 pm
by harleyquinn
It's me again...
just wanted to say I agree with Mark -- a CSS based layout is the way to go. You'll have way more control over your page layout, and the Firefox developers toolbar has some great features to help you troubleshoot any problems you might have with your layout.
HQ
Re: nasty little "content pushed to the bottom of the page" problem in IE again
Posted: Sat Jul 14, 2007 5:36 pm
by johnbmcdonald
Thanks Guys,
You were a great help. I went with the CSS based layout. and it's working beautifully.
http://dogsiteballyhoo.com (that's just a temp domain..)
Thanks Again!
I appreciate all your help!
John
Re: nasty little "content pushed to the bottom of the page" problem in IE again
Posted: Mon Jul 16, 2007 3:37 am
by Dr.CSS
Might want to check it for validation, 24 warnings and you left one at the bottom...
One of the features of div/CSS driven sites is having all the styling in a separate sheet so your html only has div calls and content in it no style calls in the html source, but it looks like it works better...