Lists Appear Broken in IE 9

[chaseman]

Here's a screenshot:

 

 

 

Here's the code

 

.widget { border-bottom: 2px solid skyblue; padding: 0 0 25px 15px; margin-bottom: 25px; font-size: 14px; letter-spacing: 0.08em; line-height: 1.3em; color: #222; }
.widget h4 { font-size: 18px; margin: 0 0 0.3em -0.7em; letter-spacing: 0.07em; }
.widget h2 { font-size: 18px; margin: 0 0 0.3em -0.7em; letter-spacing: 0.07em; color: black; text-indent: -1em; padding-bottom: 0.5em; }
.widget p { letter-spacing: 0.064em; line-height: 1.3em; color: #222; }
.widget li { letter-spacing: 0.064em; line-height: 1.3em; border-bottom: 1px solid #d1dcdc; width: 90%; padding: 0 0.5em 0.5em 0.5em; list-style-position: inside; list-style-type: disc; font-size: 15px;  }
.widget li:hover { background-color: #f7fafa; } 
.widget a { width: 100%; display: block; }
.widget ul { margin-left: -30px;  }

 

I'm working on a Wordpress template and what you're seeing is the sidebar where you insert the widgets.

 

In Chrome the lists are showing fine but in IE 9 it appears broken, which does not account for all widgets only for some, as you can see while the categories widget is broken, the recent comments widgets displays fine.

 

Any suggestions?

[cssfreakie]

what do you mean with broken?

 

Is it that the bullet of the list appears above the text? As shown with "categories"

Maybe have a live example of this because the image won't tell me anything about the markup nor of the dimensions.

[chaseman]

It's on my local server that's why I didn't have a live example, I'll try to upload one in a min and let you know the link to it.

[cssfreakie]

It's on my local server that's why I didn't have a live example, I'll try to upload one in a min and let you know the link to it.

okidoki

[chaseman]

Sorry for the delay, I had MySQL database problems at first, and then it wasn't as easy to get the content together with the template uploaded and working on the shared hosting server.

 

But here's a live example of the template I'm working on. I know the CSS may seem a little bit messy but I will clean that all up later and make it more efficient, I was experimenting a lot thus a lot of duplicate code occurred.

 

As you can see in Chrome and Firefox the lists will appear fine, but in IE 9 the lists of the category widget will appear as shown in the screenshot:

 

www.lolsmile.com/wordpress2

 

 

 

 

 

[cssfreakie]

try this:

 

Both firefox and chrome gave the same results here, so maybe try the following.

 

.widget li {
    border-bottom: 1px solid #D1DCDC;
    font-size: 15px;
    letter-spacing: 0.064em;
    line-height: 1.3em;
    list-style-position: outside;  /* changed this to outside instead of inside */
    list-style-type: disc;
    margin-left: 20px; /* added this to adjust the outside  display */
    padding: 0.6em;
    width: 90%;
}

 

or do this

 

.widget a {  
    display: inline; /* inline instead of block,  incase you like that inside-list-position thing */
    width: 100%;
}

[chaseman]

The second one did the trick nicely, I simply changed it from block to inline and it worked.

 

I guess because I had it on block it was adding a break line to the top right?

 

Thank you a lot.

 

What do you (as a CSS freak) think of the design btw?

 

 

 

[cssfreakie]

The second one did the trick nicely, I simply changed it from block to inline and it worked.

 

I guess because I had it on block it was adding a break line to the top right?

 

Thank you a lot.

 

What do you (as a CSS freak) think of the design btw?

 

well if you set an a element to display:block it will behave as a block element that needs float to sit on the same line with other block elements.

 

as far as the look of your website. there is no visual distinction between the main column and the aside (right side) I would give the aside a not to bright color so that the main column pops out and the less crucial info (right side) is asking less attention.

 

 

maybe try this:

 

#sidebar {  /* at line 63 at style.css */
    background: none repeat scroll 0 0 #F3F3F3;  /* added a bit color */
    float: right;
    padding: 10px 0 20px 10px;
    width: 30%;
}

 

anyways good to hear it worked