By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

borders of collapsed block disappear

P: n/a
This may seem a pointless question, but I'm trying work around an
inconsistency between browsers.

I have a template that contains a division that holds a text that
sometimes exists and sometimes not. I use top and bottom borders to
separate this material from its environment:

.header {
font-size: smaller;
border-bottom: solid black thin;
border-top:solid black thin;
margin-top: 0.2em;
margin-bottom: 0.2em;
}

...

<div class="header">
<p>
header text...
</p>
</div>

When there is no text to use as a header, I remove the paragraph
container (so that the division completely collapses). On one browser,
the two borders nicely converge to become a single line, which is what
I want. But on IE5, the border simply disappears.

How can I get IE5 to print the border even though there's nothing in
the division container?
--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article Haines Brown wrote:
This may seem a pointless question, but I'm trying work around an
inconsistency between browsers.

I have a template that contains a division that holds a text that
sometimes exists and sometimes not. I use top and bottom borders to
separate this material from its environment:
[snip code]
When there is no text to use as a header, I remove the paragraph
container (so that the division completely collapses). On one browser,
the two borders nicely converge to become a single line, which is what
I want. But on IE5, the border simply disappears.

How can I get IE5 to print the border even though there's nothing in
the division container?


Try printing <!-- comment --> in place of content. May work, or may not.
(there is cases where this does help IE5 to get things right.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

P: n/a
Lauri Raittila <la***@raittila.cjb.net> writes:
In article Haines Brown wrote:
This may seem a pointless question, but I'm trying work around an
inconsistency between browsers.

I have a template that contains a division that holds a text that
sometimes exists and sometimes not. I use top and bottom borders to
separate this material from its environment:


[snip code]
When there is no text to use as a header, I remove the paragraph
container (so that the division completely collapses). On one browser,
the two borders nicely converge to become a single line, which is what
I want. But on IE5, the border simply disappears.

How can I get IE5 to print the border even though there's nothing in
the division container?


Try printing <!-- comment --> in place of content. May work, or may not.
(there is cases where this does help IE5 to get things right.)


Good thought, but unfortunately, does not work. I also tried the same
by using <p class=... >... instead of <div class=...><p>..., but a
paragraph suffers the same fate as a division: without content, it
looses its borders; with content, the borders don't converge.

I even tried this:

div.Z1 { border-top: solid thin; }
div.Z2 { border-bottom: solid thin; }

Oddly, each div here creates a line which is entirely independent of
the other, but if one div immediately follows the other, the lines
disappear!

I found a solution to the problem, but it creates another problem in
IE5:

div.Z1 {
height: 1px;
background-color: black;
}
div.Z2 {
height: 1px;
background-color: black;
}
...
<div class="Z1"></div>
<!-- no content -->
<div class="Z2"></div>

<div class=Z1"></div>
<p>Content</p>
<div class="Z1"></div>

This looks ugly on paper, but works nicely with my usual browser
(galeon). But when it comes to IE5, while I do now get a single line
with no content, and I get lines above and below some content, for
some odd reason, IE5 won't allow me to create a block that is 1 pixel
high. Instead, the single lines look like, say, 1 em, and the double
line is twice as thick. Is this minimum block size a known behavior of
IE5? This approach would probably work under IE5 if I could figure out
how to create a 1px high box.

I tried definining line-height as 0 em in Z1 and Z1, but no effect. I
tried to use a 0.5px border instead of background-color. This time,
with or without content, the line disappears as before.

--
Haines Brown

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.