How to imitate a line 1 pixel thick?

[marss]

<hr style="height:1px"/> does not fit because although a line looks
like it has 1 pixel with but there are empty spaces above and below
line. It can be seen if place two HR elements beside.
<hr style="height:1px"/>
<hr style="height:1px"/>


I tried also <div style="height:1px;font-size:1px;background-
color:black;"></div> but a line was 2 pixel thick

Help, if you can.
Mykola
http://marss.co.ua

 

[Jukka K. Korpela]

Scripsit marss:

<hr style="height:1px"/> does not fit because although a line looks
like it has 1 pixel with but there are empty spaces above and below
line.

You might be able to affect the situation by adding CSS rules for margins
etc., but the problem is that the default rendering of HR elements has not
been defined in CSS terms. Different browsers interpret HR elements
differently.

The simple way is to set a bottom or top border for some "real" element,
e.g.

<div style="border-top: solid 1px black">...</div>

 

[marss]

<div style="border-top: solid 1px black">...</div>

Thanks, this is exactly what I sought.

 

[marss]

The simple way is to set a bottom or top border for some "real" element,
e.g.

<div style="border-top: solid 1px black">...</div>

I simplified above example for clarity and was smarted for it .
Actually I need a horizontal (black) line 1 pixel thick with a (red)
dot on one of its ends.
Something like this:
<div style="border-top: solid 1px black;border-left: solid 1px red"></
div>
But it does not work.

Is it possible?
Thanks,
Mykola

 

[Els]

I simplified above example for clarity and was smarted for it .
Actually I need a horizontal (black) line 1 pixel thick with a (red)
dot on one of its ends.
Something like this:
<div style="border-top: solid 1px black;border-left: solid 1px red"></
div>
But it does not work.

<div style="
border-left:1px solid red;
background:black;
height:1px;
overflow:hidden;">
</div>

I don't understand the 1px dot though - it's hardly noticeable..

 

[marss]

<div style="
border-left:1px solid red;
background:black;
height:1px;
overflow:hidden;">
</div>

It works! Thanks.

I don't understand the 1px dot though - it's hardly noticeable..

I try to draw a circle by means of html elements.

 

[Arne]

I simplified above example for clarity and was smarted for it .
Actually I need a horizontal (black) line 1 pixel thick with a (red)
dot on one of its ends.
Something like this:
<div style="border-top: solid 1px black;border-left: solid 1px red"></
div>
But it does not work.

Is it possible?
Thanks,
Mykola

How about this:

hr {height:1px; border-style:solid; border-width:1px 0 0;
border-color:#000;}

Works as above for me in a externas CSS file. Not exactly the same
visuality in IE than Gecko browsers (more space above and under in IE),
but it was the closest I could get.

 

[marss]

How about this:

hr {height:1px; border-style:solid; border-width:1px 0 0;
border-color:#000;}

Works as above for me in a externas CSS file. Not exactly the same
visuality in IE than Gecko browsers (more space above and under in IE),
but it was the closest I could get.

Thanks, Arne, but it does not fit. Look at the original post.
Mykola

 

[Jukka K. Korpela]

Scripsit marss:

I try to draw a circle by means of html elements.

Why didn't you say so in your first posting? That would have saved
everyone's time. It's an exercise in futility. If you want a circle, use an
image.

 

[marss]

Why didn't you say so in your first posting? That would have saved
everyone's time. It's an exercise in futility. If you want a circle, use an
image.

hum... image... What is it?

 

[Chaddy2222]

hum... image... What is it?

One of those picture things.
In other words, draw an image / picture of a sircle (in an image
editing program such as photoshop), and then include / insert it in to
your page. You should probably just use it as a background image in
the CSS as it's for dederation only.

 

[dorayme]

<div style="
border-left:1px solid red;
background:black;
height:1px;
overflow:hidden;">
</div>

I don't understand the 1px dot though - it's hardly noticeable..

Curiously, leaving the overflow out,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Curiousity</h1>
<div style="border-left: 1px solid red; background:black; height:
1px;">some text</div>
</body>
</html>

iCab renders the border as a "strike through" the text

 

[Els]

Els <[email protected]> wrote:

[fake hr with red dot]

Curiously, leaving the overflow out,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Curiousity</h1>
<div style="border-left: 1px solid red; background:black; height:
1px;">some text</div>
</body>
</html>

iCab renders the border as a "strike through" the text

That's not the border, but the black background. Looks like iCab does
exactly what it should - have the div 1px high, even if the text spills
out of the box

 

[Chris F.A. Johnson]

hum... image... What is it?

echo "%!PS
100 100 100 0 360 arc stroke" > circle.ps
convert -trim circle.ps circle.png

 

[dorayme]

That's not the border, but the black background. Looks like iCab does
exactly what it should - have the div 1px high, even if the text spills
out of the box

OK, to be more exact, iCab renders the background as a "strike
through" the text and does exactly what it should and all the
other browsers that I have, FF, Opera, Safari, Mac IE, do the
wrong thing by putting the text underneath the background.

 

[Els]

OK, to be more exact, iCab renders the background as a "strike
through" the text and does exactly what it should and all the
other browsers that I have, FF, Opera, Safari, Mac IE, do the
wrong thing by putting the text underneath the background.

Point taken

No idea why iCab spills the text both at the top and the bottom, or,
why the other browsers only do it at the bottom of the div.

Out of curiosity: what happens if you put enough text in to let the
line wrap to three lines - does iCab put a strike through the middle
line, or just the top line? And if you enlarge the text to 200% - does
the strike still go through the middle, or more through the top half
of the letters?

 

[dorayme]

Point taken

No idea why iCab spills the text both at the top and the bottom, or,
why the other browsers only do it at the bottom of the div.

Out of curiosity: what happens if you put enough text in to let the
line wrap to three lines - does iCab put a strike through the middle
line, or just the top line? And if you enlarge the text to 200% - does
the strike still go through the middle, or more through the top half
of the letters?

The source at

<http://members.optushome.com.au/droovies/test/iCabCuriousity/iCab
Curiosity.html>

has the effect on iCab/Safari of

<http://members.optushome.com.au/droovies/test/iCabCuriousity/iCab
Curiosity.png>

This is an interesting curiosity indeed. Basically, it becomes a
mess but one can see in the phenomena that the lines are wrapping
over themselves! The sentence in the source code of the first of
the two urls above can be reduced in iCab to very small sizes
indeed and stretched in browser over a very large desktop to give
the perfect 'strike thru' effect. But when the browser is reduced
to induce wrapping, you get text that wraps over itself.
Enlarging the text just makes a bigger blacker mess and brings it
on earlier.

Surely this one needs a place in a browser phenomena museum.

 

[Els]

The source at

<http://members.optushome.com.au/droovies/test/iCabCuriousity/iCab
Curiosity.html>

has the effect on iCab/Safari of

<http://members.optushome.com.au/droovies/test/iCabCuriousity/iCab
Curiosity.png>

This is an interesting curiosity indeed. Basically, it becomes a
mess but one can see in the phenomena that the lines are wrapping
over themselves! The sentence in the source code of the first of
the two urls above can be reduced in iCab to very small sizes
indeed and stretched in browser over a very large desktop to give
the perfect 'strike thru' effect. But when the browser is reduced
to induce wrapping, you get text that wraps over itself.
Enlarging the text just makes a bigger blacker mess and brings it
on earlier.

At least it's consistent then - only got 1px of space, so let's just all
pile up

Surely this one needs a place in a browser phenomena museum.

I just had to test this some more, so I downloaded iCab: it appears the
line-height of the text is taken from the height of the parent. If i set
the height of the div to 20px, only the first line disappears against
the black background, while the next lines neatly wrap below it. If I
choose a 5px height, the text starts wrapping over itself already.
Setting an explicit line-height doesn't help though...

 

[dorayme]

At least it's consistent then - only got 1px of space, so let's just all
pile up


I just had to test this some more, so I downloaded iCab: it appears the
line-height of the text is taken from the height of the parent. If i set
the height of the div to 20px, only the first line disappears against
the black background, while the next lines neatly wrap below it. If I
choose a 5px height, the text starts wrapping over itself already.
Setting an explicit line-height doesn't help though...

Yes, I was messing with line-height after Ben mentioned the
factor. I described in reply what I saw. I think it mirrors what
you are saying above.

 

[Els]

Yes, I was messing with line-height after Ben mentioned the
factor. I described in reply what I saw. I think it mirrors what
you are saying above.

The problem there is, that I can't see any of the posts I read yesterday
anymore. Like, I can't see any post by any Ben, nor your reply to it :-(

Since I see you're using the same newsreader as I am, how does that work
for you? Is there a setting I missed that lets you see posts you read
yesterday too?