bottom border question

[hurricanedan]

I have a bottom border for navigation items that works the way it should:

#gutter_left ul li ul li {
		background-color: #00853f;
		border-bottom:1px dashed #FFFFFF;
		}

But what I would like it to do is start, say 5 pixels in and stop 5 pixels short. Can this be done with CSS or would I have to create an image of the dashed line and use it as a background?

Thanks,

Dan

[wherrelz]

you can use padding or margin depending on what element you're working with

[DaveWoods]

yep, as wherrelz has advised, padding should probably do the job for this

#gutter_left ul li ul li {
  background-color: #00853f;
  border-bottom:1px dashed #FFFFFF;
  padding: 5px 0;
}

[AutisticCuckoo]

I'm not sure if I understand hurricanedan's question properly, but I thought he wanted the exact opposite of that: to have the border be 10 pixels shorter than the list item, not to have it extend 5 pixels on either side of the item's content.

Besides, Dave, even if I got it wrong, surely it would be padding:0 5px rather than the other way round? You're adding 5 pixels of vertical padding and no horizontal padding.

[wherrelz]

Cuckoo, he said 'start 5 pixels in and stop 5 pixels short' - means a padding of 5 pixels, not the other way round

I would just do padding: 5px and be done with it - but depends on his layout.

(btw, didnt know cuckoos had footsies

[junjun]

Cuckoo, he said 'start 5 pixels in and stop 5 pixels short' - means a padding of 5 pixels, not the other way round

Errr.. if he was talking about the border, then yes it is the other way around

[AutisticCuckoo]

We'll have to wait for him to clarify things, but the way I read it is,

I have a bottom border … what I would like it to do is start, say 5 pixels in and stop 5 pixels short.

[shakir]

Check the below, it may help you
#gutter_left ul li ul li {
background-color: #00853f;
border-bottom:1px dashed #FFFFFF;
padding: 5px 5px 5px 5px;
}

[DaveWoods]

Ah maybe... I was assuming he was asking to create space between the text and the border and needed to push the text out from the top and bottom but after re-reading it you're probably right.

Maybe an image of what's is trying to be achieved might help us get a better understanding.

[hurricanedan]

The bottom border shows up and the padding is there but the padding seems to only affect the text, not the border.

It shows up something like this:

 HOME
-------

but not like this:

 HOME 
 -----

I wonder if I need to put the padding in the #gutter_left?

Thanks,

Dan

[DaveWoods]

If you're trying to position the whole box including the border then margin should do the trick

margin : 0 5px;

That should give you the effect you're after as long as you aren't using display: inline; to position the <li>'s?

If that's the case then you'll need to use float's instead.

[hurricanedan]

csswiz,

margin is what is doing the trick so thanks for that tip. I am not using display inline so that is not an issue.

Thanks again for the help!

[wherrelz]

Told you so

[hurricanedan]

wherrelz,

You were right but it was due to my poor phrasing of the question I think. Thanks for taking a look though and for deciphering my post.

But how about this?

Say I want the dash line for 'ul li ul li' but need a solid line for the 'ul li' items?

I know this works:

#gutter_left ul li {
  background-color: #00853f;
  border-bottom:1px solid #FFFFFF;
}

But one dashed and one solid line appear right after another when I have a submenu displayed. The solid border appears below menu 1 and menu 3; the dashed border appears below submenu 1 and submenu 2; the solid border for menu 2 appears below the dashed border of submenu 2.
Like this:

<ul>
  <li>menu 1</li>
  <li>menu 2
    <ul>
      <li>submenu 1</li>
      <li>submenu 2</li>
    </ul>
  </li>
  <li>menu 3</li>
</ul>

I know that it is supposed to do that, due to the closing of the li tag. But is there a way to not have the solid border appear at the bottom of the submenu?

Dan

[wherrelz]

Double border.... try

border-collapse: collapse;

should work in general, though I've used it primarily for tables/divs/spans.

[hurricanedan]

Unfortunately that does not work.

Thanks for the idea though.

Any other ideas?

Dan

[hurricanedan]

One other problem that has just been brought to my attention: Is there a way to set the last menu item to have no bottom border at all?

Thanks,

Dan

[wherrelz]

change the class of the last item?

[wherrelz]

btw - border collapse would need to be on the UL not the LI

[DaveWoods]

Border collapse would only work on tables.

You'll need a class creating for both of these problems

#gutter_left .no_border {
  border-bottom: 0;	
}

And then simply apply the class to the menu items that you don't want a border for

<ul>
  <li>menu 1</li>
  <li class="no_border">menu 2
    <ul>
      <li>submenu 1</li>
      <li>submenu 2</li>
    </ul>
  </li>
  <li class="no_border">menu 3</li>
</ul>

You could do something clever with CSS3 selectors but it wouldn't have support in all the major browser so I wouldn't suggest using that method for now.

[hurricanedan]

This would not even be an issue with changing the class except the menus are dynamic. I think I am going to move this over to the php forum or the scripts forum to since it involves a CMS.

Thanks for the help,

Dan