Jump to content

[SOLVED] Why is my div being stupid?


FridayRain

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

FRindex.jpg

 

FRfeed.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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".

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>";

?>

Link to comment
Share on other sites

...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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>";

?>

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.