4 replies to this topic

[cosmouse]

Alrighty, those of you that have helped me before know the drill.

Website: http://ehko.net/1/beta/index.php
CSS: http://ehko.net/1/beta/iestyle.css

My first problem is the picture. If you visit the website in Firefox, you can see the opacity changes, but in IE7, there are none. Is there a way to fix this, or a way to emulate it without using CSS?

The second problem is the lists. If you scroll down to the second content box, you'll see following list:

• Pellentesque lorem.
  
  
• Ut a ante ac nisl.
  
  • In non mi. Aliquam vel orci.
• Maecenas arcu.
  
  
• Donec varius. Duis suscipit.

The problem is fairly obvious (at least to me). In non mi. Aliquam vel orci. and the bullet above it are spaced oddly. I can't pinpoint what exactly is causing the problem.

[Diaz]

The problem with the list lies within your XHTML code.

You have to unordered list element tags.:

<ul>
<li>Pellentesque lorem.</li>
<li>Ut a ante ac nisl.</li>
<ul>
<li>In non mi. Aliquam vel orci.</li>
</ul>
<li>Maecenas arcu.</li>
<li>Donec varius. Duis suscipit.</li>
</ul>

Try:

<ul>
<li>Pellentesque lorem.</li>
<li>Ut a ante ac nisl.</li>
<li>In non mi. Aliquam vel orci.</li>
<li>Maecenas arcu.</li>
<li>Donec varius. Duis suscipit.</li>
</ul>

As for the first problem I believe (Not 100% though) IE doesn't support opacity in CSS.

Hope this helps.

[cosmouse]

Your proposed fix for the list defeats the purpose of this thread :'( If I did that, it would simply remove the multi-layered list (if multi-layered makes sense).

As for CSS opacity, Microsoft is silly for taking that out (it works on IE6).

[rc69]

Last time i tried to nest unordered lists in IE7 i had to wrap the second in a list tag:

<ul>
<li>Pellentesque lorem.</li>
<li>Ut a ante ac nisl.</li>
<li>
	<ul>
	<li>In non mi. Aliquam vel orci.</li>
	</ul>
</li>
<li>Maecenas arcu.</li>
<li>Donec varius. Duis suscipit.</li>
</ul>

As your account appears to be suspended, i can't check the code for myself. But if that doesn't fix the problem, have you tried adjusting the margin/padding for the ul element?

Edited by rc69, 21 August 2007 - 02:07 PM.

[cosmouse]

edit: the account is now unsuspended, so you can easily view the codes.

Hm.. I don't know why I'm suspended, I'll have to look in to that.

Anyways, I've tried what you said, the first gave this outcome (wrapping the nested list):
 Untitled_2.gif   3.04K   34 downloads

When removing the top padding, it gave me this:
 Untitled_4.gif   2.92K   33 downloads

I'd hate to clutter this post with the code, but until I can get things figured out with my host, it seems like I have to. (This is the iestyle.css file; the problem area is in the /*content*/ section (near the bottom).)

/* 
Resetting browser margins, padding, etc 

The reason we do this, is that all browsers 
have a default padding etc and so we want 
to remove these so that we are starting on 
an even playing field with all browsers.
*/

* {
    border:0px;
    margin:0px;
    padding:0px;
}


/* Body style and container */

BODY {
	text-align: center;
	font-family: "Arial", "Tahoma", sans-serif;
	font-size: 9pt;
	color: #999966;
	background-image: url(img/background.gif);
	margin: 0;
}

#container {
	width: 433px;
	margin: 0 auto;
}

/* Header + Navigation */

#header {
	width: 433px;
	height: 47px;
	background-image: url(img/header.gif);
	background-repeat: no-repeat;
}

