This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > July 2007 > How to imitate a line 1 pixel thick?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
How to imitate a line 1 pixel thick?
|
|
|
| <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 2007-07-11, 6:17 pm |
| 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>
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
| |
|
|
Jukka K. Korpela wrote:
> <div style="border-top: solid 1px black">...</div>
Thanks, this is exactly what I sought.
| |
|
|
Jukka K. Korpela wrote:
> 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 wrote:
> <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.
| |
|
| Once upon a time *marss* wrote:
> Jukka K. Korpela wrote:
>
>
> 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.
--
/Arne
| |
|
|
Arne wrote:
>
> 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.
>
> --
> /Arne
Thanks, Arne, but it does not fit. Look at the original post.
Mykola
| |
| Jukka K. Korpela 2007-07-12, 6:16 pm |
| 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.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
| |
|
|
Jukka K. Korpela wrote:
>
> 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 2007-07-12, 6:16 pm |
|
marss wrote:
> Jukka K. Korpela wrote:
>
>
> 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.
--
Regards Chad. http://freewebdesign.awardspace.biz
| |
| dorayme 2007-07-12, 6:16 pm |
| In article
<els.aNOSPAM-D0C2BF.10313812072007@news.individual.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> In article <1184227138.776100.170170@22g2000hsm.googlegroups.com>,
> marss <marss.ua@XXXXXXXXXX> wrote:
>
>
>
> <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
--
dorayme
| |
|
| In article
<doraymeRidThis-E74515.07524213072007@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article
> <els.aNOSPAM-D0C2BF.10313812072007@news.individual.net>,
> Els <els.aNOSPAM@tiscali.nl> 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 :-)
--
Els http://locusmeus.com/
| |
| Chris F.A. Johnson 2007-07-12, 10:18 pm |
| On 2007-07-12, marss wrote:
>
> Jukka K. Korpela wrote:
>
>
> hum... image... What is it?
echo "%!PS
100 100 100 0 360 arc stroke" > circle.ps
convert -trim circle.ps circle.png
--
Chris F.A. Johnson
<http://cfaj.freeshell.org/>
<http://woodbine-gerrard.com/>
| |
| dorayme 2007-07-12, 10:18 pm |
| In article
<els.aNOSPAM-62C1CB.00155313072007@news.individual.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
>
> 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.
--
dorayme
| |
|
| dorayme wrote:
> In article
> <els.aNOSPAM-62C1CB.00155313072007@news.individual.net>,
> Els <els.aNOSPAM@tiscali.nl> wrote:
>
>
> 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?
--
Els http://locusmeus.com/
| |
|
| On 2007-07-13, Els <els.aNOSPAM@tiscali.nl> wrote:
> dorayme wrote:
>
>
> 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.
It sounds like iCab might be treating height: 1px on the div as
implying also line-height: 1px; or rather, line-height: min(the real
default line height, the height of the div).
| |
| dorayme 2007-07-13, 10:18 pm |
| In article <15du7kb5fao7e$.c02ukrha3bx6$.dlg@40tude.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> dorayme wrote:
>
>
> 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/dro...Curiousity/iCab
Curiosity.html>
has the effect on iCab/Safari of
<http://members.optushome.com.au/dro...Curiousity/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.
--
dorayme
| |
| dorayme 2007-07-13, 10:18 pm |
| In article <slrnf9fene.nvv.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:
> On 2007-07-13, Els <els.aNOSPAM@tiscali.nl> wrote:
>
> It sounds like iCab might be treating height: 1px on the div as
> implying also line-height: 1px; or rather, line-height: min(the real
> default line height, the height of the div).
I just made a demo for Els of things (at alt.html). Yes, this
suggestion of yours is interesting and yet deepens the mystery.
When line-height is set on the div at a more than respectable
number, 2em, iCab behaves itself when all the text is on one
line; no 'strike thru'. But when it wraps, even 10em does not
completely eradicate the oddity. It is as if iCab takes note of
the line height for one line, and another, but not a third or
fourth etc! In other words, the first line looks kosher, the rest
play up.
If you are not sure what I mean, and I have time, I will demo it.
--
dorayme
| |
|
| In article
<doraymeRidThis-1AD6E7.08590814072007@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:
> The source at
>
> <http://members.optushome.com.au/dro...Curiousity/iCab
> Curiosity.html>
>
> has the effect on iCab/Safari of
>
> <http://members.optushome.com.au/dro...Curiousity/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...
--
Els http://locusmeus.com/
| |
| dorayme 2007-07-13, 10:18 pm |
| In article
<els.aNOSPAM-8837E5.02014414072007@news.individual.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> In article
> <doraymeRidThis-1AD6E7.08590814072007@news-vip.optusnet.com.au>,
> dorayme <doraymeRidThis@optusnet.com.au> wrote:
>
>
> 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.
--
dorayme
| |
|
| On 2007-07-13, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnf9fene.nvv.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>
> I just made a demo for Els of things (at alt.html). Yes, this
> suggestion of yours is interesting and yet deepens the mystery.
> When line-height is set on the div at a more than respectable
> number, 2em, iCab behaves itself when all the text is on one
> line; no 'strike thru'. But when it wraps, even 10em does not
> completely eradicate the oddity. It is as if iCab takes note of
> the line height for one line, and another, but not a third or
> fourth etc! In other words, the first line looks kosher, the rest
> play up.
It looks like it's doing something very weird anyway. Perhaps taking
some function of the height of the div and the line-height, and then
dividing that by the number of lines and using that as a maximum
line-height. Or something, definitely looks wrong though. If the text
doesn't fit it's just supposed to overflow, and there's no overflow:
crunch property in CSS.
| |
| dorayme 2007-07-14, 6:17 pm |
| In article
<els.aNOSPAM-72E132.11023014072007@news.individual.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> In article
> <doraymeRidThis-34646B.11193214072007@news-vip.optusnet.com.au>,
> dorayme <doraymeRidThis@optusnet.com.au> wrote:
>
>
> 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?
You can try Special/Open All References if you have a current
post open. This sometimes gets all the thread, sometimes just
some of the thread. You can always "Command -" (the
hyphen/underscore key) after clicking on the group in the
myGroups window, this brings up search box for subjects, authors
etc. One other trick, you can "Option Return" and choose a number
of threads, it will then get you the last that number.
And, of course, there is always the ever reliable Google. Imagine
the world without Google. At least good for getting the name of
threads and authors so you can use the above methods I mention in
the MT newsreader to reply or whatever...
I should also add that I may have overly hastily assumed that you
would be reading comp.infosystems.www.authoring.stylesheets. Ben
might have posted there, I have now forgotten. Forgetting is
something that MT-NewsWatcher is very good at doing. <g>
You moved to Macs, Els?
--
dorayme
| |
|
| X-Trace: individual.net kil2nAbwBJLKOf56oayVVwwmte0WygULdXuKFNcCicUQBQaGTN
X-Orig-Path: els.aNOSPAM
Cancel-Lock: sha1:jphgbTDo5I2Upw63IzY/eL0F0Yw=
User-Agent: MT-NewsWatcher/3.5.2 (Intel Mac OS X)
X-Orig-X-Complaints-To: I did it, I'm guilty, send your complaint to me.
X-Face: >6>hLj9vo|6CjETW]#4|>u:Qiau#5.~H|NaWB&%bh!gX"oqC`F!hlj5t,:e^#[XRuu=@z~1 N*lfo1ejtChDS>"0iVS{/OW=VAari!)}My61huHb9Ksi[n17&U;R7y~A|o+Y7|hQ@y9#X!7Cv21fi/ N*W_dOqG%GcH#fj4Rb^WJV"7O^]qJ`.HM`vsYZ1`EuNio:9Yh&.oJ-/ZB.^%HkMhS,cA0#,JC#iqX- ;x&(\p5uw,_v^K+"X
wh[WoTfF_p`CdsaQjewD[MQB|]'rjH"
X-Men: the only X-word I know that's not already here
Bytes: 4810
Xref: number1.nntp.dca.giganews.com comp.infosystems.www.authoring.stylesheets:106880 alt.html:594167 alt.www.webmaster:523185
In article
<doraymeRidThis-38BBD2.21191714072007@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:
None of the methods you're describing were familiar to me, so I tried
them one by one:
[color=darkred]
> You can try Special/Open All References if you have a current
> post open. This sometimes gets all the thread, sometimes just
> some of the thread.
That literally opens all the posts that were referenced in the current
post - as in all their own separate window on top of each other, without
seeing the actual thread :S
> You can always "Command -" (the
> hyphen/underscore key) after clicking on the group in the
> myGroups window, this brings up search box for subjects, authors
> etc.
That one is useful, thanks - as long as the subject didn't change of
course - at least it does show me the thread in a thread window, not a
bunch of open message windows :-)
> One other trick, you can "Option Return" and choose a number
> of threads, it will then get you the last that number.
No 'threads' here, just posts. Works too though, although it doesn't
show which I already had read, it just fetches the posts again, without
any memory of whether I read them before. Same goes for the search box
method btw.
> And, of course, there is always the ever reliable Google. Imagine
> the world without Google. At least good for getting the name of
> threads and authors so you can use the above methods I mention in
> the MT newsreader to reply or whatever...
Yup - except I wanted to use a newsreader *instead* of Google <g>
> I should also add that I may have overly hastily assumed that you
> would be reading comp.infosystems.www.authoring.stylesheets. Ben
> might have posted there, I have now forgotten.
I think so - I'm reading alt.www.webmaster only atm, so if he forgot to
set a follow-up and just snipped the other groups, that explains why
there's no Ben in this thread I'm seeing :-)
> Forgetting is
> something that MT-NewsWatcher is very good at doing. <g>
So I notice! I so wish there was a 40Tude Dialog for Mac :\
> You moved to Macs, Els?
No, still use XP for the bulk (like work), just added a Mac so I can
check sites on Mac browsers, and made it a Book so I can do stuff away
from my desk. Stuff like reading Usenet ... ;-)
--
Els http://locusmeus.com/
| |
| dorayme 2007-07-14, 10:15 pm |
| In article
<els.aNOSPAM-B587A5.13555614072007@news.individual.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> None of the methods you're describing were familiar to me, so I tried
> them one by one:
>
>
> That literally opens all the posts
True, but it is quick and sometimes gets you to see something
like the OP which is often lost sight of.
>
>
> No 'threads' here, just posts. Works too though, although it doesn't
> show which I already had read, it just fetches the posts again, without
> any memory of whether I read them before. Same goes for the search box
> method btw.
When I do either of these I get threads. Take the 'Command -'
(search), enter a name of a subject or bits of it... a window
will come up with a number to the left (the number of posts that
have been found with that name) and the name of the newsgroup.
Click on that number/ng text and another window comes up with a
listing of the threads. There might be a few with the words you
entered (eg. if you enter just "css" or you will likely get
lots). In this second window is the thread listings with a little
toggle arrow next to each enabling you to see the individual post
authors etc, you can then click on individual items to bring out
the actual post.
No, MT remembers not what you have read when you bring them all
up again.
There is also time rules that I am hazy on: it fetches only posts
from a certain date... I should read the manual again sometime.
The author of this free software put a tremendous effort in, he
has not the time or resources to keep developing it (though he
made a whole bunch of improvements about a year or two back).
[color=darkred]
> I think so - I'm reading alt.www.webmaster only atm, so if he forgot to
> set a follow-up and just snipped the other groups, that explains why
> there's no Ben in this thread I'm seeing :-)
>
Did not you and ... who was it? Mark? JL? once recommend a group
for me? I may have gone and got lost and plumped for
comp.infosystems.www.authoring.stylesheets? I better take a look
at alt.www.webmaster. Will you warn them I am coming or will I
just burst in there unannounced? I like to move into a new group
and get as many people offside as possible. This tests their
mettle and I find out who is worth talking to seriously and who I
can mercilessly have fun with. I also like to visit new
killfiles. Each group has a style of killfile different to each
other group as well as individual differences within the groups.
It is cruel, I know. But it is in the Martian manual I was given
when I came to earth.
--
dorayme
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|