[SOLVED] Why is my div being stupid?

[FridayRain]

http://www.fridayrain.com

 

Using Firefox, if you click the feedback link, you'll see where that div is supposed to appear. For me, it displays correctly in both Firefox 2 and IE6 offline, and it displays correctly in IE6 from the domain, but it goes to the bottom with Firefox.

 

I have no idea what's causing it. I've spent over an hour tweaking files and the CSS. Nothing moves it. Sometimes when I overwrite a file and refresh the page on the domain, it'll display correctly. Once I refresh yet again, it goes back to the bottom.

 

Please don't criticize my code. I'm still cleaning it up. Just need any ideas as to why my div is sinking instead of bobbing to the right.

[moberemk]

Try taking out the display: table; from your code-see if that helps.

[FridayRain]

That messed it up quite a bit. I just don't get why it's fine offline, but on the web server just this one little thing is messed up.

[~n[EO]n~]

When i see it is fine, no problem in it i am using FF 2.0.0.7

 

 

But this text FridayRain Feedback is touching the top border of the curved rectange

 

[FridayRain]

n~ link=topic=163293.msg716027#msg716027 date=1192294445]

When i see it is fine, no problem in it i am using FF 2.0.0.7

 

 

But this text FridayRain Feedback is touching the top border of the curved rectange

 

 

Can you post a pic of it? It's supposed to be close, but not actually touching any edges.

 

This is what I'm seeing with Firefox 2.0.0.7, but only when I view it from my webhost. Looks fine offline.

 

 

[FridayRain]

I've also noticed that sometimes the donation div sinks randomly, even on the feedback page. Something in my CSS must be weak or flaky. I don't know what it is though.

 

Awhile ago I put up a test page on the web space and loaded it from work. The donation div was at the bottom instead of in the upper right on all subpages, but with a refresh it would move into the correct position.

 

I'm completely at a loss though.

[bronzemonkey]

I haven't really look for the problem because it was laborious trying to decipher why/how you've structured and labelled your xhtml/css the way you have.

 

Check for common errors - that the total width of the child elements exceeds that of the parent element, and failing to clear floats properly. Your widespread and pointless use of {width:100%; height:100%} is probably a factor too...perhaps you mean "auto".

[FridayRain]

I'm a little unclear about clearing floats. Do you put a clear property only on elements that follow floated elements, or do you put a clear property on floated elements as well?

[moberemk]

You know how floats hover over other elements? A cleared element just gets pushed down so that the float can't be over it.

[FridayRain]

What's wrong with using width/height: 100%? I was under the impression that IE6 doesn't do well with auto.

[bronzemonkey]

http://www.w3schools.com/css/default.asp

[FridayRain]

http://www.fridayrain.com/FRCUP

(CSS cleaned up a bit as well)

 

I don't think it's a CSS issue. I've tweaked the CSS for days now, and nothing has fixed it. What's more interesting is that it looks okay on my work computer, but it displays incorrectly on both my home computer and my girlfriend's laptop. All machines are running Firefox 2.0.0.8, and .7 before the recent update. It appears to display correctly in all instances of IE6.

 

I do know that 1&1 uses a version of PHP older than what I have on my computer. I was convinced it was CSS, but after some experimenting with the blog entry area, it seems to be an issue with the PHP/MySQL queries.

 

I stripped the blog entry code (entries.php) of PHP, leaving just the entry text and CSS formatting, and the feedback div displayed correctly. It's when I re-insert the PHP and database queries that something pushes the feedback div to the bottom. I also tried stripping different portions of the PHP/MySQL and it still displayed incorrectly, so as of right now it seems like it's all or nothing.

 

Has anyone run into something like this before?

[FridayRain]

Anything? I'll post entries.php when I get home.

[FridayRain]

http://www.fridayrain.com/FRCUP (test page)

 

I'm not a PHP expert, so I don't know if PHP can function properly but still have maybe minor errors. The culprit is probably some fusion of CSS and PHP that doesn't sit well. I dunno.

 

<?php
require("db/config.php");
require("db/opendb.php");

$table = 'blog';
$limit = 2;
$page = $_GET['page'];

$totalrows = mysql_num_rows(mysql_query("SELECT id FROM $table ORDER BY date DESC"));

    if(isset($_GET['page'])) {
        $page = $_GET['page'];
    } else {
        $page = 1;
    }

    $start = ($page-1)*$limit;
    $start = round($start,0);
    $result = mysql_query("SELECT * FROM $table ORDER BY date DESC LIMIT $start, $limit");
    
    while ($r = mysql_fetch_array($result)){
        echo "<div class=\"picture\">";
            echo "<div class=\"umbrella\">";

            echo "<h2>$r[title]</h2>";

                echo "<div class=\"datetimeposted\">";

                    echo "<p class=\"blogdate\">";
                    echo date('F d, Y', strtotime($r[date]));
                    echo "</p>";

                echo "</div>";

        echo "</div>";

	echo "<div class=\"blogentry\">";

            echo nl2br("<p>$r[text]</p><br /><br />");
            
            echo "<div class=\"bloglinks\">";
            
			include("authconfig.php");
			$cookuser = $_COOKIE["cookuser"];
			$cookpass = $_COOKIE["cookpass"];
			$adminpass = md5($adminpass);
			if($cookuser && $cookpass) {
	            if(($cookuser == $adminuser) && ($cookpass == $adminpass)){
                        echo "<span class=\"editblog\">";
                        echo "<a href=\"edit.php?type=0&piece={$r[id]}\">edit</a>";
                        echo "</span>";
                    }
                }

	echo "<span class=\"post\">by Greg at ";
                echo "<span class=\"blogtime\">";
                echo date('g:ia', strtotime($r[date]));
                echo " EST</span></span>";

            echo "</div>";
            
        echo "</div>";
        		
    echo "</div>";
    };

    $totalpages = $totalrows / $limit;
