Log in

View Full Version : CSS Alignment Help


southern
08-13-2006, 02:11 PM
I am trying to use the script Pausing Up-down Scroller http://www.dynamicdrive.com/dynamicindex2/crosstick.htm on my website. I have the script itself working, but the issue is that I can not get the box that is created using the CSS to align to the center of location that I want it.

I am using the script listed on the above page, as is, with the larger box, but I can't get the box to center, here is the CSS code:

#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}
Twey
08-13-2006, 02:54 PM
Try:
margin: 0 auto;
southern
08-13-2006, 03:00 PM
It looks like that did it, thanks for the help.
southern
08-13-2006, 03:53 PM
Oops, I though it worked, well it did in Firefox, but it still is not centered in IE. Any suggestions? Here is the page I am working on http://www.southernrescue.org, any help will be apperaciated as this is for our non-profit.
Twey
08-13-2006, 04:09 PM
Oh, I forgot about IE. Also use:
text-align: center;
southern
08-13-2006, 04:12 PM
Hmmmmm,

That centered the text in the box in Firefox, and it "centered" it in the box in IE, but it did not center the box itself in IE. Let me know what you think, I might just leave it like it was.
Twey
08-13-2006, 04:29 PM
Gah, IE.
There's one other rather nasty hack you can use, which is to put the element inside a three-cell table with each cell width set to 33%.
southern
08-13-2006, 04:51 PM
LOL, I think I'll leave it as is and let the IE people think about why it's not centered
mwinter
08-13-2006, 06:54 PM
Oh, I forgot about IE. Also use:
text-align: center;

You didn't mention that that should be applied to the parent element, and it should only be necessary for versions of MSIE earlier than 6. That is, unless the document triggers Quirks mode.

Mike
southern
08-13-2006, 07:25 PM
In the above mentioned script, were would it be placed to be considered applied to the parent element?

I perosnally am still learning CSS and have very little experience in using it, expect what is already included with site templates I might be working with.

Any help is welcome.
Twey
08-13-2006, 07:27 PM
The element in which you put the div.
southern
08-13-2006, 07:29 PM
ok, i'll look again. I think I tried it once and it moved all the text to the center, but not the box. If this does not work, then I'll leave it as I have it, where in Firefox it looks right and in IE the box is just off the the left of the center.

Thankfully it does not throw it off to much.

Thanks
mwinter
08-13-2006, 07:39 PM
The alternative is to try triggering Standards mode by including an appropriate document type declaration. However, that might matters worse for other aspects of the document if you're relying on Quirks mode bugs. Still it's perhaps worth a shot.

Adding



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

before the html start-tag should fix IE 6, though IE 5.5 and earlier will be in the same boat if you can't correct the problem using the text-align property. Those older versions have a less numerous user base, but if you're happy to leave IE 6 users in the lurch, I doubt you'll mind about the others, either. :)

If adding the document type declaration screws up other things, remove it. However, remember that that's an indication that you're relying on bugs to get your document to render properly, and at some point in the future (particularly during a redesign), it would be a good idea to re-implement the site.

Good luck,
Mike