Topic: Spans Pages that link to <a href="https://ozoneasylum.com/backlink?for=21706" title="Pages that link to Topic: Spans" rel="nofollow" >Topic: Spans\

 
Author Thread
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 05-07-2004 12:26 Edit Quote

As far as I know, Divs are almost identical to Spans except they default to having the max width, and they are block elements.

However I'm finding adding padding and margins to spans isn't working, is there some reason why the span element doesn't except this?

Am I right in believing this?


Ok, let me give a bit more detail

code:
ul.headLinks {
width: 200px;
height: 26px;
padding: 0px;
margin: 0px;
border-left: 1px solid #ffffff;
}

li.inline {
display: inline;
padding: 5px 10px 0px 10px;
border-right: 1px dotted #cccccc;
}

li.last {
display: inline;
padding: 5px 10px 0px 10px;
border-right: 0px;
}

This seems ok to me, here's the HTML

code:
<ul class="headLinks">
<li class="inline"><a href="#" class="headLinksText">Home</a></li>
<li class="inline"><a href="#" class="headLinksText">Pictures</a></li>
<li class="last"><a href="#" class="headLinksText">About</a></li>
</ul>

I got most of this code from A List Apart, when I run it the top padding doesn't come into effect, but the left and right does, any ideas what a solution might be?

Cheers,

Blaise

(Edited by Blaise on 05-07-2004 13:31)

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

IP logged posted posted 05-07-2004 22:20 Edit Quote

I think the vertical padding on inline elements does not work the same as on block elements. Here is an article on Eric Meyer's website that, I believe, explains the situation.

There are two possiblities that you may wish to consider that will get you close to what you want.

Option 1: Add line-height to your rules for li.inline and li.last as this will increase the vertical dimension of the inline elements.
For example:

code:
li.inline {
display: inline;

line-height: 35px;

padding: 5px 10px 0px 10px;

border-right: 1px dotted #cccccc;
}



Option 2: Don't make the li elements inline, leave them as block and float them instead.
For example:

code:
li.inline {
display: block;

float: left;

padding: 5px 10px 0px 10px;

border-right: 1px dotted #cccccc;
}



Fiddle with either one of those and I think you'll get what you're looking for.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-07-2004 23:09 Edit Quote

There are no spans in your code

The line-height method will work, but I usually go with the floating blocks for this type of application myself.

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 05-10-2004 11:42 Edit Quote

Thanks for the help guys, I've managed to get it working now with the above mentioned ideas.

I was going on about spans and inline elements because that was how I was trying to get it working originally, and in general I was confused about how they were supposed to work.

Ta

Blaise

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

IP logged posted posted 05-11-2004 12:57 Edit Quote

I agree with DL-44. I'd go with option 2 as well. I only offered option 1 as an alternative since that directly addresses the shortcomings of the padding not working on inline elements.

But option 2 is probably your better bet.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu