Pimp my CSS please. Before I kill myself.

June 12, 2009 11:34 AM

I'm a designer and usually people do programming for me. I'm trying to teach myself how to customize Word Press themes all by myself though... and I thought I was doing pretty well. But then I had people look at it in other browsers. Yuck.

Apparently it loads slowly for other people at times, the slideshow doesn't go all the way across, just all sorts of crap. I tried to do verification and there are a bunch of errors. I need to figure this out and move on!

I just really don't know how to fix any of these things. I was already proud of myself just for figuring out how to do the new stuff I've already done. My head hurts.

Can you help?

Oh, and the theme I customized for this was "Modularity" by Graph Paper Press.

posted by miss lynnster to computers & internet (15 answers total)

Previously from me...

Basically, IE will muck up your design everyday of the week. But you can fix it! It's just a lot of experience stuff.

Nice work with the template, WP Templates are a nice place to start for a junior programming dude. Did you have prior HTML experience and this was your first PHP project? Or was it, "I have never looked at any kind of code ever"? Because that's a different story.
posted by GilloD at 12:11 PM on June 12, 2009

I did my own site in Dreamweaver but my expertise is in print. With web, what I tend to do is either have other people program it or place Photoshop images in order to avoid dealing with code. This was most definitely my first PHP project... since I had to look up what PHP means. :)

I understand that it's a lot of experience stuff. And since I don't have that, what do I do? It looks fine in Firefox, but I guess in Safari and IE, it's a mess... I just don't know how to fix it and I want it to go live within the week. Nobody else I ask knows how to fix it either.
posted by miss lynnster at 12:42 PM on June 12, 2009

The trick with these things, which you've probably worked out in hindsight, is to test at every stage of development. That means keeping two or more different browsers open as you work and refreshing every time you make a layout change.

It's far easier to fix layout problems when you can narrow things down to something you changed in the last half hour.

I think you've done a pretty good job actually, all things considered.
posted by le morte de bea arthur at 12:42 PM on June 12, 2009

Oh, also, the slideshow has jumpy fades. It's not as smooth as it should be.
posted by miss lynnster at 12:44 PM on June 12, 2009

Go forth and validate, Lynn. There are a few things wrong with your html that might be causing the problems. Just off the top of my head: you can only use a div id once on a page. You've got id="search" twice. Also you have a div within a p tag. Probably not a good idea.

These may not fix what is happening (with Firefox on a Mac I'm seeing the right column BELOW the content, not to the right of it). Usually, that's due to a mis-coded div tag (or a missing closing tag). But making sure you're code is good is the first place to start when you're trying to figure these things out.
posted by Taken Outtacontext at 2:04 PM on June 12, 2009

For slow load times, decrease the quality of your pictures to below 80% JPEG compression to whatever you can tolerate for quality. The front page with all of the pictures is about 1MB, which is too much for what I assume is shared hosting.
posted by sleslie at 2:21 PM on June 12, 2009 [1 favorite]

Just off the top of my head: you can only use a div id once on a page. You've got id="search" twice. Also you have a div within a p tag. Probably not a good idea.

I hate to admit that I don't even really know what this means.

When I tried to validate through w3.org, it just says "I/O Error: Stream closed."

When I validated it through http://xhtml-css.com, it says:
# 185:117 document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag
# 231:183 Attribute "target" exists, but can not be used for this element.
# 289:49 ID "search" already defined
# 290:25 ID "searchform" already defined
# 292:36 ID "s" already defined

I have no idea what ANY of this means or how/where to fix it.
posted by miss lynnster at 2:42 PM on June 12, 2009

I hate to admit that I don't even really know what ["you can only use a div id once on a page"] means.

Basically, it means that if you have any elements with id="..." on them (e.g. <div id="search">), the IDs that you use have to be unique across the whole page.

In other words, once you put id="search" on one element, that's the only element that you can put that ID on. If any other element has its ID set to the same thing, that's an error. That's what the "ID 'search' already defined" errors mean.
posted by letourneau at 2:55 PM on June 12, 2009

And as for this: "document type does not allow element 'div' here", it's because you have a DIV element inside of a P element, which is not allowed. Some elements, like P, H1, H2, etc. can only contain "inline" elements (such as EM, STRONG, etc.). Putting a "block" element like a DIV inside of them is an error.

Knowing what particular elements can go inside of what other particular elements is just something which, like English spelling, you sort of have to get accustomed to by experience (unless you have software nudging you in the right direction, like spellcheck, or a web page editor that knows about the HTML specs).
posted by letourneau at 3:07 PM on June 12, 2009

Hi Miss Lynnster!

Allow me to try to translate the (rather technical gobbledegook) of the W3C:

<div>'s are container elements - they wrap around things like multiple paragraphs, to treat them as a single block (think of a bordered box with a colored background containing an image and some paragraphs - that's an example of a div). You can't use <div> within a paragraph - that's what <span> is for. So, using DreamWeaver's Code view, substitute <span> for the div (you may also need to change the CSS to match, depending on how the theme was designed).

