Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why 'display: inline' and 'padding-bottom: 1px' is bad for makingtabs?

Reply
Thread Tools

Why 'display: inline' and 'padding-bottom: 1px' is bad for makingtabs?

 
 
Disc Magnet
Guest
Posts: n/a
 
      06-22-2010
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?
 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      06-22-2010

"Disc Magnet" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>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)


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
integer >= 1 == True and integer.0 == False is bad, bad, bad!!! rantingrick Python 44 07-13-2010 06:33 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
ActiveX apologetic Larry Seltzer... "Sun paid for malicious ActiveX code, and Firefox is bad, bad bad baad. please use ActiveX, it's secure and nice!" (ok, the last part is irony on my part) fernando.cassia@gmail.com Java 0 04-16-2005 10:05 PM
24 Season 3 Bad Bad Bad (Spoiler) nospam@nospam.com DVD Video 12 02-23-2005 03:28 AM
24 Season 3 Bad Bad Bad (Spoiler) nospam@nospam.com DVD Video 0 02-19-2005 01:10 AM



Advertisments