Border-Free Table with CSS

Discussion in 'HTML' started by vunet.us@gmail.com, Jan 31, 2007.

  1. Guest

    What is the best way to show border-less menu with CSS? I use table
    but have problems avoiding paddings and margins with different
    browsers. Is there a perfect border-free cross-browser example of
    table or I should use other tags for my menu, like ul-li?
     
    , Jan 31, 2007
    #1
    1. Advertising

  2. wrote:
    > What is the best way to show border-less menu with CSS? I use table
    > but have problems avoiding paddings and margins with different
    > browsers. Is there a perfect border-free cross-browser example of
    > table or I should use other tags for my menu, like ul-li?
    >


    Well, yes different browsers have different defaults for padding,
    margins, etc on many elements not just TABLEs. If you want cross-browser
    consistency explicitly set the elements properties (i.e., margin,
    border, padding)

    Now to address your links, if you think about it what is your menu? Rows
    and columns of day or a *list* of links? I would use a list, because
    that it what it is. You can style it anyway you want!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>Simple example</title>

    <style type="text/css">
    BODY { color: #000; background-color: #cfa; }
    UL.menu{
    margin: 0; padding: .25em; border: 3px outset #050;
    width: 10em; list-style: none; background-color: #050;
    font-family: arial, helvetica, sans-serif;
    }
    UL.menu LI { margin: 0 .5em 0 0; padding: 0; }
    UL.menu LI A { padding: .25em; border: 2px solid #050;
    display: block; width: 100%; font-weight: bold;
    text-decoration: none; color: #ff0; }
    UL.menu LI A:hover {
    color: #fff; border: 2px inset #050;
    }
    </style>

    </head>
    <body>

    <ul class="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    </ul>
    </body>
    </html>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 31, 2007
    #2
    1. Advertising

  3. Scripsit :

    > What is the best way to show border-less menu with CSS?


    How is that related to the question in the Subject line?

    > I use table
    > but have problems avoiding paddings and margins with different
    > browsers.


    Yawn. Try explaning the logical structure and illustrate it with a URL, then
    proceed to telling what the desired visual appearance for some part (which?)
    is.

    Meanwhile, here's the answer you asked in the Subject line - I just _love_
    simple questions (though some people say there are no simple questions,
    there are just simple people):

    table, caption, col, colgroup, thead, tbody, tr, th, td { border: 0 none
    !important; }

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 31, 2007
    #3
  4. Guest

    On Jan 31, 10:59 am, "Jonathan N. Little" <>
    wrote:
    > wrote:
    > > What is the best way to show border-less menu with CSS? I use table
    > > but have problems avoiding paddings and margins with different
    > > browsers. Is there a perfect border-free cross-browser example of
    > > table or I should use other tags for my menu, like ul-li?

    >
    > Well, yes different browsers have different defaults for padding,
    > margins, etc on many elements not just TABLEs. If you want cross-browser
    > consistency explicitly set the elements properties (i.e., margin,
    > border, padding)
    >
    > Now to address your links, if you think about it what is your menu? Rows
    > and columns of day or a *list* of links? I would use a list, because
    > that it what it is. You can style it anyway you want!
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    > <meta http-equiv="content-language" content="en-us">
    > <title>Simple example</title>
    >
    > <style type="text/css">
    > BODY { color: #000; background-color: #cfa; }
    > UL.menu{
    > margin: 0; padding: .25em; border: 3px outset #050;
    > width: 10em; list-style: none; background-color: #050;
    > font-family: arial, helvetica, sans-serif;}
    >
    > UL.menu LI { margin: 0 .5em 0 0; padding: 0; }
    > UL.menu LI A { padding: .25em; border: 2px solid #050;
    > display: block; width: 100%; font-weight: bold;
    > text-decoration: none; color: #ff0; }
    > UL.menu LI A:hover {
    > color: #fff; border: 2px inset #050;}
    >
    > </style>
    >
    > </head>
    > <body>
    >
    > <ul class="menu">
    > <li><a href="#">Page 1</a></li>
    > <li><a href="#">Page 2</a></li>
    > <li><a href="#">Page 3</a></li>
    > <li><a href="#">Page 4</a></li>
    > </ul>
    > </body>
    > </html>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thank you very much. How can I modify this example of yours to make UL
    LI horizontal? I saw this could be done, but how. And if I need
    horizontal, then am I better off with UL LI?
    I really appreciate your advise and time.
     
    , Jan 31, 2007
    #4
  5. Guest

    On Jan 31, 12:23 pm, "Jukka K. Korpela" <> wrote:
    > Scripsit :
    >
    > > What is the best way to show border-less menu with CSS?

    >
    > How is that related to the question in the Subject line?


    LET'S SEE:
    1. "Border-Free Table with CSS"
    2. "What is the best way to show border-less menu with CSS?"
    I'D PROBABLY SAY THERE IS A SLIGHT DIFFERENCE IN BOTH LINES. HOWEVER,
    IF ONE THINKS OF IT, THEY MAY ADD EACH OTHER UP. THE POINT POINT
    STAYS: "BORDERLESS", "BORDER FREE" AND IT IS ALL RELATED TO TABLE.

    >
    > > I use table
    > > but have problems avoiding paddings and margins with different
    > > browsers.

    >
    > Yawn. Try explaning the logical structure


    PREVIOUS POSTER DID NOT SEEM TO HAVE DIFFICULTIES UNDERSTANDING MY
    QUESTION.

    and illustrate it with a URL,

    I WOULD IF I COULD :)

    then
    > proceed to telling what the desired visual appearance for some part (which?)
    > is.


    IN YOUR SHOES I'D RATHER REPLY: "Need more details". IT TAKES LESS
    WRITING ESPECIALLY FOR BUSY PEOPLE.

    >
    > Meanwhile, here's the answer you asked in the Subject line - I just _love_
    > simple questions (though some people say there are no simple questions,
    > there are just simple people):


    OH, IT'S PERSONAL ALREADY... BUT YOU DO NOT EVEN KNOW ME...!!! YOU
    CANNOT BE SURE HOW SIMPLE OR COMPLEX MY MIND IS.

    >
    > table, caption, col, colgroup, thead, tbody, tr, th, td { border: 0 none
    > !important; }


    THANK YOU FOR POSSIBLE SOLUTION. LET ME GO AHEAD AND TEST IT.
    I APPRECIATE YOUR TIME AND HELP HERE.

    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
     
    , Jan 31, 2007
    #5
  6. wrote:

    > Thank you very much. How can I modify this example of yours to make UL
    > LI horizontal? I saw this could be done, but how. And if I need
    > horizontal, then am I better off with UL LI?
    > I really appreciate your advise and time.


    More than one way, but if you remove the width on the UL, tweak padding,
    and remove block proprieties added to A elements and make LI inline...

    BODY { color: #000; background-color: #cfa; }
    UL.menu{
    margin: 0; padding: .5em; border: 3px outset #050;
    list-style: none; background-color: #050;
    font-family: arial, helvetica, sans-serif;
    }
    UL.menu LI { margin: 0 .5em 0 0; padding: 0; display: inline; }
    UL.menu LI A { padding: .25em; border: 2px solid #050;
    font-weight: bold;
    text-decoration: none; color: #ff0; }
    UL.menu LI A:hover {
    color: #fff; border: 2px inset #050;
    }

    This makes a horizontal bar with same hover "effects" as the vertical...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 31, 2007
    #6
  7. wrote:
    > On Jan 31, 12:23 pm, "Jukka K. Korpela" <> wrote:
    >> Scripsit :
    >>
    >>> What is the best way to show border-less menu with CSS?

    >> How is that related to the question in the Subject line?

    >
    > LET'S SEE:
    > 1. "Border-Free Table with CSS"
    > 2. "What is the best way to show border-less menu with CSS?"
    > I'D PROBABLY SAY THERE IS A SLIGHT DIFFERENCE IN BOTH LINES. HOWEVER,
    > IF ONE THINKS OF IT, THEY MAY ADD EACH OTHER UP. THE POINT POINT
    > STAYS: "BORDERLESS", "BORDER FREE" AND IT IS ALL RELATED TO TABLE.


    Tip: Bad idea to shout at Jukka. Actually he is correct, 1) your
    question doesn't have much to do with borders and tables as it does with
    using a table for layout in a menu. 2) A URL would have been far better
    at explaining what you wished than your actual "question"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 31, 2007
    #7
  8. Guest

    On Jan 31, 1:22 pm, "Jonathan N. Little" <>
    wrote:
    > wrote:
    > > Thank you very much. How can I modify this example of yours to make UL
    > > LI horizontal? I saw this could be done, but how. And if I need
    > > horizontal, then am I better off with UL LI?
    > > I really appreciate your advise and time.

    >
    > More than one way, but if you remove the width on the UL, tweak padding,
    > and remove block proprieties added to A elements and make LI inline...
    >
    > BODY { color: #000; background-color: #cfa; }
    > UL.menu{
    > margin: 0; padding: .5em; border: 3px outset #050;
    > list-style: none; background-color: #050;
    > font-family: arial, helvetica, sans-serif;}
    >
    > UL.menu LI { margin: 0 .5em 0 0; padding: 0; display: inline; }
    > UL.menu LI A { padding: .25em; border: 2px solid #050;
    > font-weight: bold;
    > text-decoration: none; color: #ff0; }
    > UL.menu LI A:hover {
    > color: #fff; border: 2px inset #050;
    >
    > }
    >
    > This makes a horizontal bar with same hover "effects" as the vertical...
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thank you Jonathan. Solution and tip are both considered.
     
    , Jan 31, 2007
    #8
  9. wrote:
    > On Jan 31, 1:22 pm, "Jonathan N. Little" <>
    > wrote:


    > Thank you Jonathan. Solution and tip are both considered.
    >


    Good idea. Jukka does not mince words and can be a little terse, but his
    advice is very good.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 1, 2007
    #9
    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. tshad
    Replies:
    0
    Views:
    2,304
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,417
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    726
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,628
    Adrienne Boswell
    Jul 30, 2006
  5. Replies:
    3
    Views:
    931
    richard
    Sep 24, 2006
Loading...

Share This Page