You can't use "target" as an attribute in XHTML Strict, the HTML code format you are using. Using "target" is a trick to open up the link in a new window, and it's frowned on. Take out the target attribute and its value entirely.

As Taken Outtacontext has already mentioned, the "id" attribute value is meant to be unique to elements on a page: both CSS and JavaScript expect an element with a particular id value to be the only thing with that value on a particular page. If you're repeating styles, you can always use a CSS class. So change the id values of things so they are unique. (Again, this may mean amending your style sheet a little).

I hope this helps!
posted by Bora Horza Gobuchul at 3:08 PM on June 12, 2009

Just off the top of my head: you can only use a div id once on a page. You've got id="search" twice. Also you have a div within a p tag. Probably not a good idea.

I hate to admit that I don't even really know what this means.

In case this is still unclear:

In HTML, IDs are there to tell the code where to find a specific thing. Think of it like a MeFi user number. If you read something by "heatherann", you would know that's me, MeFi user #19008. But if jonmc was also posting under the name "heatherann"... well, that would be terribly confusing.

You've got a search engine at the top of the page, and another at the bottom of the page. Both of them have this code:

<div id="search">

The browser sees the two divs called "search" and tries to apply the CSS for that div id and panics: "But which one do you mean? OMG, confused!"

You can solve this two ways:

1. Give them different ID names (like "heatherann" and "jonmc"; or "search-header" and "search-footer").
2. Use a class rather than an ID. That means your HTML would be like this:

<div class="search"

and your CSS would be like this:

.search {
whatever;
}

(In CSS, IDs are like #this and classes are like .this)
posted by heatherann at 3:57 PM on June 12, 2009

Thank you guys for trying so hard to explain this stuff to me. :) My pretty little head hurts, so I'm going to take my dog for a walk in the canyon and gear myself up to parse through and comprehend it when I come back.

I've been feeling so retarded, my brain's just kinda shut down and needs to reboot.
posted by miss lynnster at 4:39 PM on June 12, 2009

I made the images smaller and that fixed the slideshow problem, though!
posted by miss lynnster at 4:50 PM on June 12, 2009

Oh, yes... I hadn't noticed the page size. Good catch, sleslie!

If I can expand on that, once you're rebooted, Ms Lynn... assuming you are using PhotoShop or similar... the "quality" slider for saving JPEGs is a misnomer, at least to me. It should be called "compression": with "maximum compression" on the left side, and "minimal compression" on the right. As a very rough rule of thumb, a 15 - 35% "quality" setting for most JPEGs, assuming you are working from high quality originals, is perfectly adequate, and nicely balances image quality with small file size.

An invaluable tool in Firefox for this stuff is the web developer extension - it will not only validate your code via the W3C, but report on document size (and what is contributing to that size).
posted by Bora Horza Gobuchul at 5:40 PM on June 12, 2009

Okay YAY! I figured the stuff out I think... and thank you guys for your e-mails because that really helped me with troubleshooting.

Turns out the code stuff wasn't the problem. The validation stuff was really not the problem at all, so I'm ignoring those errors. The loading issue was 100% because the images in the slideshow were too big. And it turned out that the Safari issue was fixed when I reduced the logo image by 3 pixels. Apparently it was a *smidgen* too wide for the theme.

So all is well now, I think! Yay! Thank you all!!!!! :)
posted by miss lynnster at 10:00 AM on June 15, 2009