Mysterious CSS List Problem [Archive]

View Full Version : Mysterious CSS List Problem

ideaessence

01-09-2010, 02:52 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.

Here's the strange thing. 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.

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 haven't figure what yet.

Has anyone had this problem before? Does anyone know how how to fix it so it looks identical in both Internet Exploder and Firefox?

Thanks.

the_pm

01-09-2010, 03:36 PM

If you're going to use list-style-type to show those square bullets, you're going to need to have margins for your <li> elements. Here's the code from your style sheet:

.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;
}With margin:0 on the list and line items, there is no place for IE to put the bullet. IE puts that bullet into the margin of a line item. Other browsers move it into the line item in the absence of margins (I think - I'm not certain this is the correct explanation, but in practice, this is what appears to happen).

For a consistent look, try adding 10px of left margin to both the ul and li elements in your CSS, and add your list-style-type style to the li item as well - if memory serves me, some older browsers will require this. This will ensure your bullets have a place to live in all browsers. You'll probably need to make adjustments to other elements as well, to accommodate the margins you're using.

Almost as easy (maybe more so?) would be to create an image of a square and use it as a background object behind your links or your line items, set to the left and center, with padding on the left side of your links to prevent them from overlapping the background.

ideaessence

01-09-2010, 04:00 PM

That CSS you quoted works in IE7 when I separate it and make a sample page.

<!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>

It has a "margin: 0;" there and everything. Are you sure that's the problem?

the_pm

01-09-2010, 05:24 PM

It's tough to tell for certain, because of how everything is floated. I'm in a rush to get out the door, but if I get a second tomorrow when I'm back and this hasn't been answered, I'll see what I can do.

brianhoney

01-09-2010, 07:05 PM

It would seem that you fixed this... I can see the bullets. In IE8 at least.

ideaessence

01-09-2010, 08:00 PM

It is almost completely fixed now. The default in Internet Exploder is different than the default in Firefox for the padding. Once the padding was specified for:
.leftlinks ul
the margin values were set too. Doing so raised an inconsistent rendering of width. I changed the width of:
.leftlinks
They're not identical yet but both of widths are at least reasonable in both browsers. If they don't look identical at the time you read this, and you want to take a shot at figuring out how to get the widths identical and what the last problem is, feel free to take a shot. (I would still love to make it look the way it does in Firefox in both browsers.) I'll still be checking back.

Thanks.

the_pm

01-11-2010, 10:05 AM

Generally speaking, I find it to be a good idea to reset the default values for padding and margins for all elements to 0 right at the top of the style sheet. Then simply style in the margins and padding you desire as you go (keeping in mind IE6 will double your margins/padding on floated elements - the way around this is to add display:inline to those elements, which all other browsers will correctly ignore).

Try adding this to the top of your stylesheet:

* { list-style:none ; margin:0 ; outline:none ; padding:0 }

This will kill all list styles, all margins, all padding and it will remove that annoying dotted box effect from around links in Firefox (outline).

This will probably throw your design off a bit, but that's because you're not longer relying on browser defaults, which, as you've seen are *not* consistent from browser to browser (nor are consistent defaults mandated by any authority, so no browser is doing anything wrong by being different in this case).

Once you've reset everything, just build in the exact settings you want for each element. This is a good way to start with any design!