UL and IE style issue

HTML & CSS
1

Hi all,

  I have created a PHP function which programmatically generates an XHTML Strict  Unordered List based on data from my Database. After alot of programming, the list is as I would like it, and it passes validation. The list is appearing spot on in FF, Chrome, Safari etc, but IE has taken upon itself to and some stylistic changes (why am I not supprised).

Here is some sample code :-

Could someone kindly tell me why IE is generating puny little discs, and large squares when all other browsers keep a uniform size ? is there anything I can do about this?

Also why in IE does it not generate a square inline with a disc as it indents in, like it does on all the other browsers?

Many thanks for your help,

:blush:

2

You you post the code in your post? If it’s HTML, use [highlight=html4strict]

. If it's css, use [[b][/b]highlight=css]

.

Also, a side-by-side screenshot would be nice, to show exactly where the problems are.

3

Hello there,

Sorry I originally uploaded an attachment but its waiting to be approved - please see code and screenshots below. I didnt attach any CSS because it has no effect on what Im experiencing with or without my style sheet attached.

The left image is all other browers, the right is IE8 I believe.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>
<ul>
	<li>A Website</li>
	<li>
		<ul>
			<li><a href='#'>Some text</a></li>
			<li><a href='#'>Some text</a></li>
			<li><a href='#'>Some text</a></li>
			<li>
				<ul>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href='#'>Some text</a></li>
			<li>
				<ul>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href='#'>Some text</a></li>
			<li>
				<ul>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
					<li><a href='#'>Some text</a></li>
					<li>
						<ul>
							<li><a href='#'>Some text</a></li>
							<li><a href='#'>Some text</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>
4

The styling that you see on that page is the browser default. Pretty much no matter what way it’s displayed, Internet Explorer isn’t doing anything wrong. If you want to change things like bullet appearence and list indentation, you’ll need to use CSS.