PDA

View Full Version : CSS/Php whoes. (Centering issues)


Jerman
2006-08-14, 23:50
I have been working on a redesign to my website, jeremiahrich.com

I am using the domain: http://www.thestuffthings.com to test stuff out before I put it up as the main site. I am having a slight centering issue though... For some reason, the page is shifting slightly to the left. It is very hard to tell, but note the position of your mouse for point of reference, and you will see it shift by clicking on the "About" link. Any clue on what could be causing this?

I am including two php files on the main site:

recent-shows.php
and
recent-news.php

Removing recent-news.php seems to fix the formatting issues. I also notice that on my news page it is doing the same thing. (That is powered by news.php, you get the picture). But the shows php's aren't causing any issues. I am very new at coding in MySql, so I am sure there may be some oddities in my coding.

If I remove the following line, then the centering is not messed up:
Echo substr($bResult["Text"],0,200);

Of course that is necessary to show the news...

Jerman
2006-08-15, 00:41
All right, it was not recent-news.php that was causing the problem. It is this code:

<div style=" float: right; width: 440px; text-align: left; border-left: 2px dashed #666633; padding-left: 10px; font-size: 12px;">

<div style=" float: left; width: 220px; text-align: left; margin-left: 2px; margin-right: 2px; color: #9C8F67; font-size: 10px;">

I am using that instead of tables in an attempt to do everything without using tables. Somehow when the width of the right side exceeds the left, it moves the page over to the right by about 6 pixels...

Jerman
2006-08-15, 00:48
Sorry for a third post already in my own topic. What is causing the problem is when the # of lines in my main div exceeds a certain # it pushes the page to the left. So the code has nothing to do with it. Removing certain pieces pushed the total # of lines down so you get the picture. But I am still stumped.

mooty
2006-08-15, 03:27
to be honest, why dont you just use a table? it would be much simpler. Then you just center the table:

<center>
<table width=# border=0>
etc etc..
</table>
</center>

Makes more sense to me...

spikeh
2006-08-15, 07:26
If you used a table you'd be a loser.

body {
margin: auto;
text-align: center;
}

#element {
width: 80%;
margin: auto;
text-align: center;
}

Mmmmm BONGO!

Gargoyle
2006-08-15, 12:30
The only thing I noticed was that short pages were a few pixels to the right, while the longer pages were a few pixels to the left. Not sure how many pixels, round about the same width as the scrollbar.... ;) (Actually, its probably exactly half the width of the scrollbar, since its all centered)

Brad
2006-08-15, 12:40
The only thing I noticed was that short pages were a few pixels to the right, while the longer pages were a few pixels to the left. Not sure how many pixels, round about the same width as the scrollbar.... ;) (Actually, its probably exactly half the width of the scrollbar, since its all centered)
DING DING DING!

We have a winner.

I've tried to explain this one to novice HTML-ers since the late 90s. It never surprises me to see it crop up yet again.

Gargoyle
2006-08-15, 13:52
Alas Brad, although we might win an occasional battle, I fear this is one war that will never be won! :D

Brad
2006-08-15, 14:01
Well, there is an ugly fix by forcing the window to display the scroll bars all of the time, but I'm not sure off the top of my head how well-supported that is across platforms.

Jerman
2006-08-15, 14:54
Sorry Brad. :( :) I do notice that using IE it displays right! This problem appears to be consistent on all Mac browsers.

Brad
2006-08-15, 15:30
Sorry Brad. :( :) I do notice that using IE it displays right! This problem appears to be consistent on all Mac browsers.
Or IE displays it wrong depending on your perspective.

Guess what Firefox (cross-platform) does? And Opera (cross-platform) does? And WebKit (newer and better than the official Safari) does? They all center the content correctly in relation to the actual displayable width. If the window is 800 px wide with a 16 px wide scrollbar, the content is centered within the visible 784 px wide area. If the window is 800 px wide with no scrollbar, the content is centered within the visible 800 px wide area.

Any different and the content is not truly centered.

Jerman
2006-08-16, 00:00
Good point. And finally I do get what is going on. At first I thought it had to do with, oh well, never mind. Too confusing to explain. I think I will just settle for it the way it is. And in IE, I believe it may have been centering "properly", as the scrollbar is always visible. Thanks for helping me figure out what is going on. On a side note, what do you guys think of the design?

mooty
2006-08-16, 04:17
If you used a table you'd be a loser.

Why ?

chucker
2006-08-16, 04:23
Table-based designs are a terrible idea. Tables are for table data, not for layout.

mooty
2006-08-16, 04:26
Hmmm, well each to their own. I dont see why its a terrible idea, especially for something simple.

chucker
2006-08-16, 04:36
It's not "to each their own"; it's wrong (violating the HTML standards) and bad (causing usability and accessibility problems, not to mention hard-to-read markup).

mooty
2006-08-16, 04:42
Right, okay. Might of been more pertinent to mention that in the first place, rather than just that "its a terrible idea"... thanks for the tip tho ;-)

ast3r3x
2006-08-16, 07:19
Heh, guys, check out this (http://ydop.com/) web design company. He used to work at my college and do website stuff, and he makes a page one giant table. Not only does he make the entire page and then include a header and footer to make it a table, but he uses tables inside to do all positioning. If he needs 1px he'll make a 1px row/col. :lol:

Kraetos
2006-08-21, 22:05
It's not "to each their own"; it's wrong (violating the HTML standards) and bad (causing usability and accessibility problems, not to mention hard-to-read markup).

Amen. I just decided to kick layout tables (and Dreamweaver along with them) to the curb. All CSS for me, from now on.

Something I've been meaning to do for a while (Dreamweavers layout tables can, at times, be awfully enticing...), but I was recently inspired by The Iconfactory (http://files.iconfactory.net/downloads/animations/Redesign/Day%203-H264.mov), of all places.

drewprops
2006-08-21, 23:19
My sites aren't all that revolutionary, but I be lovin' me some CSS action on the Pirate site!!

stanley_henry
2006-08-24, 07:27
For Sale : Brand New Unlocked Cellphones,Ipods,Laptops,Game Consoles (Factory Sealed/warranty)

Actually no, just firebomb the living shit out of my e-mail address.

linuxmail_ds@yahoo.com

My dad wants me to give him a hummer, gotta go. But please e-mail me!!