Border-Free Table with CSS

V

vunet.us

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

Jonathan N. Little

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

Jukka K. Korpela

Scripsit (e-mail address removed):
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; }
 
V

vunet.us

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>

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

vunet.us

Scripsit (e-mail address removed):


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

Jonathan N. Little

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

Jonathan N. Little

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"
 
V

vunet.us

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

Thank you Jonathan. Solution and tip are both considered.
 

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