Style Sheet problem - different rendering in MIE

goriillita · 12-12-2005, 05:00 PM

I am doing a pro bono site: http://www.redcrosswesterncolorado.org . I designed the site using Mozilla Firefox 1.5 as my browser. The issue is with the navigation links in the left-hand blue border. The way these display in Firefox (and Netscape 7.1) is correct (how I intended). However, in MIE 6.0 (and Opera) they are indenting too far to the right, causing them to be very narrow (wrapping almost every word) and making the navigation column very long.

: I am relatively new to CSS and am trying to help out the Red Cross in my area. If anyone can help me figure out how to make MIE comply with my style sheet as it displays in Firefox, I and the Red Cross would be beyond grateful.

cdc08x · 12-12-2005, 08:12 PM

It's your CSS code as now (I got the last rows):

Code:

...
#links UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; COLOR: #ff0000; PADDING-TOP: 0px; LIST-STYLE-TYPE: disc
}
#links LI {
	MARGIN-LEFT: 25px
}

Modify it this way:

Code:

...
#links UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; COLOR: #ff0000; PADDING-TOP: 0px; LIST-STYLE-TYPE: disc; margin-left:20px;
}
#links LI { /* set it off or just don't write anything for this element!! */ }

and you'll see the same indentation for links on both browsers

Glad to help you!!

drhowarddrfine · 12-12-2005, 10:48 PM

Validate your code. You are missing several end tags.