About the author.

Welcome to The blog of whall

Come on in and stay a while… laugh a little. Maybe even think. Read more...

Hi, This is Wayne. This is my site, my stuff, my blog, blahblahblah. The site itself is powered by WordPress and the Scary Little theme. I thought it was cool, and I still do.

Don’t you hate it when something eludes you for a long time?  And you spend lots of time trying to fix it?  You ask for help, get nowhere.  And then you just learn to live with it?  And it annoys you AT EVERY TURN and you STILL just let it sit, etching away at your sanity a few seconds at a time?

That’s how it’s been for me with this annoying piece of my blog – at some point after a ton of customization early on, my sidebar decided to display BELOW the post and comment form instead of where it belongs – (dramatic pause) ON THE SIDE.

blog wordpress theme div tag wrapping

This was so annoying I can’t even tell you.  I had asked a few friends about it too, over the past few months.  I was convinced it was either too many DIV tags or not enough DIV tags.  So I spent WAY TOO MUCH TIME counting, recounting, and looking for tools that would tell me if I have too many nested tags, and then playing with the tools, and then forgetting about the whole dang thing.

The thing’s been like that for over a year.  GEWEEEEESH.

So recently, that same consultant who helped me with SharePoint pointed me in the direction of a nifty little tool called the IE Developer Toolbar.  And this tool pointed to what the problem was, which in my case was a simple error in pixels and the browser being forced to “wrap” the next section down a row.  So it’s not that I had the wrong tags at all – something in the middle column was too fat, so the sidebar was forced down.

Once I fixed that, I got a much better looking blog entry page:

div tag wrapping pixel fixed

I have more technical detail in the extended entry below for those interested.

From the beginning, I knew that my main index.php page displayed fine — the sidebar was flush with the top of the entries when you just went to the main page.  However, if you clicked the page display (in order to leave a comment), that’s when the sidebar showed up at the bottom, BELOW the entry.

The main thing that’s different between the index page and the page display is comments (which includes gravatars) and the comment entry form.  This is where I figured the DIV tags went wrong.

Matt showed me how to use the IE Developer Toolbar and WHAMMO it immediately gave me the power to find out where specifically the problem was.

Here’s a quick runthrough of what we did:

First install and run the IE Developer Toolbar.  It gives you a little blue mouse cursor icon in the toolbar tray.  You can also access it via View –> Explorer Bar –> IE Developer Toolbar.

ie developer toolbar

Enabling to toolbar gives you a new separate pane down at the bottom of your browser.  Use the following graphic (click to enlarge) for the rest of the explanation:

ie developer toolbar details 

There’s a little icon on the left that lets you toggle on/off the area selection tool.  Once you turn it on, you can mouse over parts of the page and it’ll highlight the object – be it a DIV tag, an image, a header, or anything.

Click on the object and it’ll fill out the details in the lower middle and left panes.  This is EXTREMELY useful information because it tells you the effective settings that that object is inheriting, and where it came from.  DO YOU UNDERSTAND HOW COOL THIS IS?  Let me hear a virtual Amen.

I noticed that the width was a little too wide (you can eyeball that from the top part of the page) and I also saw that the width is set to 589px with some padding.  

Here’s a cool trick: I can click the plus sign in the lower middle pane and it will let me type in a manual value for something, so I could type in, say, “width” and change it to say “570px” and it gives the result IMMEDIATELY in the window. 

How valuable is that?

So I can also quickly see that the div tag is “aside3” so I go to my css file and change the width there and BANG it’s fixed!

.aside3 {
width: 570px;
background:transparent url(images/asidebackgroundbottom.gif) bottom no-repeat;
padding: 3px 3px 3px 15px;
font-size: 13px;
}

Maybe my problem wasn’t with the ‘aside3’ tag – maybe it was something else, but I’ve already spent enough time working on it, and it’s fixed now.

Another cool thing you can do with it is look at the source code that defines a specific object.  Like I noticed a few empty DIV tags – you can just right-click on one of the elements in the outline view and look at the source:

ie developer toolbar element source 

Plus I learned about a valuable tool that will help me in all sorts of CSS troubleshooting and tweaking.   You can just sit there and modify values until something looks good, THEN go edit your CSS files.  What a time saver!

Thanx Matt!

And lo, the people did comment thus:

2 Comments

  1. Avitable says:

    That’s a cool plugin – I’ll have to try that.

    Happy Thanksgiving!

  2. Iron Fist says:

    As a fellow WordPress user, I salute you. Maintaining and customizing your own blog can be a real pain in the ass sometimes.

Want to comment?

Hey, we all want to share our voice. And I particularly love comments, especially if you took the time to read my blog entry. I'll take the time to read your comment, I swear! But due to spammers, robots, and the fact that I want my blog to be PG rated, I need to approve the comments. This should be same day, but please don't get mad if it takes me a while to approve the comment.







Comment:


PLEASE help keep this blog family-friendly by refraining from profanity and vulgarity.


CommentLuv badge


Admin
tsk tsk

Ajax CommentLuv Enabled 336ad6ab990e8080f1c0ad1f892428a0