Page Display Issue

[TheMovieman]

OK, I'm redesigning my site and found a three column layout that I liked and adjusted my review page to those configurations. This template uses <div> tags and I noticed that instead of single apostophes it shows up as an empty square box or a question mark. By the way, the page uses MySQL to get the data.

 

Also, on a larger screen (1024x768), it shows up fine but on something smaller (800x600), the middle section gets (for the lack of a better word) squished down to the bottom of the page.

 

Here's the page I'm talking about:

http://www.moviemansguide.com/reviews/DVD/....php?id=unknown

 

Plus the home page (where this also happens)

http://www.moviemansguide.com/test-index3.php

[TCH-Bruce]

It works correctly in Firefox at all resolutions. If I look at it in IE it does as you describe. Another reason to abandon IE in my opinion.

 

In your CSS it has this:

 

>#leftcol {
 float: left;
 margin: 0 0 0 0;
 width: 150px;
}

#main {
 margin: 0px;
}

#centercol {
 margin: 0 220px 0 170px;
}

#rightcol {
 float: right;
 margin: 0 0 0 0;
 width: 220px;
}

 

Your left column is 150 pixels wide (#leftcol)

Your center column is shifted 220 pixels from the left edge and 170 pixel from the right edge (#centercol)

Your right column is 220 pixels wide (#rightcol)

 

So your sidebars are totaling 370 pixels in size so on larger resolutions it's displaying properly.

[TheMovieman]

I guess I'll try adjusting the numbers and maybe get it down some... But I have seen other sites that the side bars stay the same and the middle adjusts, yet doesn't do what mine has.

 

 

Another thing (and this doesn't really pertain to this issue, more of curiosity), but I use a spacer.gif image on one of the sidebars and in MSN Explorer (which I think uses the same kind of coding as IE), there's a bar that shows even if I specify border="0". Just odd but not that pressing to fix.

Edited January 31, 2007 by TheMovieman

[TCH-Bruce]

What happens if you move this

above the

instead of below it?

 

I think that tag is out of place. It is your main body below the header and your left, right and center columns should be inside of it.

 

I use a 3-column theme on my site and it resizes at all resolutions correctly.

[TheMovieman]

Still does the same thing. I've updates the page:

 

http://www.moviemansguide.com/test-index3.php

 

 

I also sized down the left sidebar and while it's smaller than I like, I think it'll work on the 800x600 resolution.

 

 

Edit: Just checked and it still doesn't work on that resolution...

Edited January 31, 2007 by TheMovieman

[TheMovieman]

Still haven't really solved the problem per se, but I did set (within #main) the width to 1010 so the middle section won't do that on smaller resolutions, the trade-off however is, there will be a horizontal scroll.

 

One other question, I noticed this on another site using 1024x768 that there is still the horizonal scrollbar where you can only move over a little. I had put in a code to remove this but in order to do the fixed width size, I needed to remove that piece.

[TCH-Bruce]

You don't need to adjust your sidebars. You are using tables inside the div's. These tables are set to 100% change them to 97% and I bet it works in IE.

[TCH-Don]

Three column layouts can be tricky.

A good site to look at is http://www.realworldstyle.com/

[TheMovieman]

You don't need to adjust your sidebars. You are using tables inside the div's. These tables are set to 100% change them to 97% and I bet it works in IE.

 

So I adjusted it and it still does the same thing and now even if I adjust it slightly the middle section goes to the bottom. I know it's a matter of adjusting the numbers, but this thing is really bugging me now, lol.

[TheMovieman]

Thanks for the link Don. I had actually found something similar (http://webdesign.about.com/od/freewebtemplates/p/blbetter3col.htm) and was trying to adapt that. If I find an extra spurt of energy, I might try this over without using tables, but I need to learn more about <div> tags.

 

BTW, do div tags have an effect on apostophes and such? I noticed on that first link (in my first post) that instead of ', there's an empty box or (on another computer), it's a question mark. If I edit the review and replace the apostrophe , it'll show fine (the one in the review is taken from Word).

[TCH-Bruce]

Firefox displays the page properly. Look at the screen resolution in this image.

 

[TCH-Bruce]

Maybe IE cannot display it properly because it won't validate.

[TheMovieman]

Yeah, but since IE is so quirky, I don't want it to look so strange. I'm going to research the div tags and see how to do what I need instead of using tables since that seems to be the trouble.

 

Thanks for your help guys, in any case.

[TheMovieman]

Maybe IE cannot display it properly because it won't validate.

 

That was because (where this error ocured) the guys last name was an unsupported symbol. This showed up fine using tables (http://www.moviemansguide.com/reviews/movie/read.php?id=childrenofmen) but not in the div tables. I corrected it, but didn't hlpe any.

[TheMovieman]

Just wanted to thank all you guys for your help. I ended up sticking with tables without the div tag and just re-designed my home page and made the width to 765pixels which looks fine on a 800 x 600 monitor.

 

Anyways thanks everyone

 

[TCH-Bruce]

Sorry we couldn't get that other layout working for you. But glad you have a design you are happy with.