CSS - Css Alpha Troubles

If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d.

Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style.

I couldn't find any other mention of this anywhere.

Does anybody know what causes this bug, or if there's a way to fix it?

Here is some code to reproduce:
Code:

/* CSS */
#qform ol {
            list-style-type:lower-alpha;
            }

#qform ol li {
               color:#333;
               height:25px;
               margin:10px 0;
               padding:0 0 0 20px;
               }

#qform ol li input {
                     margin:3px 5px 0 0;
                     }

#qform ol li label {
                     margin:0;
                     }

<!-- HTML -->
   <form id="qform" action="index.php" method="post">
    <fieldset>
     <ol>
      <li>
       <input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
      </li>
      <li>
       <input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
      </li>
      <li>
       <input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
      </li>
      <li>
       <input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
      </li>
     </ol>

     <input type="submit" value="OK" />
    </fieldset>
   </form>

In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should.

Thanks,

I'm working on a site that's a single php page with CSS file.
The site uses the same rotating image script, in 2 locations.
In the one location, it rotates the background image of a
div. I've set the opacity to 0.7, alpha filter at 70. This is working properly - it is affecting the opacity of the background image as I want.

The problem is that it is also affecting the opacity of static images that are contained within that same div.

Any ideas on how I can keep the opacity of the
rotating background image, without affecting the opacity of the static images that are on top of the background?

Site is triple-w . visitchester . ca

Relevant code he
FROM INDEX.PHP (IT'S THE JPG'S IN THE BIZCARDS FOLDER THAT I WANT TO BE SOLID)
<div id="rotator2" style="background-image:url(link to rotate2.php); opacity:0.7; filter:alpha(opacity=70); padding-top:20px;">

<a href="link here" target="_blank"><img src="bizcards/mecklenburghinn.jpg" height="170" width="207" style="border:#FFF; margin-left:5px; border-style:double;" /></a>
<a href="link here" target="_blank"><img src="bizcards/ropeloft.jpg" height="170" width="207" style="border:#FFF;border-style:double; " />
<img src="bizcards/banner3.jpg" height="170" width="207" style="border:#FFF;border-style:double;" />
<img src="bizcards/banner4.jpg" height="170" width="207" style="border:#FFF;border-style:double;" />
</div>

FROM MAIN.CSS:
#rotator2
{
width: 900px;
height: 655px;
font-family:"Courier New", Courier, monospace;
font-size:16px;
color:#FFF;
}

Thanks in Advance!

Regards,
ChesterNerd

I'm sure this can be fixed... But I'm not sure how!
I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue...

I'm using a CSS with the following background tag:

Quote:
background: #E8E9EA url(img/test.png) repeat-x 0 8px;


My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds.

I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case.

Any ideas?.
I wouldn't like to work-around this one...

Thanks.

Is it possible to overlay a colour onto a grayscale image to make it that colour with css? Such as using the alpha channel? Image in question would be a transparent background gif file.

Is there Opera compatible code for filter:alpha or -moz-opacity?

I have a problem involving the ie only filter alpha().

My problem is that any <div> that is nested inside another becomes clipped, see example:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		
	<style type="text/css" media="screen">
	#inBusinessHolder {
		position: relative;		
		}
	div.inBusinessBox {
		display: block;
		filter: alpha(opacity=80);
		position: absolute;		
		width: 250px;
		height: 80px;
		border: 1px solid black;	
		background: #cff;
		
		
		}		
	</style>	
</head>
<body>
<div id="inBusinessHolder">
	<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
	<div class="inBusinessBox" style="top:140px;left:110px;">text</div>	
	<div class="inBusinessBox" style="top:210px;left:120px;">
	text		
	<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>		
	</div>
</div>
</body>
</html>

Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle!

Hi,

First post, first issue ...

I am having some difficulties with the tag <table> in a fluid layout. without the attribute width set to 100%, the table is at the the top. If I set it up, the table goes down to the bottom.

Can anybody explain why?

----------- CODE --------------
<!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">
<head>
<TITLE>Title Here</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<STYLE>



#outer_wrapper {

width: 800px;

}


#container {

float: left;

}

#left {

background: #BBB;
width: 150px;

float: left;

padding: 0px;

border: solid 1px #000;
}


#main {

background: #EEE;
padding:4px;
padding-left:160px;
border: solid 1px #000;
}

table {
border: solid 1px #A4A4A4;
}
</STYLE>

</head>
<body>
<div id="outer_wrapper">
<div id="container">
<div id="left">
left here<br/><br/><br/><br/><br/><br/>
</div>
<div id="main">
<table cellspacing="0" cellpadding="2" width="100%">
<tr>
<td align="top" valign="top"><b>Line 1</b></td>
<td align="right">Line 2</td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
footer here
</div>
</center>
</body>
</html>

Can someone please take a look at my CSS on this page and let me know what fixes I need to implement/read about in order to get the page to look acceptable in IE.

I've checked and both the CSS and HTML are valid.

I'm feeling more and more confident in my CSS abilities as time goes by but I can't seem to get a grasp on ALL the fixes IE seems to require.

Thanks in advance!
stuboo

K, finally got a working drop down menu, pretty well exactly how I want it...however, in IE it works properly, but in FF it seems to grow in width and cover the drop down part up.
Probably somethin to do with a preset 'td' width in my html, but not sure.
Here
is what i'm talking about, and here is the style sheet.

Any help is greatly appreciated!

http://turkeybot.info/flash/play.php?id=121

When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem?

here is the code

[html]

<center>
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <table width="750" class="forumhome_bdr" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>



content content content content





></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

[/html]


well im adding something below "></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>"

but it appears within the border...see the attached picture

i want it to be under the border......
how?

Hello everyone.

I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera.

In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title</title>
    <style type="text/css">
    html,body {
		margin: 0px;
		background-image: url(http://i.imgur.com/NHbHt.png);
		background-repeat: repeat-y; 
		background-position: center; 
		background-color: #f7f4ee; 
		text-align: center;
    }
    #wrap {
		width:750px;
		margin:0px auto;
		text-align:left; 
    }
    #topleft { 
		display:block; 
		margin-left:1px;
		float:left; 
		width:572px; 
		height:127px; 
		background-color:#ccc;
		padding:0px 0px
		text-align:left;
    } 
    #topright { 
		display:block; 
		margin-left:1px;
		margin-right:1px;
		float:left; 
		width:175px; 
		height:127px; 
		background-color:#ffffff;
		padding:0px 0px;
		text-align:left;
    }
    #bottomleft { 
		display:block; 
		margin-left:1px;
		float:left; 
		width:572px;
		background-color: yellow;
		padding:0px 0px
		text-align:left;		
    } 
    #bottomright { 
		display:block; 
		margin-left:1px;
		margin-right:1px;
		float:left; 
		width:175px;
		background-color:green;
		padding:0px 0px;
		text-align:left;
    }
    </style>
</head>
<body>
<div id="wrap">
	<!-- Slideshow -->
	<div id="topleft">
		topleft
	</div> 
	<!-- Logo -->
	<div id="topright">
		<img src="logo.png" alt="logo" width="175" height="127">
	</div>
	<!-- Contents -->
	<div id="bottomleft">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit. 
	</div> 
	<!-- Menu -->
	<div id="bottomright">
		bottomright
		<ul>
			<li>Option 1</li>
			<li>Option 2</li>
			<li>Option 3</li>
		</ul>
		<p>Sidebar</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
	</div>

</div>
</body>
</html>

The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page.

So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this.

Thanks in advance for your time and advice. Cheers

Hi all

probably a stupid question but i cant find the answer
i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center
Cheers

I have been setting up a wordpress blog for my family, and have run into troubles getting it to show up the right way between browsers. In older versions of IE (5.0, 6,0), the blog posts are pushed down, and begin where the sidebars end. I am using a newer version of IE and the blog shows up perfectly. I have family members who use the older versions, and it shows up terrible. Is there anything that can be done with it? I am fairly new at web design. I am using the RockinPaper 3 column theme if that helps at all.

Thanks for any help and advice!