473,378 Members | 1,384 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

borders of collapsed block disappear

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
2 2395
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: David Walker | last post by:
Can someone please confirm my suspicion that IE5 on Windows is including borders in the dimensions of a block object? The block in question has the following css: div.headerbox { position:...
4
by: David Ross | last post by:
In my <http://www.rossde.com/inflation.html>, I have a small table in the middle of the page. This page is composed without a DOCTYPE statement at the beginning. The table borders appear to my...
7
by: NeverLift | last post by:
I posted a very long message regarding my experiences with JavaScript, one reply was posted asking I post an example of the problem -- and both are gone! Is there a moderator that removes such...
2
by: Jacob | last post by:
I'm trying to create an MDI form where the MDI area dosn't have the traditional 3D borders. I thought at one point the code I had in the form constructor was working, but now I'm getting an MDI...
2
by: 50295 | last post by:
Hello, I'm building a menu for a page, like this (snippet): <td align="center"> <a href="#" style="display:block">Contact</a> </td> As a result, I get nice clickable tabs. However,...
2
by: Rick | last post by:
Let me start by saying that I know very little about JavaScript. The software that I use to convert my FrameMaker files to HTML uses a JavaScript to hide certain text. The user has to click the...
11
by: Schraalhans Keukenmeester | last post by:
I have tried to collapse a long part of a text on my weblog using the following construct: <style> div.expand { display : none; } div.expand:hover (display : inline; } div.expand em {display :...
15
by: Davo | last post by:
Hello, I've created a table with two columns, the second column is fixed width at 64px and contains a div, the div has a border and contains some text, the text renders to larger than 64px. This...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.