help with hiding border css

[mrsruggles]

Here is the style sheet that i am using for a restaurant menu it works great. But I need the tag #wrap li em p{ to have no border. I cannot get it to work. Any ideas? Maybe I need to use a dfn rather than a p? Thanks for the help.



/****MENUS*****/
* {margin:0px;padding:0}
h1,h2{padding:10px 20px 0; text-align:center}
body {background-color:#transparent;}
#centsmall{text-align: center;
font-size: 11px;
}

#days{
width:130px; height: 90px;
text-align:center;
font:12px arial,sans-serif;
}
#wrap{
width:382px;
margin:3px 0px 0 0px;
font-size:13px;
}
#wrap ul{
padding:20px 0px;
list-style:none;
float:left;
position:relative;
left:-2px;
top:-2px;
background:#transparent;
}
#wrap li{
border-bottom:1px dotted #000;
line-height:1.0;
margin:0 0 .5em 0;
position:relative;
width:100%;
float:left;
padding-left:0;
}
#wrap li span{
background:#fff;
padding:1px 0 1px 5px;
float:right;
color:#000;
position:relative;
top:.3em;
}
#wrap li em{
float:left;
margin:0;
position:relative;
top:.3em;
padding:0 5px 0 0;
background:#fff;
font-style:normal;
}
#wrap li em p{
font-size: 8px;
float:left;
margin-left:20px;
position:relative;
top:.3em;
padding:0 5px 0 0;
font-style:normal;
border-display:none;
}

/*****END MENUS******/

[birdbrain]

Hi there mrsruggles,

and a warm welcome to these forums. ;)

There is no attribute border-display, try border:0 instead. :)

birdbrain

[mrsruggles]

Thank you for your reply. Unfortunately it didnt work. Any other advice? Thanks

[birdbrain]

Hi there mrsruggles,

my suggestion is not incorrect.

I have given you the correct form to use.

We would need to see the relevant HTML and any other CSS to see why it does not work. ;)

There may be some conflict with the CSS. ;)

birdbrain

[mrsruggles]

ok. But is there a way to do this by email. I would rather not post it. Thanks

[mrsruggles]

ok so I added to the style sheet
#wrap li dfn{
font-size: 12px;
float:left;
margin-left:23px;
position:relative;
top:.3em;
padding:0 5px 0 0;
font-style:normal;
border:0;
}


and here is some corresponding html

 <div id="wrap">
                                                        <ul>
                                                            <li><em>Giant Shrimp Cocktail</em><span> $18.</span></li>
                                                            <li><em>Chilled Crabmeat Cocktail</em><span> 19.</span></li>
                                                            <li><em>Smoked Scottish Salmon</em><span> 17.<br /></span></li>
          <li><dfn>Capers, Onions, Toasted Brioche</dfn></li>
                                                        <li><em>Fried Calamari, with Two Sauces</em><span> 14.<br /></span></li>
                                                    </ul>
                                                </div>

As you can see I am now using the dfn tag with still the same results. Although it does seem to work when I take the dfn out of the li tag but then that breaks the list and the item below it gets messed up.

[birdbrain]

Hi there mrsruggles,

your CSS has applied border-bottom to the li element.
There is no border for the dfn element set initially, so setting border:0 is pointless. ;)

Try it like this instead....

HTML:-

<div id="wrap"> 
<ul> 
 <li><em>Giant Shrimp Cocktail</em><span> $18.</span></li> 
 <li><em>Chilled Crabmeat Cocktail</em><span> 19.</span></li> 
 <li><em>Smoked Scottish Salmon</em><span> 17.<br /></span></li> 
 <li id="nb"><dfn>Capers, Onions, Toasted Brioche</dfn></li> 
 <li><em>Fried Calamari, with Two Sauces</em><span> 14.<br /></span></li> 
</ul> 
</div> 

CSS:-

#wrap #nb { 
 border:0; 
 } 
</style> 

birdbrain

[mrsruggles]

That worked! You're the best :-) Thank you

[birdbrain]

No problem, you're very welcome. ;)