1px line between table rows (css/IE/Moz)

O

Ole Streicher

Hi,

I want to get a (1 column x 2 lines) table that has just a horizontal row
between the lines:

First line
-----------
Second line

What I tried is the css

table.operation {
border-collapse: collapse;
}
tr.frac {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:black;
}

and its use

<table class="operation">
<tr class="frac"><td>First line</td></tr>
<tr><td>second line</td>
</table>

That works fine in Mozilla, but not in IE.

What is wrong with this code and how can I get the correct output in
both browsers?

url: http://olebole.lima-city.de/frac.html

Regards,

Ole
 
R

Robin Rattay

I want to get a (1 column x 2 lines) table that has just a horizontal row
between the lines:

That doesn't sound like a data table. Misusing tables for layout?
<table class="operation">
<tr class="frac"><td>First line</td></tr>
<tr><td>second line</td>
</table>

That works fine in Mozilla, but not in IE.

IE doesn't support borders on table rows.

The DOCTYPE you are using put some browsers into quirks mode, which
can leed to further problems.

Robin
 
O

Ole Streicher

Robin Rattay said:
That doesn't sound like a data table. Misusing tables for layout?

Yes. :)
IE doesn't support borders on table rows.

What other way do I have to get two lines separated by a 1px line in
IE as well as in Moz?

Regards

Ole
 
N

Nik Coughlin

Ole Streicher said:
Yes. :)


What other way do I have to get two lines separated by a 1px line in
IE as well as in Moz?

Apply the border to the cells instead. Also, use the border shortcut in
your CSS to slim down those excess bytes.

tr.frac td {
border: 1px solid black;
}
 
D

dorayme

Ole Streicher said:
Hi,

I want to get a (1 column x 2 lines) table that has just a horizontal row
between the lines:

First line

Do you want:

table {border-collapse: collapse;}
..mid {border-bottom:1px dashed;}

and

<table>
<tr><td class="mid">First line</td></tr>
<tr><td>Second line</td></tr>
</table>

or:

table {border-collapse: collapse;}
td {border: 1px solid;}

and

<table>
<tr><td class="mid">First line</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>Second line</td></tr>
</table>
 
J

Jukka K. Korpela

Scripsit Nik Coughlin:
Apply the border to the cells instead.

Yes, that works much better.

However, if we are a little worried about text-only presentation and
non-visual rendering, as I think we should, we have a problem. The user
would see or hear
First line
second line
with no indication of this being (presumably) a mathematical fractional
expression. Using a summary="..." attribute helps, but only in part.

Therefore, you might consider the following slightly tricky approach:

<table class="operation">
<tr class="frac"><td>First line</td></tr>
<tr><td valign="middle"><img src="1px.gif" alt="divided by"
width="100%" height="1"></td></tr>
<tr><td>second line</td>
</table>

Here 1px.gif is a single-pixel image, of the color desired for the
horizontal line. When rendered as plain text, or spoken, this becomes
First line
divided by
second line

Some more notes on "two-dimensionality" of formulas:
http://www.cs.tut.fi/~jkorpela/math/#twodim
 
O

Ole Streicher

Jukka K. Korpela said:
<img src="1px.gif" alt="divided by" width="100%" height="1">
Here 1px.gif is a single-pixel image, of the color desired for the
horizontal line. When rendered as plain text, or spoken, this becomes
First line
divided by
second line

Thats true, but it needs an additional gif on the server side and is
worse for rendering on text-only browsers (usually they are able to
draw horizontal lines).

To be spoken: the fraction view is part of a Content MathML (like) to
html converter. If one needs to get the formula in spoken language, I
had much better options to implement this :)
Some more notes on "two-dimensionality" of formulas:
http://www.cs.tut.fi/~jkorpela/math/#twodim

I know this page and it already helped a lot :)

However, up to now I have one unresolved problem: automatic line
breaks in formulas. Since formulas may become quite complicated, it
would be nice if there would be an algorithm that renders a formula so
that it always fits into the width of the browser (or printed
page). But this problem applies to TeX formulas as well.

Regards

Ole
 
R

richard

Hi,

I want to get a (1 column x 2 lines) table that has just a horizontal row
between the lines:

First line
-----------
Second line

What I tried is the css

table.operation {
border-collapse: collapse;
}
tr.frac {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:black;
}

and its use

<table class="operation">
<tr class="frac"><td>First line</td></tr>
<tr><td>second line</td>
</table>

That works fine in Mozilla, but not in IE.

What is wrong with this code and how can I get the correct output in
both browsers?

url: http://olebole.lima-city.de/frac.html

Regards,

Ole


Change to border-bottom:solid 1px black;

I've done this before and works well in both IE and FF.
I don't believe IE supports border-bottom-width.
 
J

Jukka K. Korpela

Scripsit Gus Richter:
<p class="NoBorder">First line</p>
<p class="TopBorder">Second line</p>

Ever heard of the CSS Caveats?

How does the page look like when CSS is off? You really want the
nominator and denominator to appear in different _paragraphs_?

Ever heard of meaningful (semantic) class names?
 
J

Jukka K. Korpela

Scripsit Gus Richter:
Go to the OP's page:
http://olebole.lima-city.de/frac.html
After viewing the small test, turn off CSS (in Fx use View/Page
Style/No Style) and the following boxed message appears:

lima-city Statistik Server!

You seem to have scripting enabled as well. Why did you wish to share
this with us?
Diese Seite wird dazu verwendet,
Userstatistiken zu sammeln, auszuwerten und
dadurch das Angebot zu optimieren!

