<php if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) { ?>
... CUSTOM CSS FOR IPHONE...
<php } ?>

This will also work for iPhones and iPod Touch:

<php if (strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { ?>
... CUSTOM CSS...
<php } ?>

That's great and all – but then suddenly one day it stopped working. Going back through what changed on the site, I realized one thing we added was a cache plugin. DOH! So the page gets cached without the custom CSS for the iPhone – the iPhone calls up the site but gets served the cached page (non-iPhone version)… Yeah, that would do it.

So I found this solution:

<!--[if !IE]>-->
<style type="text/css">
@media only screen and (max-device-width: 480px) {
.... CUSTOM CSS HERE....
}
</style>
<!--<![endif]-->

or of course you can pull in a whole stylesheet for the iphone:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css" />
<!--<![endif]-->

Related posts:

1. SEO Plugins and problems with the titles not rewriting (WordPress) I can't speak for anyone else who has run into...
2. Anchor Links in WordPress Posts – another shortcode solution I was recently asked by a client how they could...

Related posts brought to you by Yet Another Related Posts Plugin.

Just wanted to post a reminder to myself should I ever come across this weirdness again. I was working on a layout recently, and everything was working fine in Firefox, and everything was fine in IE except for one little nagging problem. A box that had a repeating background image in it sometimes showed up with the background in IE, and then sometimes not. Sometimes if I refreshed the page – suddenly the background image appeared. The line in my css calling for the background image looked like this:

#mybox {
background: url(images/my_background_tile.jpg) top left repeat-y;
}

Everything looks kosher – at least it SHOULD be. For some reason IE REALLY wanted a background color too! (even though it wouldn't be showing up because the image would be covering over it). Okay. Whatever. So this is what made the background image show up consistently:

#mybox {
background #fff url(images/my_background_tile.jpg) top left repeat-y;
}

IE was happy. And there was much rejoicing.
(*one quick note: this problem was specific to REPEATING background images. Background images set to no-repeat were not having problems)

Oh also – don't ever do this:

#mybox {
background: #fff url(images/my_background_tile.jpg) top repeat-y;
}

All kinds of weirdness happens then. If you're going to specify background coordinate locations (with either "top", "left", "5px", etc.) you have to specify both x and y locations. IE will hate you otherwise. And we don't want THAT! do we?

Related posts:

1. Striping IMG tags from the_content in WordPress (and how to fudge page excerpts) Background: For a site I was working on, I was...

Related posts brought to you by Yet Another Related Posts Plugin.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

This isn't terribly new – I guess the program has been out for awhile. I wish I had known about it sooner. Would have saved me a bunch of headaches!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the "Page" text lines up and the "….." just fills in until it reaches the "Page" text… kind of like you'd see in a table of contents in a book? (Ideally the "…." wouldn't even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!)

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won't show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here's the example.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Here's today's CSS dilema. Had a simple floated div. Gave it a margin – and for some reason, IE doubled it. The solution is just to add "display: inline;" to the floated div, and all is well.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

See example here.

Found this solution which basically suggested adding the following so that it wouldn't do that:

.containerdiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

As well as adding a height: 1% (to to the container div)

See fixed example here.

Related posts:

1. swfobject – flash doesn't load in Firefox Ran into a bizarre problem today using swfobject. A lot...

Related posts brought to you by Yet Another Related Posts Plugin.

the thing with vertical-align is that it's vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

University Of Minnesota Deluth: Web Design References
This particular one is for CSS, but in the sidebar you'll see many more to PHP, Typography, Usability, Javascript, etc. etc.

My one note is their URL is very unfortunate. They MUST get jabs for it. When I first saw it in the guest authored post – I thought it was a joke:
www.d.umn.edu? Sorta looked like www.d.umb.edu to me. (Then again, I'm kind of dyslexic…)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

HTML Help: CSS References

Westciv: Learn Web standards

Veerle's Blog: Designing a CSS based template
(from psd to css) – in 5 parts – looks VERY good at first glance

CSS Vault
Gallery of CSS based design (need to add this to my "design inspiration" post as well

Related posts:

1. Anchor Links in WordPress Posts – another shortcode solution I was recently asked by a client how they could...
2. Multiple Featured Content Galleries On a site I was working on recently, the client...

Related posts brought to you by Yet Another Related Posts Plugin.