$totalpages = ceil($totalpages);

    if($page == 1){
        $actualpage = "[<span class=\"curpage\">1 of</span> <span class=\"totpage\">$totalpages</span>]";
} else {
        $actualpage = "[<span class=\"curpage\">$page of</span> <span class=\"totpage\">$totalpages</span>]";
}

    if($page < $totalpages){
        $nv = $page+1;
        $pv = $page-1;
        $olderpage = "<a href=\"?page=$nv\">older</a>";
        $prevpage = "<a href=\"?page=$pv\">prev</a>";
        $firstpage = "<a href=\"?page=1\">[first]</a>";
        $finalpage = "<a href=\"?page=$totalpages\">[oldest]</a>";
    }

    if($page == '1'){
        $nv = $page+1;
        $olderpage = "<a href=\"?page=$nv\">older</a>";
        $prevpage = "prev";
        $firstpage = "[first]";
        $finalpage = "<a href=\"?page=$totalpages\">[oldest]</a>";
        
    } elseif ($page == $totalpages){
        $pv = $page-1;
        $olderpage = "older";
        $prevpage = "<a href=\"?page=$pv\">prev</a>";
        $firstpage = "<a href=\"?page=1\">[first]</a>";
        $finalpage = "[oldest]";
    }

    if($totalpages == '1' || $totalpages == '0'){
        $olderpage = "older";
        $prevpage = "prev";
        $firstpage = "[first]";
        $finalpage = "[oldest]";
}

echo "<div class=\"pagelinks\"><p><span class=\"pages\">$actualpage</span> $firstpage $prevpage $olderpage $finalpage </p></div>";

?>

[bronzemonkey]

You should have sorted this out before you started implementing php.

 

Now that you are having problems you need to isolate the cause rather than guessing or adding further mess...so how about hosting a static version (remove all the php) of the problem-page to see if the problem is still there.

[FridayRain]

Did you read anything I posted recently? I did all that. I stripped all the PHP and the divs display correctly. I haven't added anything for about a week.

 

Forgive me for thinking it would look correct on the website since it looked fine offline.

[bronzemonkey]

Well whatever you linked to still does not display correctly when I view it. Good luck

[FridayRain]

Well whatever you linked to still does not display correctly when I view it. Good luck

 

...that's why I'm still asking for help. Too early for you?

[bronzemonkey]

...that's why I'm still asking for help. Too early for you?

 

Well if it doesn't display properly when you've removed the php then it is a css issue! You're not getting any help because you are giving people every reason not to help you. People here try and help others free of charge, on their own time, and don't really bother with irritable people treating them like idiots. Clear enough for you?

[FridayRain]

Well if it doesn't display properly when you've removed the php then it is a css issue! You're not getting any help because you are giving people every reason not to help you. People here try and help others free of charge, on their own time, and don't really bother with irritable people treating them like idiots. Clear enough for you?

 

What's clear is that you need to either improve your reading comprehension or don't bother trying to help. I've repeated myself to you multiple times. I highly appreciate what help this forum has given me. It's been invaluable.

 

Read this very carefully:

When I remove the PHP, the page displays properly.

[FridayRain]

I'll assist you in going back to page 1 and catching up on something you missed that would've been good to know before you tried to help but didn't succeed. I thank you for coming and responding, but you seem to have glossed over my newer posts.

 

http://www.phpfreaks.com/forums/index.php/topic,163293.msg723615.html#msg723615

 

I stripped the blog entry code (entries.php) of PHP, leaving just the entry text and CSS formatting, and the feedback div displayed correctly. It's when I re-insert the PHP and database queries that something pushes the feedback div to the bottom. I also tried stripping different portions of the PHP/MySQL and it still displayed incorrectly, so as of right now it seems like it's all or nothing.

 

Has anyone run into something like this before?

[FridayRain]

And here's entries.php since it's on the previous page now.

 

<?php
require("db/config.php");
require("db/opendb.php");

$table = 'blog';
$limit = 2;
$page = $_GET['page'];