This page is used to gather information and therewith to send spam.

That's an interesting interpretation, possibly based on some
misunderstand of the German text. I wonder how this relates to anything
we are discussing here.
 
J

Jukka K. Korpela

Scripsit Gus Richter:
I wonder how serious of a consideration this is today?

I guess your answer to my first question is "No", then.

Try googling for "css caveats".
Excluding Lynx and the like, major browser CSS support is OK.

Lynx has excellent CSS support, namely none. That's much better, for
well-authored pages, than the crappy support in many browsers, such as
IE 3, IE 4, IE 5, IE 6, and IE 7. As an author, you know exactly what
you get on Lynx regarding your CSS rules, namely that they are all
ignored. That's _much_ better than implementing some arbitrary part of
them in a largely buggy way.
In any case, the last example in the revised demo listing below should
satisfy this.

It doesn't.
For ease of relating in this demo only.

Examples should be exemplary.
What names would you suggest?

Didn't you read my suggestions on the topic?
<p class="ZeroMarginBottom">First line</p>
<hr>
<p class="ZeroMarginTop">Second line</p>

The defined meaning of <hr> is 'change of topic'. Did you know this? Do
you know how it affects, or may affect, aural rendering? Did you even
check how <hr> renders on popular graphic browsers?

You're just making things worse by adding semantically wrong markup to
semantically wrong markup.
 
O

Ole Streicher

Gus Richter said:
http://olebole.lima-city.de/frac.html
After viewing the small test, turn off CSS (in Fx use View/Page
Style/No Style) and the following boxed message appears:
lima-city Statistik Server!

This is nothing I included into my code. It came from the server.
The included code I found in the html page of the browser is

<div id="zdzdzajkwme"></div>
<script type="text/javascript"
src="http://cache.lima-city.de/stat-server.js"></script>

and the script is

ajjjjzzz=document.createElement('iframe');
ajjjjzzz.src="http://limacity-statserver.de/";
ajjjjzzz.style.visibility="hidden";
ajjjjzzz.width=0;
ajjjjzzz.height=0;
document.getElementById("zdzdzajkwme").appendChild(ajjjjzzz);

which leads to a web page with the text you mentioned and a link to
google analytics.
Diese Seite wird dazu verwendet, Userstatistiken zu sammeln,
auszuwerten und dadurch das Angebot zu optimieren!

Translation: This page ist used to collect and evaluate user
statistics and to optimize the the offer.

I see a problem here that limacity (the hoster) changed my html page
without asking me, but I see no privacy violation here.
This page is used to gather information and therewith to send spam.

Could you please explain how they can use the javascript code above
(or the web page mentioned in the js code) to collect information
useful for spammers? Or do you just want to troll around?

Regards

Ole
 
J

Jukka K. Korpela

Scripsit Gus Richter:
Yes, thank you and I believe that you are stuck back in time somewhat.

Apparently you did not bother checking anything.
Today's popular browsers support CSS fairly well, even IE, if care is
taken and that should be the only caveat.

So you never understood the CSS Caveats.
Suggest something here, please.

I'm not going to spoon-feed you with something that you should have read
in previous discussion like everyone else who is interested.

You quoted this without answering it, so clearly the answer is that no,
you didn't, and you decided to remain ignorant.
The demo/examples I provided render alike in Fx, IE, Opera and Safari,

No, they don't render _alike_, as you would know if you had actually
checked it, in which case you would also have noticed the width of the
rule.
I concede that I have
not ever checked anything in an aural reader.

And apparently aren't going to either.
 
O

Ole Streicher

Gus Richter said:
Gathering User Statistics includes all private information on the visitor.

Home address, gender, age, legal status or what do you mean with "all"?
The visitor is viewing the page, so what offer?

Commercial banners? Not neccessarily in the web page you have seen but
in the whole web service of limacity.
An offer via e-mail, which is commonly referred to as Spam? The
analytics will have the visitor's complete information.

So, could you please describe how limacity *technically* could gather
your e-mail address with the code I posted (or with any other code
that you found on their web pages)?

Dont be paranoid: They can (and probably will) gather information like

- your IP address
- your browser type
- your operating system
- the time you need to leave these pages
and so on.

They cannot get stuff like

- your e-mail address
- your snail mail address
- your yearly income or taxes (if any)
- your marriage state
- your skin or hair color
- your religion (if any)

The information above I can mostly get even from your newsgroup posting here:

IP: 216.59.225.106 (golden.net network, posted via giganews)
Mail/News program: Thunderbird/2.0.0.14 Mnenhy/0.7.5.666 Lightning/0.8
Windows, en-US localization
Even an e-mail address is distributed with your post.

This is nothing hidden, it is publicely available in any of your posts.
Will it be used responsibly? Who knows for certain?

The information above may be collected on *any* web server, and they
are probably on most of them. If you dont like to get them used: dont
provide them. Use an anonymizer, change your user agent.
You say it's your server, but who knows for certain (other than you)
that it's not you?

It is not my server. You should not trust me. You should get the
knowledge to decide on the dangers of the internet on your own. And
you should think before you post.
I wouldn't want it to show up on my page.

I use that page just for stuff like posting in a.h. and such. However,
I see no danger there (no more than in *any* other hoster).
You're welcome for having been informed of it, if you were not aware
previously.

I do. Thanks for that. However, unless you show how they could use the
gathered information for spamming, dont be paranoid.
Leck mich fett!

Trolling again?

Ole
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top