Sent by Eric A. Meyer on 25 June 2002 12:12
At 9:22 -0700 6/25/02, Chris Smith wrote:
>Can anyone have a look at this site
>http://www.rpgme.com/index.jsp and tell me what I've
>done wrong to cause the text to do that?!
>
>It looks good on IE5.1 on the Mac, but horrid on NS6.2
>Mac & Windows, and IE6 on Windows.
Here it is:
.newsbite {
font-size: small;
font-family: serif;
background: #fff;
color: #000;
padding: 10px;
}
You set the background of any element with a 'class' containing
the word 'newsbite' to be white, and you gave such elements padding.
But in your HTML, the newsbites are 'span' elements. Convert them to
'div' elements and I think you'll get what you actually want.
Alternatively, you could add the declaration 'display: block' to the
above rule, but that may lead to significant weirdness in older
browsers.
Ditto for any other 'span's that you're using as if they're
'div's. Inline elements and block element act in very different
ways. What's happening on your page is that the padding of each line
is overlapping the lines to either side, and the background is
overwriting the text of preceding lines. To see it more clearly, you
could try the following temporary styles:
.newsbite {
font-size: small;
font-family: serif;
background: transparent;
color: #000;
padding: 10px;
border: 1px dotted gray;
border-color: red gray green gray;
}
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
