Bulleted List CSS Problem in IE7

ideaessence

01-09-2010, 08:40 PM

Hi,

I am working on customizing a template for someone here:
http://www.ideaessence.com/mullaneylawoffices/

In Internet Exploder 7, the square bullets are not showing up. It looks exactly how it should in Firefox. I want to make it look just how it does in Firefox now, but in Internet Exploder as well. First, I searched and thought it was an issue with the CSS for the actual elements directly involved. I thought for sure I found the problem in this thread:
http://codingforums.com/showthread.php?t=140138

Here's the strange thing. I kept changing things to add a margins/padding but it didn't work no matter what I did. Then I copied and pasted the HTML of the unordered list and the corresponding CSS into a separate page. I also copied and pasted the DIV called "left-nav" and its corresponding CSS into the separate page. Here is what I copied, pasted, and opened:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
#left-nav
{width:220px; float:left;}

.leftlinks{
width:150px;
float:left;
}
.leftlinks ul
{
list-style-type: square;
text-align: left;
width: 100%;
padding-top: 2px;
}
.leftlinks ul li{
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px solid #E8D9BD;
margin: 0;
}
.leftlinks ul li a
{
text-align: left;
padding-left: 5px;
font-size: 12px;
letter-spacing:1px;
text-decoration: none;
color: #4E4739;
}
.leftlinks ul li a:hover
{
color: #4E4739;
padding-left: 5px;
text-decoration:underline;
font-weight:bold;
}
</style>

<div id="leftnav"><div class="leftlinks">

<ul>
<li><a href="#">Areas of Practice</a></li>
<li><a href="#">Estate Planning</a></li>
<li><a href="#">PA Estate Administration</a></li>
<li><a href="#">Why Have a Will?</a></li>
<li><a href="#">Medicaid</a></li>
<li><a href="#">Funeral Pre-Planning</a></li>
<li><a href="#">Federal Estate and Gift Taxes</a></li>
<li><a href="#">PA Inheritance Tax Rates</a></li>
<li><a href="#">Title Insurance</a></li>
<li><a href="#">Meet the Staff</a></li>
</ul>

</div></div>

</html>

When I opened the separate page, it looked perfect in both Internet Exploder and Firefox, just how I want it. I am guessing this means that the issue must be arising from the CSS or size of something it's surrounded in? I can't figure out what I need to actually write in order to fix this.

Does anyone know how how to fix it so it looks identical in both Internet Exploder and Firefox?

Thanks for any help.

Excavator

01-09-2010, 09:32 PM

Hello ideaessence,
Try removing the width on the ul to make room for the bullet -

.leftlinks ul
{
list-style-type: square;
text-align: left;
/*width:100%;*/
padding-top:2px;
}

Maybe even better, put the bullet inside the 100% width then margin it away from the side of the containing .leftlinks
Try this - .leftlinks ul
{
list-style: square inside;
text-align: left;
width:100%;
padding-top:2px;
margin: 0 0 0 5px;
}

ideaessence

01-09-2010, 10:15 PM

Hi,

Thanks for the reply. I have tried both suggestions. Both of them are a great start but raise a new challenge.

First suggestion: Removing the 100% width revealed the bullets but the text ran down 2 lines tall for most of the links and the width of each was small. But I did realize something while experimenting with it. I knocked the width down to 90% and the bullets still didn't show. I knocked it down to 50% and the bullets didn't show. I even knocked the width down to 1% and the bullets still didn't show. I wondered if it was just specifying a relative width that caused the bullets to not show up, made the width 1px. The bullets didn't show. So, specifying any width whatsoever makes the bullets not show.

Second suggestion:
The link list shows up too far to the left in Internet Explorer and too far to the right in Firefox. I have re-uploaded the page with the second code suggestion you posted:
http://www.ideaessence.com/mullaneylawoffices

It's definitely a lot closer to being fixed. Now there's only some type of inconsistent alignment issue. Also, it is not as wide as it was by about 4 or characters in width. Is case this help, here is the separate page I made where it looks perfect in both browsers:
http://www.ideaessence.com/mullaneylawoffices/test.html

Thanks again.

Excavator

01-09-2010, 10:27 PM

Looks like your seeing the difference in defaults between browsers.
Try changing your padding to look this bit highlighted in red -
.leftlinks ul
{
list-style: square inside;
text-align: left;
width:100%;
padding: 2px 0 0 0;
margin: 0 0 0 5px;
padding: 0;
}

ideaessence

01-09-2010, 10:46 PM

Excavator

01-09-2010, 10:52 PM

To counter defaults like that, I always add a reset at the top of my CSS.

Some people advise against this global reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/) and suggest you deal with each conflict directly. I'm kind of on the fence about it, I've been using the reset long enough I'm aware how widespread it's affects can be.

Anyway, like I said, I always use this or some version thereof -
* {
margin: 0;
padding: 0;
border: 0;
}

Excavator

01-09-2010, 10:58 PM

It's yet even closer now. When I made that change, it set the alignment in both browsers to all the way to left, so that part is consistent now. I adjusted the left margin value from 0 to 23px and got that part good. Now there's just 1 thing left, the width. It is not wide enough in Internet Exploder. Normally, I would just think to change the width and see what happens, but the width is already at 100%. I have uploaded the updated page here again:
http://www.ideaessence.com/mullaneylawoffices/

To show what's happening now, put a background color or .leftlinks and look at it in the two different browsers.

.leftlinks{
width:150px;
float:left;
background: #f00;
}

To fix the issue, adjust that width:150px to whatever actually fits the size of your li's.

OR... take another look at .leftlinks and decide if it's really needed at all. You could easily just eliminate it and style the ul itself.

ideaessence

01-09-2010, 11:15 PM

I haven't done anything for a while, but that universal selector brings back memories. I do remember using that universal selector to truncate everything whenever I made a layout from scratch. People advised against it but I don't remember anyone presenting any satisfying reason to me for why I shouldn't use it.

For this page, that didn't solve the issue but I think the post after that will lead to a solution. That color change explanation shows me what's going on now, so I think that should be good enough for me to trial and error until I narrow down what's causing it. Thanks so much!