[SOLVED] css or php?

dare87 · 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?

dare87 · 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;
}

bilis_money · May 13, 2008

try to remove the <p> </p>

dare87 · 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?

haku · May 13, 2008

Try taking out this:

<p style="clear: both;"></p>

And add

overflow: auto;

to the CSS for the 'main' div.

dare87 · May 13, 2008

Changed it to the suggested and nothing changed. Still split by the bottom.

Any other ideas...

DyslexicDog · May 13, 2008

you have an active link to the website? It's easy to look at this stuff with firebug.

dbrimlow · 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.

haku · 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.

dbrimlow · 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.

dare87 · 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?

Sign In

[SOLVED] css or php?

Recommended Posts

dare87

Link to comment

Share on other sites

dare87

Link to comment

Share on other sites

bilis_money

Link to comment

Share on other sites

dare87

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

dare87

Link to comment

Share on other sites

DyslexicDog

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

dare87

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information