First things first:
- Is everything working for everyone? No weird spacing issues, two content spaces running into each other, etc?
- Would you prefer the permalink pages to have more space by not having the right link bar there?
- Please give me suggestions on how the comments should formatted. I’m not really happy with the way they are right now.
- Don’t be shy in speaking up about any other issues you have with the design; I may not take your suggestion but then again, I just might.
I have to say, creating a WP theme has given me a new insight into divs. And a renewed love for my tabular design style.
You see, I got into webdesign right around the time when NetObjects was a hot program. Not that I used it, mind. Horror of horrors, I went from hand coding to using FrontPage. I know, I was young and lazy. But my mom’s partner was writing the new version of the NetObjects manual, and he was the one who had taught me code, so I was infulenced by his design style. In other words, tables were my method of control; through them I made sure the content was exactly where I wanted it, how I wanted it.
When I got back into hand coding and learned to use CSS, you can imagine my inner control-freak’s glee. Tables + CSS positioning = wickedly cool overlapping content. Look at this theme. Or Shrub’s main one. Tables are what makes my designs go round. So, as you can imagine, working off of strictly div-based themes as templates threw me for a loop. I procrastinated for months, having a few false starts that never worked out. And then the lovely Monkey over at Sudden Nothing showed me the design she was working on (it’s coming out quite welll; I can’t wait until she unveils it) and wham I got the design bug.
A night in Photoshop, a day in temporary-page development, and a few more in porting it to WP code (real content doesn’t exactly measure up the same as the fake placeholders) and I had my theme up and, mostly, running. “Divs are great!” I was thinking to myself. “Best used with tables, not instead of them, though.” Oh, if only I had known how prophetic my thought had been.
I go to bed, wake up and fix a commenting issue, and then am greeted with no less than 3 people (Buffy e-mailed me) telling me that my carefully coded right navigation bar was overlapping the content in IE!* I was annoyed, but not too much so because I didn’t want the div to be outside the main content box anyway, and my one attempt to put them inside of it brought on a nasty disaster in the form of my width constraints not working. I also noticed that half the time the padding on my left bar would work just fine and the other half it would screw up and be ugly. Divs can do many things, but provide adequate spacing for complex designs is not one of them.
So, fast forward to today. I get home, take a shower, then roll up my sleeves to fix the problem. Having had lots of experience with table spacing, it didn’t take me all that long to get the design working like it was supposed to. Tables have saved the day yet again.
I don’t think I’m going to give up my tabular design for a div one; it’s just not practical for the crazy stuff I like to do with my layouts. Still, this experience has given me a new appreciation for divs and what they can be used for. They’ll be making a comeback in future designs, but within the confines of tables, that’s for sure.
* A perfect example of why I hate IE. By not using W3C standards it makes coding for multiple browser compatibility a nightmare. Microsoft, please die. Or, better, yet, stop letting IE suck so bad. Also, people who use IE: get Firefox it r0x0rz browser b0x0rz.
Oh no! I was coming here for inspiration on something and you changed everything!
It looks good, but still, it’s shocking! And so poorly timed for my needs. MY NEEDS! What about me!?!
Oh well. EXCELLENT job. 🙂
Whops. My bad.
What elements in particular were you looking for? I can screencap or HTML you up a mock page of the previous layout if you want.
Glad you like the new one, though ^_^
No, I was just building a separate page and wanted the sidebar to go all the way up to the top and I thought, hmm. What do I put in the top of that? What should it look like? Hmm, hmm… why, I know who has a sidebar like that! Off to shrub I go!
and there was no sidebar like that anymore, and I was a sad panda.
p.s. I am e-mailing you right now to tell you how much I hate you and other things. 😀
I haven’t used tables for several, several designs. If you look at UH, right now the only thing that I’m really using tables for is to help with some alignment in a couple of menus. Very small things that I could have done in divs, but I didn’t want to take the time.
IE can be a bit of a pain when it comes to CSS, but there are quite a few tricks out there to deal with alignment and spacing issues in IE. Often, you have to deal with having specific styles for IE, and specific styles for non-IE browsers. That’s IE’s fault, not CSS’s. If MS would just deal with specs, it’d be fine.
Oh, and yes, there are spacing problems…
On this page, in firefox, you’ve got a lot of text overlapping itself.
I wasn’t blaming CSS for IE’s suckage. But my point is that using tables negates a lot of the browser-specific coding that I’d have to do to achieve the same exact effect using divs. Until all browsers are dedicated to being W3C compatible, I’d rather make my life easier by having to code less.
Are you talking about the comment box breaking things? That’s the only thing I find when I shrink this too small. And that’s a testament to my idiocy, not the failure of tables. I was messing with the size because it overlapped my right bar when everything was div-based. When I switched to tables it worked fine in my browser size, so I didn’t think to check it (which I would have if I had worked on the comment stuff).
I’m going to try to fix it now.
Okay, it shouldn’t be able to break the layout anymore.
Is that the only spacing issue you found, or is something else causing a problem?
Huh, I’m in Firefox and I hadn’t noticed any overlapping text. Only problems I see are that sometimes, the sidebar links to the right bleed out of the white and into the green.
Have you noticed that recently, Monkey?
It might be a product of having a single string of text too long for the space I’ve allocted for them.It seems that my LiveComment plugin is breaking the table for some reason. I’ve been meaning to upgrade it anyway, so I’m going to see about fixing the problem.Okay, scratch that. LiveComment isn’t the problem (although the newest version refuses to work), it’s the comment box. The same stupid element that was giving me issues before.
This looks like it works. Unless one resizes the window without refreshing. Then it breaks the layout. Not that I have *any* idea of what to do about that, aside from having a fixed width for the text area but that will break the layout at a certain size, too. I just can’t win. I hate form elements. I really, really do.
lookin’ good. I love divs, but I use divs with tables (some call it cheating… ^_^) because it’s just too hard to get divs to look the way you want them across different browsers. Maybe there’s a way to do this with divs that i’m not aware of, but especially for blogs, I find tables are helpful to keep the layout looking the same depending on varying post length. Tables are an easy way of transferring heights from one div to another, but divs are useful for more dynamic and fun layouts (my layout includes an overlay of content over several background images, and that layering effect is best done with divs than with tables).