Log in

View Full Version : CSS border line problems in IE - Firefox works fine


Big John
06-09-2008, 02:35 PM
Hi there, Can I ask for some help please.
I have set up a link list (Side Menu) on a web site I am currently designing, at the bottom of each link in the list I want a line to break the list up, I can get it to work just fine in Firefox, Opera and Safari, but the little pesky Internet explorer just won’t put the line completely to the left hand edge, it leave the bullet and starts the line at the start of the word.

Any advice/help would be very helpful at this point.

Thanks in advance.

John

Header information:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->


Here is the code as it stands.


ul.side {
border-bottom: #aaaaaa solid 1px;
display:block;font-size: small;
font-weight:normal;
color:#444444;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin-top:0px;
margin-bottom:0px;
padding-top: 0px;
padding-bottom:0px;
}

li.side{
list-style-type: disc;
font-size: small;
font-weight:normal;
color:#444444;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top:0px;
margin-bottom:0px;
padding-top: 0px;
padding-bottom:0px;
}

li.side a {
text-align: left;
font-weight:normal;
text-decoration:none;
font-size:small;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #008800;
}

li.side a:hover {
text-align: left;
font-weight:normal;
text-decoration: underline;
font-size:small;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
}
Medyman
06-09-2008, 07:05 PM
Can you paste some of the HTML that you're using in relation to the list? I think I know what you're trying to do but I'll confirm before I giving you irrelevant fixes.
Big John
06-09-2008, 09:26 PM
Can you paste some of the HTML that you're using in relation to the list? I think I know what you're trying to do but I'll confirm before I giving you irrelevant fixes.

Hi there Medyman. First off thanks for comming back to me.

You requested to see the code where the class is sat, that is no problem.

<tr>
<td height="0" valign="top" class="Side_menu_heading">• Related Internet Links</td>
</tr>
<tr>
<td height="0" valign="top"><ul class="side">
<li class="side"><a href="http://uk.ask.com/">Related links <br>
go in here</a></li>
</ul></td>
</tr>
<tr>
<td height="0" valign="top"><span class="Side_Menu_BGrey_XS">We are not responsible for the content of external internet sites</span></td>
</tr>
<tr>

Hope this helps.

Kind regards

John
Medyman
06-15-2008, 04:28 PM
I see what you mean.

One way to get rid of this would be to assign a left margin to the <ul>.

Another would be to simply assign your border to the table cell that the list is contained instead of the list itself. The visual effect would be the same but with less headache.