Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Why 'display: inline' and 'padding-bottom: 1px' is bad for makingtabs? (http://www.velocityreviews.com/forums/t726245-why-display-inline-and-padding-bottom-1px-is-bad-for-makingtabs.html)

Disc Magnet 06-22-2010 08:22 AM

Why 'display: inline' and 'padding-bottom: 1px' is bad for makingtabs?
 
I was reading this article to make HTML CSS tabs.

In the first selection on "Inline list-items" it suggests how to
create tabs using 'display: inline' and a selected tab by 'padding-
bottom: 1px'. I have created a temporary example here: http://www.webdevout.net/test?0C
(It has a padding-bottom: 2px though since 1px didn't seem enough).
Code reproduced below.

<html>
<head>
<style type="text/css">
#header ul {
list-style: none;
padding:0;
margin:0;
}
#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
#header li a {
padding: 0 1em;
}
#content {
border: 1px solid;
}
#header #selected {
padding-bottom: 2px;
background: white;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>

But later in the section on "Floated list-items", the author says,

"For the very same reason that the "selected" tab works by spilling
over onto the content box, padding cannot be applied to the initial
tab states. They just wouldn't behave."

Under what circumstances the practice of "display: inline" and
"padding-bottom: 2px" can go wrong?

The alternative he suggests is: "float: left" and "positive: relative;
top: 1px". How is this better?

123Jim 06-22-2010 09:45 AM

Re: Why 'display: inline' and 'padding-bottom: 1px' is bad for making tabs?
 

"Disc Magnet" <discmagnet@gmail.com> wrote in message
news:8ba43b69-d4fc-4c81-a6d4-edc9f8d3044c@d37g2000yqm.googlegroups.com...
>I was reading this article to make HTML CSS tabs.
>
> In the first selection on "Inline list-items" it suggests how to
> create tabs using 'display: inline' and a selected tab by 'padding-
> bottom: 1px'. I have created a temporary example here:
> http://www.webdevout.net/test?0C
> (It has a padding-bottom: 2px though since 1px didn't seem enough).
> Code reproduced below.
>
> <html>
> <head>
> <style type="text/css">
> #header ul {
> list-style: none;
> padding:0;
> margin:0;
> }
> #header li {
> display: inline;
> border: solid;
> border-width: 1px 1px 0 1px;
> margin: 0 0.5em 0 0;
> }
> #header li a {
> padding: 0 1em;
> }
> #content {
> border: 1px solid;
> }
> #header #selected {
> padding-bottom: 2px;
> background: white;
> }
> </style>
> </head>
> <body>
> <div id="header">
> <h1>Tabs</h1>
> <ul>
> <li><a href="#">This</a></li>
> <li id="selected"><a href="#">That</a></li>
> <li><a href="#">The Other</a></li>
> <li><a href="#">Banana</a></li>
> </ul>
> </div>
> <div id="content">
> <p>Ispum schmipsum.</p>
> </div>
> </body>
> </html>
>
> But later in the section on "Floated list-items", the author says,
>
> "For the very same reason that the "selected" tab works by spilling
> over onto the content box, padding cannot be applied to the initial
> tab states. They just wouldn't behave."
>
> Under what circumstances the practice of "display: inline" and
> "padding-bottom: 2px" can go wrong?
>
> The alternative he suggests is: "float: left" and "positive: relative;
> top: 1px". How is this better?


The output looks different between Firefox and IE. I'm not sure if this is
what your author is referring to.
Which doctype is being used there? as I found recently that some problems
are solved by being strict 4.01 (from transitional)




All times are GMT. The time now is 04:07 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.