How to imitate a line 1 pixel thick?

Discussion in 'HTML' started by marss, Jul 11, 2007.

  1. marss

    marss Guest

    <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
    marss, Jul 11, 2007
    #1
    1. Advertising

  2. 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, Jul 11, 2007
    #2
    1. Advertising

  3. marss

    marss Guest

    Jukka K. Korpela wrote:

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


    Thanks, this is exactly what I sought.
    marss, Jul 11, 2007
    #3
  4. marss

    marss Guest

    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
    marss, Jul 12, 2007
    #4
  5. marss

    Els Guest

    In article <>,
    marss <> wrote:

    > 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.



    <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..

    --
    Els http://locusmeus.com/
    Els, Jul 12, 2007
    #5
  6. marss

    marss Guest

    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.
    marss, Jul 12, 2007
    #6
  7. marss

    Arne Guest

    Once upon a time *marss* wrote:
    > 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
    >


    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, Jul 12, 2007
    #7
  8. marss

    marss Guest

    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
    marss, Jul 12, 2007
    #8
  9. 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, Jul 12, 2007
    #9
  10. marss

    marss Guest

    Jukka K. Korpela wrote:

    > > 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.


    hum... image... What is it?
    marss, Jul 12, 2007
    #10
  11. marss

    Chaddy2222 Guest

    marss wrote:
    > Jukka K. Korpela wrote:
    >
    > > > 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.

    >
    > 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
    Chaddy2222, Jul 12, 2007
    #11
  12. marss

    dorayme Guest

    In article
    <>,
    Els <> wrote:

    > In article <>,
    > marss <> wrote:
    >
    > > 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.

    >
    >
    > <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
    dorayme, Jul 12, 2007
    #12
  13. marss

    Els Guest

    In article
    <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Els <> wrote:


    [fake hr with red dot]
    > > <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


    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/
    Els, Jul 12, 2007
    #13
  14. On 2007-07-12, marss wrote:
    >
    > Jukka K. Korpela wrote:
    >
    >> > 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.

    >
    > 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/>
    Chris F.A. Johnson, Jul 13, 2007
    #14
  15. marss

    dorayme Guest

    In article
    <>,
    Els <> wrote:

    > > 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 :)


    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, Jul 13, 2007
    #15
  16. marss

    Els Guest

    dorayme wrote:

    > In article
    > <>,
    > Els <> wrote:
    >
    >>> 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 :)

    >
    > 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/
    Els, Jul 13, 2007
    #16
  17. marss

    dorayme Guest

    In article <15du7kb5fao7e$.c02ukrha3bx6$>,
    Els <> wrote:

    > dorayme wrote:
    >
    > > In article
    > > <>,
    > > Els <> wrote:
    > >
    > >>> 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 :)

    > >
    > > 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?


    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.

    --
    dorayme
    dorayme, Jul 13, 2007
    #17
  18. marss

    Els Guest

    In article
    <>,
    dorayme <> wrote:

    > 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...

    --
    Els http://locusmeus.com/
    Els, Jul 14, 2007
    #18
  19. marss

    dorayme Guest

    In article
    <>,
    Els <> wrote:

    > In article
    > <>,
    > dorayme <> wrote:
    >
    > > 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...


    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
    dorayme, Jul 14, 2007
    #19
  20. marss

    Els Guest

    OT: newsreader not seeing read posts [wss: Re: How to imitate a line 1 pixel thick?]

    In article
    <>,
    dorayme <> wrote:

    > 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?

    --
    Els http://locusmeus.com/
    Els, Jul 14, 2007
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jacqui or (maybe) Pete

    Re: css way to imitate iframe?

    Jacqui or (maybe) Pete, Jul 17, 2003, in forum: HTML
    Replies:
    1
    Views:
    460
    Guido Janssens
    Jul 17, 2003
  2. André Wagner

    Fastest pixel by pixel operation

    André Wagner, Mar 17, 2008, in forum: Java
    Replies:
    12
    Views:
    1,017
    Larry A Barowski
    Mar 19, 2008
  3. Ian Collins
    Replies:
    4
    Views:
    1,597
  4. Dann Corbit
    Replies:
    2
    Views:
    1,243
    Seebs
    Apr 12, 2010
  5. Marek Osvald

    How to imitate a browser?

    Marek Osvald, Oct 3, 2010, in forum: Ruby
    Replies:
    3
    Views:
    184
    Roger Pack
    Oct 4, 2010
Loading...

Share This Page