First div class=something not showing background or borders (IE only)

[eslachance]

Hey there,

Thanks for your help in previous matters. Now I have something new that
popped up just recently.

I'm displaying a blog, and each blog title is in a div with a class of
"title" (<div class="title">Blog Title</div>)

The css is:

div.title { font-weight: bold; font-size: 14pt; border-bottom: 1px
solid; border-top: 1px solid; padding: 0 10px 0 10px; background: #DDD;
margin: 20px 0 10px 0;}

Now, I have more than one of these entries evidently, but for some
goddamed reason, the first one refuses to display the background color
and borders, and the second one does it intermittently (if I select the
text, sometimes they dissapear).

The weirdest thing is, firefox displays it properly, but IE messes it
up.

The URL for the page is:
http://b2blog.sh.nu:81/users/test/

The "Recent Entries" page does this, and "Links" actually doesn't show
the background and borders under any circumstances... (remember firefox
users, you won't see the problem).

Help!
Eric

 

[Mark Parnell]

I'm displaying a blog, and each blog title is in a div with a class of
"title" (<div class="title">Blog Title</div>)

Why? Surely they are headings? h2 seems most likely after a quick look.

div.title { font-weight: bold; font-size: 14pt;

Points are a paper measurement. They are mostly meaningless on screen.
Plus IE users won't be able to resize the text. Use % or em.

Now, I have more than one of these entries evidently, but for some
goddamed reason, the first one refuses to display the background color
and borders, and the second one does it intermittently (if I select the
text, sometimes they dissapear).

Hmmm...the peekaboo bug[1] is the only one that springs to mind, but
generally it's the text that would disappear, not the border and
background.

The weirdest thing is, firefox displays it properly, but IE messes it
up.

And we're surprised about this because...? ;-)

[1] http://www.positioniseverything.net/explorer/peekaboo.html

 

[eslachance]

Why? Surely they are headings? h2 seems most likely after a quick look.

Well, I actually set everything from font size to weight so it won't
really matter anyways if it's div or h2...

Points are a paper measurement. They are mostly meaningless on screen.
Plus IE users won't be able to resize the text. Use % or em.

I'll keep that in mind, thanks.

Now, I have more than one of these entries evidently, but for some
goddamed reason, the first one refuses to display the background color
and borders, and the second one does it intermittently (if I select the
text, sometimes they dissapear).

Hmmm...the peekaboo bug[1] is the only one that springs to mind, but
generally it's the text that would disappear, not the border and
background.

Well well, following different links almost at random (just kidding) I
ended up on a page that said most bugs are fixed using position:
relative ... I slapped that into my div and Voilà! bug is gone.
Ref: http://www.communitymx.com/content/article.cfm?cid=C37E0

The weirdest thing is, firefox displays it properly, but IE messes it
up.

And we're surprised about this because...? ;-)
Right.


[1] http://www.positioniseverything.net/explorer/peekaboo.html

Thanks for the info Mark, it's very much appreciated!

 

[Mark Parnell]

Well, I actually set everything from font size to weight so it won't
really matter anyways if it's div or h2...

Forget the visual presentation for a minute. Think only of the HTML. If
it's a heading, mark it up as such. If it's a paragraph, likewise. If
it's a list, mark it up as a list, etc. If it can't logically be marked
up as anything else, *then* you use a div or span.

Well well, following different links almost at random (just kidding) I
ended up on a page that said most bugs are fixed using position:
relative ... I slapped that into my div and Voilà! bug is gone.

Good to hear. Um, see. Er, whatever.

Ref: http://www.communitymx.com/content/article.cfm?cid=C37E0

Written by the same people who do positioniseverything.

Thanks for the info Mark, it's very much appreciated!

You're welcome.