Sorting Small CSS Issues (CSS Freakie)!!!

[chaseman]

I have a few issues with my theme of my blog at: http://www.webprofitideas.com

 

 

1. Arrow Image Alignment Problem on Recent Posts List (Right on The Start Page)

As you can see on the start page the arrow images are not correctly aligning to recent posts list, the list entries always show below the arrow image. The Good Starting Points section shows correctly. BTW this problem only occurs in Firefox 4 and IE9 in Chrome it shows correctly.

 

2. Arrow Image Problem in the Navigation Bar with IE9

If you look in Internet Explorer, the arrow image of the menu item HOME is NOT in front of home, rather it is at the far right side of the navigation right BEHIND the menu item RESOURCES.

 

3. Arrow Image Problem with the Widgets on the Blog Page (with all Browsers)

With all browsers the li tags in the widget area of the sidebar on the BLOG page do not show an arrow image.

 

It should be like this:

Catgories:

>> Business

>> Coding

>> Marketing

 

In style.css I have it like this:

.widget li { 
letter-spacing: 0.06em; 
line-height: 1.3em; 
border-bottom: 1px solid #d1dcdc; 
width: 90%; 
padding: 0.8em; 
list-style-position: inside; 
list-style-image: url('../images/arrow_small.png');   
}

 

In the past the arrow image did show up then I changed a few things on the design and now it suddenly doesn't anymore, and I can not figure out why.

 

I hope to hear some suggestions.

[chaseman]

I was able to solve issue 1 and 3, but I still have not solved issue 2.

[chaseman]

Concerning Issue 2:

 

Only if I put #nav to float: left, that's where the arrow image will be position correctly, but I'd like to have the nav floating on the right side.

 

IE is such a problem browser, they should completely discontinue it.

[chaseman]

Solved Issue 2 as well.

 

I didn't have a closing anchor tag on the twitter button, and since IE is so tight about code it was causing the problem, while the other browsers weren't.