scriptygoddess

Found on this thread

I needed to remove elements from an array that were either blank, nothing but a space, or null.
foreach($array as $key => $value) {
if($value == "" || $value == " " || is_null($value)) {
unset($array[$key]);
}
}
/*
and if you want to create a new array with the keys reordered accordingly…
*/
$new_array = array_values($array);

While we’re on the subject of IE funkiness - I ended up on Toothpaste Addict tonight and noticed this little trick. (Actually, something weird happend when I copied and pasted the code from Toothpaste. Must have something to do with the text formatting there. But I found this page - which actually shows the same code, but copying/pasting that one worked)

<!–[if IE]>
IE 5.0 - 6.0 will be the only browsers to see this line.
<![endif]–>

It’s a good thing I have no shame in admitting when I was doing something stupid. Otherwise I’d have no posts for this category.

Just to explain a little about what I was working with - it was essentially an email form (emailform.php) - but before sending the email, it brought you to a page where you could preview your email. From the preview page (preview.php) you needed to have the option to go back and edit your message (back to the first form: emailform.php), or to send the email (sendemail.php). (Obviously when you go back to emailform.php - I needed to have it “remember” what you originally wrote there)

I won’t even tell you how I was handling this before - because it was stupid, I know it stupid, but it worked, almost. But I knew there was a better way. Today with some time on my hands I found this page with EXACTLY what I needed.

So now the form tag on my preview.php just calls itself and looks something like this:

<form action=”preview.php” method=”post”>

And my submit buttons simply look like:

<input type=”submit” name=”Goback” value=”Go back and edit”>
<input type=”submit” name=”Sendemail” value=”Send Email”>

Then, at the very beginning of preview.php (before the first HTML tag) I have:

if (isset($_POST["Goback"])) {
header(”Location: emailform.php”);
} else if (isset($_POST["Sendemail"])) {
header(”Location: sendemail.php”);
}
/*
I’m setting the session variables AFTER the above because otherwise those “submit” buttons become persistent when preview.php submits the current page to itself. This way - only the data being sent to this page from the ORIGINAL form (emailform.php) become persistent in session cookies.
*/
foreach($_POST as $k=>$v) {
$_SESSION[$k]=$v;
}

On the both the emailform.php page, and the sendemail.php page, wherever I looked for values in $_POST - I change to now look for the same in $_SESSION.

This way - if you click the back button from the preview page, the data is not forgotten.

(I know this probably won’t make a whole lot of sense to many people - and those it does make sense will just wonder why/how I just figured this out NOW.)

I’m in the process of moving a few other blogs over to use WP - one of which makes calls to a seperate database unrelated to WP. This proved to cause a conflict. After many hours of trying to figure out where the specific conflict was - I narrowed it down to my mysql_select_db line. Apparently selecting your database this way - even if you close your mysql connection - and then select a different database later on - it can cause you headaches (and make you stay up later than you had intended to) LOL! =Yawn=

The remedy was specifying the databasename when referencing the table and avoiding using the mysql_select_db line altogether.

So instead of code that looked like this:
$databaseConnection = mysql_connect($databaseServer, $databseUsername, $databasePassword) or
die ('I can't connect to the database.');
mysql_select_db($databaseName,$databaseConnection);
$query = "SELECT * from tablename;";
$result = mysql_query($query);

I changed it to this and it seemed to work:
$databaseConnection = mysql_connect($databaseServer, $databseUsername, $databasePassword) or
die ('I can't connect to the database.');
$query = "SELECT * from " . $databaseName . ".tablename;";
$result = mysql_query($query,$databaseConnection);

For the past few weeks, I’ve been using CSS for my layouts (at work) and I can say that I think I’ve officially been converted. While I still struggle with the little nuances (see previous post) - it IS starting to make sense to me.

I’m now about to start using CSS in a more involved project in which I create HTML pages and then hand them off for JSP developers to work with.

Previously, one frustrating thing that would happen in these cases is that, while HTML may seem incredibly simple to me - this is not the case for the JSP developers. We would often have many back and forths about what happend on the page when they added their JSP code. What, with all the spacer gifs, nested tables, broken graphics just to maintain the “look” - admittedly, even I would have a hard time going through the markup without a WSYWIG editor handy.

But now with this project - the idea of keeping content and layout seperate suddenly makes perfect sense. I have all my layout stuff going on in a page (i.e. the stylesheet) they won’t be touching (Thank god! LOL!) And the HTML they need to work with is INCREDIBLY simple and easy to follow - especially considering the alternative.

I don’t have to worry about them messing up my design. And they don’t have to worry about scrolling page after page through wacky html table tricks.

Now it starts to make sense

Not sure this is the right category for this - as I STILL don’t understand WHY. I should probably add a special category for my CSS issues and name it “Dazed and very very confused”

I wanted the background of the page one color - and I wanted the area behind a sidebar and a main content area a DIFFERENT color (same goes if you try to use images).

When I created the HTML and CSS for this - it worked fine in IE (believe it or not!) but didn’t in Firefox. The color for the background would NOT go behind the inner divs.

After A LOT of playing around - I realized, while the two inner divs (the sidebar and bodytext divs) were floated left - the outer “main” div (where I had specified this DIFFERENT color) was not indicated with any kind of positioning. Simply by adding the float: left; to that “main” div - and then suddenly the background I wanted shows up.

Ok. Now, can someone explain to me WHY?!?!?!

Here’s an example of what I’m talking about. The top section shows how it looked when I was pulling my hair out. The bottom shows how it looked after many hours of hair pulling. (View source to see the code - obviously)

Again - the page behaves in both cases as I would have expected, in IE. It was Firefox that was having the problem.

I’m not sure that “Lessons Learned” is the most appropriate category for this, as all I’ve really learned from this little exercise is that IE on the Mac SUCKS.

1) When testing changes to a stylesheet on the Mac - I can’t just hit refresh and have it load in the new/revised stylesheet. I have to actually QUIT IE completely (not just close all browsers - actually QUIT the program) then open it again - and THEN it will load the new stylesheet

2) That little trick they talk about with doing CSS forms - making an outer “row” div - and then two inline “label” and “formw” spans inside. This will only work in Mac IE (and sit all on one line) if I add an extra unlabeled, unstyled div… so instead of this:

<div class=”row”>
<span class=”label”>First Name</span>
<span class=”formw”><input type=”text” name=”First_Name”></span>
</div>

I have to do this:

<div class=”row”><div>
<span class=”label”>First Name</span>
<span class=”formw”><input type=”text” name=”First_Name”></span>
</div></div>

UPDATE: HERE IS A BETTER WAY!!! - I’ll leave all the above up here too, if for no other reason than just because it’s interesting that this works also - but ideally, less code is better. I previously left a comment in this post that I would try it - and I did - and this new link has a solution that’s better than mine. (found via the CSS Help Pile.)

3) In addition to the above, if that last </span> and the two </div></div> are on the same line - it gets messed up again. So if that last line looks like this:

…etc. etc….</span></div></div>

it’ll get messed up. So it has to look like this:

…etc. etc….</span>
</div></div>

4) I also ran into a really weird problem with links completely disappering (on Mac IE only) when you hovered over them. I’m not talking like you hover, it turns to white, then you hover off, and it comes back. I’m talking about you hover over it, and then it’s gone… and the only way to make it reappear on the page was to refresh. I DID fix this - but I’m not sure how. I have a suspicion that it had to do with too many nested divs styled with IDs instead of CLASSes. But I’m not sure. All I know is that I changed many of the styles to use CLASSes and it went away.

Again - like I said - I think the only thing I’m sure of here is that Mac IE REALLY sucks. I’ve only been doing my layouts in CSS for a few weeks now - and already I see a trend. Every browser is happy - pages validate - but Mac IE kicks the bucket.

(Still on old news for you CSS-pros. I’m wondering why YOU’RE not writing this blog. All the comments have been more helpful than my posts!! LOL!)

Just wanted to jot these down so I could find them later:

font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
shortcut:
font: bold 10px Verdana,Arial,Helvetica,sans-serif;

margin/padding shortcuts:
margin: top# right# bottom# left#
ie. margin: 5px 0px 2px 10px;
or
margin: top&bottom# left&right#
ie. margin: 10px 5px;

color shortcuts (websafe hex)
color: #000000;
shortcut: color: #000
color: #FFCC00;
shortcut: color: #FC0;

So I’m moving along in my CSS understanding. I (think) I get float, positioning. I even get the box model, and box model hack.

I had a small site that used a tabled-design that is due to go live next week, so I decided I’d quickly convert it to CSS before the launch. (Yes, I know it’s Wednesday. Yes, I’m a glutton for punishment).

I got my layout working 99%. I had previously removed the doctype declaration - so when I put in the box model hack - it didn’t seem to work in IE 6. I pasted this one in from a page online that I knew used the hack and worked, and then it worked for me too:

<!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” xml:lang=”en” lang=”en”>

I don’t understand doctype declarations. I know they’re important and that I should understand them. Right now, I’m just glad my layout is happy again. Baby steps here… baby steps!

Just a note that maybe will save someone else the headache I had yesterday.

If you’re using Dreamweaver - and create a new HTML page - it automatically sets your doctype like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

This caused a problem with a table-based design I had done. Images placed inside cells of a table had this odd space after all of them. Even though I had specified the table, and it’s cells to the exact width and height of the image, as well, there was no space in the HTML itself. It only would happen on Netscape 6 - and as soon as I removed the doctype declaration - it went away.