$totalrows = mysql_num_rows(mysql_query("SELECT id FROM $table ORDER BY date DESC"));

    if(isset($_GET['page'])) {
        $page = $_GET['page'];
    } else {
        $page = 1;
    }

    $start = ($page-1)*$limit;
    $start = round($start,0);
    $result = mysql_query("SELECT * FROM $table ORDER BY date DESC LIMIT $start, $limit");
    
    while ($r = mysql_fetch_array($result)){
        echo "<div class=\"picture\">";
            echo "<div class=\"umbrella\">";

            echo "<h2>$r[title]</h2>";

                echo "<div class=\"datetimeposted\">";

                    echo "<p class=\"blogdate\">";
                    echo date('F d, Y', strtotime($r[date]));
                    echo "</p>";

                echo "</div>";

        echo "</div>";

	echo "<div class=\"blogentry\">";

            echo nl2br("<p>$r[text]</p><br /><br />");
            
            echo "<div class=\"bloglinks\">";
            
			include("authconfig.php");
			$cookuser = $_COOKIE["cookuser"];
			$cookpass = $_COOKIE["cookpass"];
			$adminpass = md5($adminpass);
			if($cookuser && $cookpass) {
	            if(($cookuser == $adminuser) && ($cookpass == $adminpass)){
                        echo "<span class=\"editblog\">";
                        echo "<a href=\"edit.php?type=0&piece={$r[id]}\">edit</a>";
                        echo "</span>";
                    }
                }

	echo "<span class=\"post\">by Greg at ";
                echo "<span class=\"blogtime\">";
                echo date('g:ia', strtotime($r[date]));
                echo " EST</span></span>";

            echo "</div>";
            
        echo "</div>";
        		
    echo "</div>";
    };

    $totalpages = $totalrows / $limit;
$totalpages = ceil($totalpages);

    if($page == 1){
        $actualpage = "[<span class=\"curpage\">1 of</span> <span class=\"totpage\">$totalpages</span>]";
} else {
        $actualpage = "[<span class=\"curpage\">$page of</span> <span class=\"totpage\">$totalpages</span>]";
}

    if($page < $totalpages){
        $nv = $page+1;
        $pv = $page-1;
        $olderpage = "<a href=\"?page=$nv\">older</a>";
        $prevpage = "<a href=\"?page=$pv\">prev</a>";
        $firstpage = "<a href=\"?page=1\">[first]</a>";
        $finalpage = "<a href=\"?page=$totalpages\">[oldest]</a>";
    }

    if($page == '1'){
        $nv = $page+1;
        $olderpage = "<a href=\"?page=$nv\">older</a>";
        $prevpage = "prev";
        $firstpage = "[first]";
        $finalpage = "<a href=\"?page=$totalpages\">[oldest]</a>";
        
    } elseif ($page == $totalpages){
        $pv = $page-1;
        $olderpage = "older";
        $prevpage = "<a href=\"?page=$pv\">prev</a>";
        $firstpage = "<a href=\"?page=1\">[first]</a>";
        $finalpage = "[oldest]";
    }

    if($totalpages == '1' || $totalpages == '0'){
        $olderpage = "older";
        $prevpage = "prev";
        $firstpage = "[first]";
        $finalpage = "[oldest]";
}

echo "<div class=\"pagelinks\"><p><span class=\"pages\">$actualpage</span> $firstpage $prevpage $olderpage $finalpage </p></div>";

?>

[dbrimlow]

Although you may think you are providing enough information to allow us to help you debug this, you haven't. And that's why bronzemonkey has been trying to get to the bottom of this (with a hell of a lot of patience, I might add).

 

But on the face of it, your whole problem stems from your DOCTYPE. XHTML 1.1 is an extremely precise DTD with no room for error and is SPECIFICALLY NOT to be served as text/html - which you are doing.

 

You are also using mime type -  content="application/xhtml+xml;charset=iso-8859-1". But you are serving the page as text/html. This causes a conflict with user agents and forces them to assume a default mime type of utf-8 and creates conflict with the characters in your code.

 

XHTML 1.1 is NOT and cannot be used to serve the "text/html" media type. IF you are actually parsing XML, then you must use an xml declaration and charset header of utf-8 or 16:

 

<?xml version="1.0" encoding="UTF-8"?>

 

AND there is a major issue with cross-browser support for XHTML 1.1 served with the proper media type and mime type ... IE doesn't support it, and mangles it into text/html.

 

Furthermore, "well-formedness is crucial with XHTML 1.1 and without it CSS will not properly render. Your php is echoing html code.

 

Lose the xhtml 1.1 doctype. This is exactly why people should STOP using XHTML unless they are specifically parsing xml and are serving the media type as application/xhtml+xml.

 

Use the html 4.1 strict DTD if you want to have truely valid code. XHTML should never be used as a text/html media type; it is an application media type intended to parse XML ... not serve html.

 

XHTML 1.0 served as text/html simply gets converted to HTML XHTML 1.1 served as text/html is simply wrong.

 

 

[dbrimlow]

I forgot to mention ...

 

#puddle should float:left, and you need to add "a:active" after ALL of your "a:hover", like so: a:hover, a:active{}

 

CSS rules require that all four a elements be declared and in the proper order - a:link, a:visited and a:hover, a:active. This goes for every time you use an a element.

 

If you don't, then all kinds of strange things happen to links across browsers.

[FridayRain]

Why does #puddle have to float left and not #clouds? Or do both then?