Why not another news box question!

[Miluette]

You can always put it in a table or a table's cell where the contents is centered. I know that works.

It's already like that.

Yes, I'll try that other method soon... as soon as I figure out where I can relocate the box to.

[fesworks]

You can always put it in a table or a table's cell where the contents is centered. I know that works.

It's already like that.

Yes, I'll try that other method soon... as soon as I figure out where I can relocate the box to.

You don't have the contents centered (different from text paragraph being centered)... within the "td" tag you should have align="center"

[griever]

If I remember correctly, Fes' suggestion is different from what you have, actually.  Putting the align=right in the actual HTML tag vs. the text-align: right in the CSS is different.  I'd try that and see if it works.

If it doesn't, you can still have the nested div right under the table without having spacing/positioning problems.  Just pop it under and play with the CSS.  If you need any help, you have my LJ.

[Miluette]

fesworks: oh... oh! I forgot about that.

LOL. Story time: A long time ago, before I fully understood the WC3 validator, I got a ton of errors on my websites and went about fixing them the wrong way. Of course, it told me things like the "img" tag couldn't have "alt" and other such weird things just because I screwed up something that badly. It told me a lot of things like that for tables, and hence I stopped putting "center" on things to avoid hassle. I know more now, a lot more, but it's still habitual of me to forget that I can, in fact, assign center to td and soforth.

While I'd rather not tag up my tables (which is why I'm learning div/float/argghh), I don't really have a choice and it's pretty simple anyway.

I'm gonna mess around...later! Right now is break time <3

EDIT: Ah I went ahead and tried. And no, that didn't work. I had a feeling it wouldn't, because I've tried that with certain things before and had it not work. Oh trauma. XD Now for the other method.

EDIT TWO: Okay, so I put in griever's code and now it...stays at the right! Which is also not centered.

[griever]

Try moving the nested DIVs completely outside of the TABLE structure?

[Miluette]

It still does the same thing.

[griever]

Oh, duh.  >.<  Take out the float:right and that might fix it.

[Xepher]

I'm working on this one right now...

[Xepher]

Okay, got it... I directly edited the file again. The old css has been saved as "oldhub.css" just in case. Reduced the index.php file to only have one "id=xepher" div around the newsbox script. The CSS file now only has:

Code Select Expand

#xepher {
        margin: auto;
        width: 500px;
        padding: 0;
}
to center the box.

The key is that if you use the "margin: auto;" thing to center stuff, you must specify a width. I set the width to exactly the size of the newsbox, because it centers better that way. IE (at least 6.x) renders stuff weird, so "padding:0" hopefully keeps IE from cropping the edges of the box. If it's still cropping, set the width a tad larger, to 505px or something, until it looks okay again. If it doesn't center at all in IE, you may need to set "text-align: center;" for the body tag. I REALLY hate having to do all these stupid hacks to make IE work correctly. I haven't tested with IE7 much though, so maybe it's better now.

[Databits]

Some browsers will cascade the margin: auto as well as the text-align thing down into the news box. This is actually a good thing because that's how it's supposed to work. The problem being that there's a lot of browsers that do not implement that properly, and therefore a lot of people aren't used to that. Generally it's a good idea to set the alignment within every element that is displaying text, image, or some object content. That's the only way to make sure that it'll display it properly across all the different browsers.

IE also has an overflow bug, where if you have something set with a width, and set something inside of it with a width: 100%, the internal element "overflows" the container by around 15-20 pixels for no good reason. This is an IE specific bug because the box model they use is retarded. I am unsure what the fix for that was at this time though.

[Xepher]

The padding: 0 is supposed to fix some of that IE overflow. IE computes a box size AFTER all margins and borders have been added, whereas the standard says borders/margins aren't included... or something like that. Bottom line is, IE sucks, so if you want it to look right there, test it there and keep tweaking. :-)

[griever]

Ahh, that completely makes sense now.  Minus the IE weirdness.  Thanks for the corrected version, Xepher!  I was also able to eliminate the #xepher2 DIV as well.  And cleaner code is always better.

[Databits]

Ahh right, that's how I'd fix it. Even in tables, rather than using padding I'd use divs with margins to properly space things out. Thank you IE for making web development life a pain in the ass. 

[Miluette]

Yay! I love stuff that works. I just hope what you're doing sinks in. I seriously forget all these little things that make stuff look right in ALL browsers.

On another note... IE7 has not been loading pages for me, and I have NO freaking clue how to get in and modify any of its settings because it doesn't have that bar at the top. IE7 just makes me rage, so I try not to think about it anymore.

The other day I checked to see what kind of browsers people who come to my websites have. I got several IE5 hits. I know for a fact that my websites will NOT look good in IE5. @_@

[Databits]

If people are still using IE5, screw em. Most the web development community doesn't even support it anymore. IE6 or higher, either upgrade or stop using the internet.