Build Your Own Business Website header image

Troubleshooting – The Sidebar Drops Down Below the Content in IE

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member has a problem with the sidebar on his home page dropping down below the content area in Internet Explorer. It displays properly in Firefox, Chrome and Safari. We follow my troubleshooting steps to identify the problem and make recommendations to solve the issue.

Video Transcript

Look at Sammy’s site. Sammy builds these totally cool trikes and so his site is demonstrating how to do that or demonstrating his system. He’s also selling my products nicely enough. And so the… and it looks just fine in Chrome and in Firefox but in Internet Explorer, this is what happens on the homepage. The sidebar drops down below the content rather than sitting beside it. And you get a hint of what the problem is by looking at the other pages. The other pages don’t have that problem. And so, it isn’t a problem that is caused by the structure of this webpage. It is a problem caused by something internal to this page so it’s not a structural issue. It’s a problem that’s internal to this page.

And in general, because you this happen often enough, in general, when the sidebar drops down below the content, that means either the sidebar or the content are too wide to accommodate that. So the first thing we do is we look for how that might be the case and if we come over here to Tools and Developer Tools, it brings up the Internet Explorer you know, version sort of a Firebug. It’s not quite as good as Firebug but it still works. And so we just kind of go down to the HTML structure until we get to content here and then so you could see you’ve got inside of content… and actually, if you… you can see that inside of content, there is the post box top and there is sidebars.

Now, it’s not actually supposed to be that way. Sidebars and content are supposed to be on the same level. Sidebars are not supposed to be contained inside of content. And so, there’s a problem with that. And then… and you can see this if we come back over to a different page and look at the way this is laid out. Again, just open up the various HTML elements. Here, content and sidebars are on the same level. That is, sidebars are not contained inside of content whereas on the homepage, sidebars are contained inside of content.

Generally speaking, when that happens, what that means is that there is an extra closing div tag someplace in the content that makes WordPress believe that… or makes Internet Explorer believe that…actually, it’s probably a missing div tag. There’s a missing closing div tag that suggests to Internet Explorer that the content isn’t closed so that if it doesn’t close a content then sidebars get inside of the content. So that’s one potential issue.

The other potential issue is…and regardless of whether this solves the problem that should be fixed, you need to semi-look inside of… it’s probably in this thing right here but you need to look inside of that to see where you’ve got an extra div tag or an extra closing div tag in particular. And if we… let’s see, let’s just look at that again with… where did Tools go? Okay, if we look at that again and we go down to our content box and then open up content and look at the post box… and in fact, we look at format text then we come back down here to div class trike 2001. I’m guessing that that has… that is missing a closing div tag. And so, because it’s missing a closing div tag, sidebars exist or come inside of content.

So that’s something to look at. Look at all the code around that but also notice that this code does not have… look at the HTML here for the image. You can see that it doesn’t have a good address here and it doesn’t have a size created there. And if you look elsewhere, let’s see… where else is this size? Oh, this suggests the size is 795 by 1024. In any case, what’s happening is that Internet Explorer is failing to correctly recognize the size of the image. And since it’s failing to recognize, you can see where the blue line is here? If you scroll up, obviously, that area that I just selected where this box is and it looks like it’s wider than the rest of the stuff above. And we can confirm that quickly by… if we go back to the… instead, if we look at the yellow box, you can see that the yellow box ends right on the edge of the yellow there. But the trike box or this trike you know, extends all the way over.

And so, that’s where the problem is. You need to take a look at the… that the code that you’re using to create this, make sure that it’s got a closing div tag and then make sure that this whole thing is right. Because it’s actually you know, pretty weird. There’s some weird code stuff going on here so there’s probably more than one error in that page. And actually, we might even… if we look at the source, let’s see what we can see by looking at the source. If we look at the source here, scroll down to the bottom…let’s see. So there’s YouTube, it’s above the YouTube, it’s above sidebars. Yellow box, here it is. Div class trike… you can see you’ve got 3 closing divs here. That’s probably where the problem is it’s this 3 extra closing divs. You probably only needed one closing div for this div. You’ve got a malformed address here and weird script call. You know, I would just go in there, delete all that stuff and then insert… use the insert image function in that page to add the image there and make sure that you tell it the right width so that it doesn’t fill up or doesn’t extend the space available.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment