Centering in Firefox and Opera?

[hymer]

Hello,

I have some HTML code that is working well and is centered in IE6 but the scroll box will not center in Opera or Firefox.

There is a PHP Include there that is working properly and the title text is centered. It is just the scroll box that is not centered.

I am new to coding and was wondering if anyone can see what I may have done wrong?

The code is below.

Thanks a lot,

Bob

--

<!-- RSS Feed Reader Usability In The News -->
<?php unset($arnews);?>

<div class="centerall"><a href="http://www.example1.com/news/user-interface-design-news.html" title="In The News">Usability In The News</a></div>
<div class="centermedium">Latest Headlines

<div class="scroll">
<?php
include
("http://www.example2.com/rss3/rss.php?url=[edited]"
[line break added].$HTTP_SERVER_VARS['SERVER_NAME'].$HTTP_SERVER_VARS['PHP_SELF']."&phpout=1");
?>
</div>
<div class="centermedium"><a href="http://feeds.example3.com/News" title="Usability News Feed"><img src="images/site/rss.gif" alt="Usability In The News RSS Feed"></a></div>
</div>
<!-- /RSS Feed Reader Usability In The News -->

[edited by: tedster at 3:25 am (utc) on July 29, 2005]

[cuce]

can we see your css?
if you add these two things, everything should center in any of those browsers...

body{text-align:center;}
/* centers blocks ie cause ie is silly and won't listen to auto margins */

#centerall{margin:0px auto 0px auto;}
/* this is the proper way to center a block supported by firefox and other compliant browsers*/

[cuce]

oops make that .centerall
not #centerall

[hymer]

Hi cuce,

Thanks for looking at this. Below are two controlling CSS items. Note that the text within the scroll box is left justified but the box itself is centered as well as the title text.

Keep in mind that I am new to this so the CSS may well be off.

Thanks,

Bob

--

div.scroll {
height: 200px;
width: 147px;
overflow: auto;
text-align: left;
border: 2px solid #999;
background-color: #ccc;
padding: 0 0px 0px 0;
margin: 0px 0px 0px 0px;
float: center;
}

.centerall{
text-align:center;
font-size: 120%;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 20px 0px 5px 0px;
}

[cuce]

div.scroll {
height: 200px;
width: 147px;
overflow: auto;
text-align: left;
aha :) float:center; I see thats your problem.
If float:center; was real it might just be very handy, but it is not valid. This Should fix things:

body{
text-align:center
}
/*to center with css in ie you have to center align text on your
body or like root element*/

div.scroll {
height: 200px;
width: 147px;
overflow: auto;
text-align: left;
border: 2px solid #999;
background-color: #ccc;
padding: 0 0px 0px 0;
margin: 0px auto 0px auto;
}
/* auto margins is the proper way to center a block with css and will work with almost all browsers except ie */

.centerall{
text-align:center;
font-size: 120%;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 20px 0px 5px 0px;
}
/* this one should be fine as far as I can tell */

If I'm not mistaken that should do it.

[hymer]

Hello cuce,

That worked perfectly in all three browsers. Thanks so much for taking the time to do this.

I must say that the body CSS surprised me.

body{
text-align:center
}

I would have guessed that all the text on the page would have been centered but that's not the case.

Thanks again cuce,

Bob

[SugarKane2]

margin-left: auto; margin-right: auto will work in IE6 if you use the right doctype.

Letting it lapse in to quirks mode is what causes the need for text-align: center.

[hymer]

Hello Again,

I seem to have one last problem with this code.

I have the two almost identical scroll boxes working fine except for the horizontal scroll bar in the first box. The horizontal bar should not be showing at all but it does in the first box only.

The problem is not with the coding because I can switch boxes and it is always the first box only that is the problem regardless of what is presented in it.

I think it is probably a small </div> error or general formatting error that I am not seeing because I am new to coding. You can assume the PHP and Includes are correct.

You can see the problem at: <SNIP> . My current CSS and HTML are below if that's more convenient.

Can someone see what mistake I am making?

Thanks a lot,

Bob

__

div.scroll {
height: 175px;
width: 145px;
overflow: auto;
text-align: left;
border: 2px solid #999;
background-color: #ccc;
padding: 0 0px 0px 0;
margin: 0px auto 0px auto;
}

.centerall{
text-align:center;
font-size: 120%;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 20px auto 5px auto;
float: center;
}

.centermedium{
text-align:center;
font-size: 85%;
font-weight: normal;
padding: 5px 0px 5px 0px
}

__

<!-- RSS Feed Reader Usability In The News -->
<?php unset($arnews);?>
<div class="centerall"><a href="<SNIP>" title="Title">Text</a></div>
<div class="centermedium">Latest Headlines
</div>

<div class="scroll">
<?php
include ("<SNIP>");
?>
</div>

<div class="centermedium"><a href="<SNIP>"><img src="images/site/rss.gif" alt="Text"></a></div>

<!-- /RSS Feed Reader -->

<!-- /RSS Feed Reader -->
<?php unset($arnews);?>
<div class="centerall"><a href="<SNIP>" title="Title">Text</a></div>
<div class="centermedium">Latest Headlines
</div>

<div class="scroll">
<?php
include ("<SNIP>");
?>
</div>

<div class="centermedium"><a href="<SNIP>" title="Title"><img src="images/site/rss.gif" alt="RSS Feed"></a>
</div>
</div>
<!-- /RSS Feed Reader -->

[edited by: BlobFisk at 9:48 am (utc) on Aug. 2, 2005]
[edit reason] No specifics! See TOS [webmasterworld.com] [/edit]

[hymer]

Sorry everone. I got the answer and it had nothing to do with the coding. One title in the scroll box was too long. There were no spaces between several words. Once I repaired that at the original souce, the problem went away.

So I apologize if anyone spent much time on the code.

Thanks Everyone,

Bob