Side points dissapearing in <ul>

[Scribe]

Hi guys,I've been designing a website for a friend's company and I've ran into a really annoying snag! I Have a side menu containing a ul in the about us section. It has a transparent background which is set using an image not a background to allow for certain bug fixes in certain browsers.When I place either the style information 'position: absolute;' or 'margin: x x x x;' into the ul, whilst it's fine on other browsers, at least ie 7 possibly others cause the points to the left of the list to disappear!I can't seem to fathom this.The website is at BROKEN LINKAny help would be greatly appreciated.

[jlhaslip]

Set the margin and padding to 0px for the ul and the li's.Then adjust them to work as you want them to.Browsers handle the margin and padding on ul/li's in various ways, so resetting them to 0 and then modifying them to suit all browsers is the suggested fix for cross-browser applications, afaik.

[rzea]

IE has SERIOUS issues with position:absolute; and you are suing that all over the place in your CSS.As a 'general' recommendation, I suggest you use position:absolute; as little as possible when designing websites.Now, as 'specific' recommendations, try these, hopefully one will work:A. Remove the position:absolute; declaration from your .sidemenu DIV and float it to the left.B. Remove the position:absolute; declaration from your .sidemenu ul. You can leave position:absolute; on your .sidemenu DIV, but I suggest you remove them overall (the position:absolute; declarations), and replace them with floats.Two small offtopics:1. I guess you haven't tested your site in IE6... you'll probably say "Nah, I don't care, I didn't create the site for older browsers ". Well, IE6 is still EXTREMELY heavily used and the fixes to make the site work on IE6 are very, very simple. Just something for you to think about.2. I tested your site in the following browsers and here are some issues:• Firefox 3, Google Chrome, Safari 3.1.1: The 'About Us' menu is in Times New Roman font.• IE6: The backgrounds can't be displayed at all (IE doesn't not support alpha channel in PNG files) - Check this site to implement it via java script: http://www.twinhelix.com/css/iepngfix/demo/• Firefox 2, Opera 9, IE7: Everything works fine.Hope this helps.--Doh! Fixed. Tnx!

[jlhaslip]

that link refers to your D: drive. probably won't work.

[Jerry62704]

Hi guys,I've been designing a website for a friend's company and I've ran into a really annoying snag! I Have a side menu containing a ul in the about us section. It has a transparent background which is set using an image not a background to allow for certain bug fixes in certain browsers.When I place either the style information 'position: absolute;' or 'margin: x x x x;' into the ul, whilst it's fine on other browsers, at least ie 7 possibly others cause the points to the left of the list to disappear!I can't seem to fathom this.The website is at EPS tempAny help would be greatly appreciated.

I see the list in IE6. Not the same as I see it in FF3, but it is visible. The font is larger and intrudes on the text to the right. The position is to the left so you lose the bullet (or did you want that?).

[Scribe]

Thanks a lot so far guys. I have used absolute a lot because many of my javascript and css techniques will work with no other setting.Jl, your browser is broken! :)Ricardo, thanks, I still can't get it working, if I take absolute off the ul I lose the ability to hover over the text due to the image sitting on top. I have actually already implemented some of the ie 5.5/6 fixes, I was just waiting until I solved this issue to throw in the rest. It's actually adding the first steps that is causing my issue. I could fix ie 7 support if I took away ie 6 support.Jerry, my problem is exactly that the bullets aren't showing! Even if I aligned the text to the right they still wouldn't show, it's not that they're cut off It's such a tough one to explain.

[Jerry62704]

Jerry, my problem is exactly that the bullets aren't showing! Even if I aligned the text to the right they still wouldn't show, it's not that they're cut off It's such a tough one to explain.

I wasn't sure if you wanted them (bullets) or not. If you want to see them in IE, add a padding-left: 20px; to your css. I didn't try it in FF to see what it would do there, but worse case you add it conditionally. You might also want to try: list-style-position: inside}

[Scribe]

I wasn't sure if you wanted them (bullets) or not. If you want to see them in IE, add a padding-left: 20px; to your css. I didn't try it in FF to see what it would do there, but worse case you add it conditionally. You might also want to try: list-style-position: inside}

That's sorted it. Thanks a bunch!