dare87 Posted May 13, 2008 Share Posted May 13, 2008 I have this code but the includes/left.php lenght is longer then the auxiliary/date_post.php. This is causing the includes/bottom.php to split the content. <?php // Include the PHP script that contains the session information. include('includes/session.php'); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="Author" content=""> <meta name="KeyWords" content=""> <meta name="Description" content=""> <title>Ideas</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="includes/base.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="includes/include.js"></script> </head> <body> <div id="box"> <div id="header"> <?php include('includes/header.php'); ?> </div> <div id="main"> <div id="sideBarLeft"> <?php include('includes/left.php'); ?> </div> <div id="content"> <?php include('auxiliary/date_post.php'); ?> </div> <p style="clear: both;"> <div id="bottom"> <?php include('includes/bottom.php'); ?> </div></p> </div> </div> </body> </html> anyone know why? Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/ Share on other sites More sharing options...
dare87 Posted May 13, 2008 Author Share Posted May 13, 2008 Here is the css, again, I don't know if this is a css or php problem. #box{ position: relative; width: 979px; margin: 0 auto; } #box a:link { color: #000000; text-decoration: none; } #box a:visited { color: #000000; text-decoration: none; } #box a:hover { color: #000000; text-decoration: none; } #header{ position: absolute; width: 979px; height: auto; top: 0px; left: 0px; } #main { position: absolute; top: 220px; left: 0px; width: 979px; padding: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: url(../images/middle.jpg) repeat-y; padding-bottom: 15px; } #content { top: -35px; float: right; width: 630px; padding-bottom: 15px; padding-right: 118px; padding-left: 20px; } #content a:link { color: #000000; text-decoration: none; font-weight: bold; } #content a:visited { color: #000000; text-decoration: none; font-weight: bold; } #content a:hover { color: #000000; text-decoration: underline; font-weight: bold; } #sideBarLeft { position: relative; color: #FFFFFF; top: -15px; left: 85px; float: left; width: 125px; padding-bottom: 15px; } #sideBarLeft a { horizontal-align: left; width:94%; display: block; padding: 2px; } #sideBarLeft a:link { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; font-weight: normal; } #sideBarLeft a:visited { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; font-weight: normal; } #sideBarLeft a:hover { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: normal; text-decoration: none; } #bottom { clear: both; color: #000000; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; position: absolute; left: 0px; } #bottom a:link { color: #000000; text-decoration: none; } #bottom a:visited { color: #000000; text-decoration: none; } #bottom a:hover { color: #000000; text-decoration: underline; } #bottom ul { margin: 0; padding: 0; list-style: none; } #bottom li { display: inline; margin: 0; padding: 0; } Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539688 Share on other sites More sharing options...
bilis_money Posted May 13, 2008 Share Posted May 13, 2008 try to remove the <p> </p> Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539689 Share on other sites More sharing options...
dare87 Posted May 13, 2008 Author Share Posted May 13, 2008 tried that, it didn't work. and the <p style="clear: both;"> had to be there or FF2 looks funny. any other ideas? Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539691 Share on other sites More sharing options...
haku Posted May 13, 2008 Share Posted May 13, 2008 Try taking out this: <p style="clear: both;"></p> And add overflow: auto; to the CSS for the 'main' div. Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539700 Share on other sites More sharing options...
dare87 Posted May 13, 2008 Author Share Posted May 13, 2008 Changed it to the suggested and nothing changed. Still split by the bottom. Any other ideas... Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539701 Share on other sites More sharing options...
DyslexicDog Posted May 13, 2008 Share Posted May 13, 2008 you have an active link to the website? It's easy to look at this stuff with firebug. Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-539817 Share on other sites More sharing options...
dbrimlow Posted May 13, 2008 Share Posted May 13, 2008 Why are you using position:absolute and relative? Combined with floats, this is not the way to lay out a web page for cross-browser compatibility. Try removing position:absolute from the bottom and replace it with float:left. You can't clear floats just by using "clear:both" in the css. You need to use one of three techniques - 1. create a float to clear a float, 2. overflow:hidden method 3. the clearfix method At this point, most professionals use the clearfix method. If you don't know it and want to, I can explain it. Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-540181 Share on other sites More sharing options...
haku Posted May 14, 2008 Share Posted May 14, 2008 The clearfix method isn't necessary anymore. Just add overflow:auto to the containing element. See point 'D' in this article: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ I've used it since I found that article, and it seems to work with no problem. Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-540566 Share on other sites More sharing options...
dbrimlow Posted May 14, 2008 Share Posted May 14, 2008 Haku, the main problem with using the overflow (overflow:auto or overflow:hidden works equally) technique for clearing - particularly "overflow:auto" - is that you can get scrollbars on the cleared element. I no longer use fixed (pixel) dimensions, and this technique is particularly a nasty issue in IE6 because it doesn't support min-width. Most Pros still use a clearfix for cross-browser stability. Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-541101 Share on other sites More sharing options...
dare87 Posted May 14, 2008 Author Share Posted May 14, 2008 Thanks all for the ideas, but the error was caused by not closing a table. I had to look at the code for 2 hours before I caught it. Thanks How do you mark as solved? Quote Link to comment https://forums.phpfreaks.com/topic/105377-solved-css-or-php/#findComment-541130 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.