PDA

View Full Version : can't get links to style in list

bazz
09-24-2005, 01:41 PM
Uh, I am missing something really simple here but can't figure what.

In my dl, dt and dd, definition list, I have the dt as hyperlinks. I can't seem to get the DD beneath to align left for the first entry. is OK in ie but not in FF. :mad:


Please help or the 'puter gets it :)



dl#meal_menu {
margin : 0 190px 0 190px;
font-size : smaller;
color : #1E4B52;
background-color : transparent;
padding : 0;
border-top : 0;
}

dl#meal_menu dt a:link, dl#meal_menu dt a:visited, dl#meal_menu dt a:active, dl#meal_menu dt a:hover {
margin : auto auto;
padding : 0 45px;
font-weight : bold;
font-family : "Georgia", arial, verdana, sans serif;
font-size: 1.2em;
text-decoration : none;
color: #1E4B52;
}

dl#meal_menu dt.price {
float : right;
text-align : right;
width : 28%;
background-color : transparent;
padding :0;
margin :0;
}
dl#meal_menu dt.title {
padding : 0;
float : left;
text-align : left;
width : 70%;
background-color : transparent;

}
dl#meal_menu dd {
margin : 50px 0 25px 0;
text-align : left;
padding :10px;
background-color : transparent;
}



html (in case you want it


<dl id="meal_menu">

<dt class="title"><a href="#">starter1
</a></dt><dt class="price">£0-00GBP
</dt>
<dd>body information
</dd>
<dt class="title"><a href="#">starter2
</a></dt><dt class="price">£0-00GBP
</dt>
<dd>body information
</dd>
<dt class="title"><a href="#">main 1
</a></dt><dt class="price">£0-00GBP
</dt>
<dd>body information
</dd>

<dt class="title"><a href="#">main2
</a></dt><dt class="price">£0-00GBP
</dt>
<dd>body information
</dd>

</dl>


any wisdom welcome.

Bazz
_Aerospace_Eng_
09-24-2005, 03:00 PM
Is this what you want?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#meal_menu_div {
margin: 0 190px;
text-align: left;
font-size: smaller;
color: #1E4B52;
line-height: 20px;
padding: 0;
overflow: visible;
border-top: 0;
}

#meal_menu_div a:link, #meal_menu_div a:visited, #meal_menu_div a:hover, #meal_menu_div a:active {
color: #ff8080;
}

#meal_menu_div dl {
width: 100%;
margin: 0;
padding:0;
}

dt.title {
float: left;
width: 70%;
background-color: transparent;
}

dt.title a:link, dt.title a:visited, dt.title a:hover, dt.title a:active {
padding: 0 45px;
font-weight: bold;
font-family: Georgia, arial, verdana, sans serif;

}
dt.price {
float: right;
text-align: right;
width: 28%;
background-color: transparent;
}

#meal_menu_div dl dd{
display: block;
width: 100%;
margin: 0;
background-color: transparent;
clear:both;
text-align:left;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>

<body>
<div id="meal_menu_div">
<dl>
<dt class="title"><a href="#">starter1</a></dt>
<dt class="price">£0-00GBP</dt>
<dd>body information</dd>
<dt class="title"><a href="#">starter2</a></dt>
<dt class="price">£0-00GBP</dt>
<dd>body information</dd>
<dt class="title"><a href="#">main 1</a></dt><dt class="price">£0-00GBP</dt>
<dd>body information</dd>
<dt class="title"><a href="#">main2</a></dt>
<dt class="price">£0-00GBP</dt>
<dd>body information</dd>
</dl>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>
bazz
09-24-2005, 03:09 PM
excellent thanks,

I had been working on it as you were and by using <dl id="meal_menu"> ( removing from the div, I nearly got it. Your clear div seems to be the clincher.

Great :thumbsup:

Bazz