#transbar {
	width: 100%;
	height: 5px;
	background-image: url(img/trans-bar.png);
}
#nav {
	margin-left: 0px;
}
#nav ul {
	text-align: left; 
	margin-top: -4px;
	padding: 0px;
	list-style-type: none;
}

	#nav ul li { 
		display: inline;
        line-height: 26px;
		}

	#nav ul li a
		{
			text-decoration: none;
			padding: 10px 26px 12px 26px;
			background-image: url(img/button-default.png);
			background-repeat: repeat-x;
			font-family: "Arial", "Tahoma", sans-serif;
			font-size: 9px;
			color: #FFF;
			margin-left: -2px;
		}


	#nav ul li a:hover
		{
			background-image: url(img/button-hover.png);
			background-repeat: repeat-x;
		}
		
	#nav ul li a.current
		{
			text-decoration: none;
			padding: 10px 26px 12px 26px;
			background-image: url(img/button-hover.png);
			background-repeat: repeat-x;
			font-family: "Arial", "Tahoma", sans-serif;
			font-size: 9px;
			color: #FFF;
			margin-left: 0;
		}
	#nav ul li a.current:hover
		{
			background-image: url(img/button-hover.png);
			background-repeat: repeat-x;
		}
	#nav #spacer {
			width: 10px;
	}
	#nav ul li.light {
			padding-left: 61px;
	}
	#nav ul li a.light
		{
			text-decoration: none;
			padding: 10px 13px 12px 13px;
			background-image: url(img/button-light-default.png);
			background-repeat: repeat-x;
			font-family: "Arial", "Tahoma", sans-serif;
			font-size: 9px;
			color: #FFF;
			margin-left: -2px;
		}

	#nav ul li a.light:hover
		{
			background-image: url(img/button-default.png);
			background-repeat: repeat-x;
		}
		
/* Content */
.content {
	width: 433px;
	margin-top: 15px;
	}
.c-header {
	background-image: url(img/content-heading.png);
	width: 433px;
	height: 47px;
	}
	.c-header h1 {
		font-family: "Myriad","Trebsuchet MS","Tahoma","Arial",sans-serif;
		font-size: 12px;
		color: #AAAA7F;
		text-align: left;
		padding: 20px 0px 0px 20px;
	}
		.c-header h1 strong {
			font-weight: bold;
			color: #8F8F63;
		}
.c-text {
	width: 409px;
	height: 100%;
	background-image: url(img/content-background.png);
	font-family: "Arial", "Tahoma", sans-serif;
	font-size: 9px;
	line-height: 15px;
	text-align: justify;
	color: #999966;
	padding: 10px 12px 10px 12px;
	}
		.c-text a, a:link, a:visited {
		color: #CCCC66;
		}
		.c-text a:hover, a:active {
		color: #999966;
		}
	.c-text ul {
		list-style-type: none;
	}
	.c-text li { 
		background: url(img/bullet-img.png) left center no-repeat;
		padding-left: 20px;
		/* padding-top: 2px; */
	}
.c-footer {
	background-image: url(img/content-footing.png);
	width: 433px;
	height: 28px;
	}
	.c-footer2 {
	margin-bottom: 10px;
	}
	.c-footer ul {
		margin-left: 150px;
		height: 12px;
		padding-left: 3px;
		}
	.c-footer li {
		display: inline;
		text-decoration: none;
		line-height: 12px;
		}
			.c-footer li a {
				background-image: url(img/button-light-default.png);
				font-family: "Arial", "Tahoma", sans-serif;
				font-size: 9px;
				color: #FFF;
				text-decoration: none;
				padding: 10px 13px 12px 13px;
				}
			.c-footer a:hover {
				background-image: url(img/button-default.png);
				}
img {
	margin: -5px 10px 0px -5px;
	padding: 3px;
	background: #FFF;
	border:1px solid #efefc6;
}
	img:hover {
		margin: -5px 10px 0px -5px;
		padding: 3px;
		background: #FFF;
		border:1px solid #efefc6;
	}

Edited by cosmouse, 21 August 2007 - 03:17 PM.