CSS - Bg Shows In Ie Nothing Else.. Works In Firefox.

The website
Quote:
downloadwarez.org


CSS
Quote:
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }


/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }

/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;}

/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: none; }

/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }

/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }

.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 1em Arial, Sans-Serif; }

/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}

/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }

The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera.

The code looks ok, so i think it must be CSS. Can anyone help

http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm

Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden.

I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all.

Code:

<div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div>

What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long.

I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test

the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone.

Aaron


<style type="text/css">
body {
background-image: url('images/main_background.jpg');
background-color:#000000;
background-repeat: no-repeat;
margin: 0px;
}
.top_text {
font-size: 14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFF00;
font-weight:400;
}
.bold_grey{
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
.small_text{
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
form {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
font-weight:300;
}
.select {
font-size:9px;
height:15px;
}
.input {
font-size:9px;
height:16px;
width:160px;
}
.zip {
width: 94px;
height:16px;
font-size:9px;
}
.Footer_links{
color:#CCCCCC;
font-size:14px;
font-weight:300;
text-decoration:none;
}

</style>

hi

The following CSS code works in Firefox, but not IE.

The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE.

Does anyone know what I need to change it to to fix the problem?

Code:

		html, body
		{
			margin: 0;
			padding: 0;
			height:100%; 
			max-height:100%; 
			font-size: 90%;
			font-family: verdana, sans-serif, arial, helvetica;
			background-image: url('images/gradient.jpg');
			background-repeat: repeat-x;
			background-color:#fff;
		}
		
		#header
		{	position: fixed;
          		top: 0px;
           		left: 0px;
           		width: 100%;
           		height: 100px;
           		z-index: 1;
			height: 50px;
			margin-bottom: 2em;
			background-image: url('images/gradient2.jpg');
			background-repeat: repeat-x;
		}

		#topmenu
		{
			position: absolute;
			left: 250px;
			top: 30px;
			width:560px;
		}

		#stats
		{
			position: absolute;
			right: 15px;
			top: 5px;
			text-align: center;
		}

		#gutter
		{
			float: left;
			width: 3%;
			height: 1px;
		}

		#col
		{
			float: left;
			width: 70%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#rescol
		{
			float: left;
			width: 94%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}

		#rescol a {		
			text-decoration:none;
		}

		#rescol td {		
			text-align: center;
		}

		#col1
		{
			float: left;
			width: 45%;
			margin-bottom: 1em;
			border-right: 1px solid #ccc;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col2
		{
			float: left;
			width: 15%;
			margin-left: 3%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col3
		{
			position: absolute;
			right: 30px;
			margin-left: 3%;
			margin-bottom: 1em;
			margin-top: 5.5em;
		}
		
		#footer
		{
			clear: both;
			height: 50px;
			padding: .5em;
			font-size: 11px;
		}

		#footer ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 1em 0 0 0;
			list-style: none;
		}

		#footer li a, #footer li span {
			display: block;
			float: left;
			padding: 5px 1em;
			border-right: 1px solid #ccc;
		}

		#footer li span.copyright {
			border-right: none;
		}

		a:hover {
			color: #003;
		}

		h1
		{
			margin: 0;
			padding: .5em;
		}
		
		h2
		{
			margin: 0;
		}

		hr.c {	
			border: none 0; 
			border-top: 1px solid #ccc;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
			height: 1px;
		}


		<!--[if IE 6]>

		body
 		{
  		overflow: hidden;
  		}

		div.content
 		{
 		height: 100%;
  		overflow: auto;
  		}

		<![endif]--> 

Hello. I am going to change my site to using a CSS file for font color and display and such. I am pretty new at using CSS files with my web site, other that messing with it in modifying my blog skin. I created one I want to use at: http://rhodesfamily.org/style.css, but I can only get it to work with IE. Here is my test page: http://rhodesfamily.org/index_test.htm. It will not display in Firefox, which is my main browser . Your help would be greatly appreciated! Thanks, Carl

I'm having a display problem with the following code in Firefox.
It works fine in IE. Basically I want the layout to look as close as it does in IE from firefox (I think I'm using the W3C CSS correctly?)...

Any suggestions?

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body 
{
	background-color: #6699CC;
}

#topBanner 
{
	overflow: hidden;
	width:100%;
	height:15%;
}

#contentTable
{
height: 84%;
width: 100%;
border:1px solid black;
}

#leftMenu
{
	background-color: #6695FF;
	width: 15%;
	height: 100%;
	display: block;
	border: 8px outset #999999;
	padding: 1px;
	vertical-align: top;
	
}

#contentArea
{
	background-color: #FFFFFF;
	width: 85%;
	height: 100%;
	display: block;
	vertical-align: top;
	border: 2px solid #999999;
}

.menuChildShow
{
 display: yes;
}

.menuChildHidden
{
 display: none;
}
-->
</style>

<script type="text/javascript">
	function toggleMenu1(objName) {
		temp = document.getElementById(objName);
		if(temp.className == "menuChildShow") {
			temp.className = "menuChildHidden";	
		} else {
			temp.className = "menuChildShow";
			temp.style.color = "#00ffff";
		}
	}
</script>

</head>
	<body>
		<div id="topBanner">
				 <img src="" width="2048" height="75">
		</div>
		<table id="contentTable">
  		<tr>
    		<td id="leftMenu">
						<div id="menuItem1" class="menuParent">
								 <a onclick="javascript:toggleMenu1('sub1Item1');">Item #1</a>
								 
								 <div id="sub1Item1" class="menuChildHidden">
  								 Item #1 Child 1<br />
  								 Item #1 Child 2<br />
  								 Item #1 Child 3<br />
  								 Item #1 Child 4<br />
								 </div>
						</div>
						
						<div id="menuItem2" class="menuParent">
								 <a onclick="javascript:toggleMenu1('sub2Item1');">Item #2</a>
								 	<div id="sub2Item1" class="menuChildHidden">
  								 Item #2 Child 1<br />
  								 Item #2 Child 2<br />
  								 Item #2 Child 3<br />
  								 Item #2 Child 4<br />
								 </div>
						</div>
    		</td>
  			<td id="contentArea">
  					Content area
  			</td>
  		</tr>
		</table>
	</body>
</html>

Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong?

http://markspixel.com/smoothtobacco/bio.htm

Code:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>


<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#content {
position:relative;
z-index:1;
}



.style1 {
	margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->


</head>

<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>

http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html
http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css

those are my two files, it seems to be working okay in IE6/win but not in firefox...

anyone can maybe help me out? thanks it is much apprceiated.



edit: also both files validate

Thanks for reading my question.

Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox?

The hover works in both, but the visited only works in IE.

I don't have a url for this page yet, so I've put it under my band web page.

www.pierced.ca/Kelly/index.htm

Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work.

Thanks again,

Brad

I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different.

Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous.

The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess!

Thank you so much in advance,
-lindsey

Hey,
Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly.

Ive never encounterd this before, and have run out of ideas.
What do you think?

Website Here

Cheers,
Smitch

Ok so I have a page, and The opacity only works in firefox, not IE.

This is the code im using

img{border:0; filter:alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;}
img:hover{filter:alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95;}

any ideas?

Hi

I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE.

Here is the link: Look first in Firefox at my menu then look at it in IE.

http://www.bcit.gimppro.co.uk/index.php

Also is their some way to test my CSS code to make sure it works in all browser.

PHP Code:
#menu {
top:5px;
width: 8.87em; /* set width of menu */
background: #eee;
width: 100%;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: relative;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

div#menu ul ul ul,
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8.87em;
float: left;
}

div.container{
    position:relative;
    top:0px;
    left:0px;
    width:995px;
    height:auto; 
}

#login{
    position:absolute;
    top:300px;
    left:745px;
    height: auto;
    width:240px;
    font: bold 11px/16px arial;    
}

#content{
    position:absolute;
    top:300px;
    left:0px;
    height: auto;
    width:695px;
    margin:0 .25em;
    padding: 5px 15px; 
    font: bold 11px/16px arial;    
    border: 1px solid black; 
}
#content h1, h2 {
    font-weight: bolder; 
}

#banner{
    position:absolute;
    top:0px;
    left:0px;
    height: auto;
    width:1000px;
} 

Check out this site (WIP)... the issue specifically is with the Screenshots table...

Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect.

Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page...

I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images.

What makes IE decide to expand the <div> tag automatically.

Here's the code pertaining just to the screenshots section.

Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks!

the CSS:
---------------------------------------------------------
.screenshots_table {
width: 100%;
border: 1px solid #000;
backgroung-color: #061840;
line-height: 15px;
}

#screenshots_table_overflow {
overflow: auto;
padding: 0px;
display: block;
}
---------------------------------------------------------

the html:
---------------------------------------------------------
/* --- START SCREENSHOTS CONTAINER --- */
// establish the number of screens in the directory
$dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/";
$screen_count = count (glob ($dir_path . "screen*.jpg"));

echo"<td colspan='5'>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
/* start screenshots details tab */
echo"<td>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
echo"<td><img border='0' width='38px' class='display_block'";
echo"src='images/tab_left.jpg'></td>";
echo"<td width='100%' background='images/tab_bg.jpg'></td>";
echo"<td><img border='0' class='display_block' width='70px'";
echo"src='images/tab_screenshots.jpg'></td>";
echo"</tr>";
echo"</table>";
echo"</td>";
/* end screenshots tab */
echo"</tr><tr>";

/* start screenshots */
echo"<td>";
echo"<div id='screenshots_table_overflow'>";
echo"<table width='100%' border='0' class='screenshots_table'";
echo" cellpadding='0' cellspacing='0'>";
echo"<tr>";

// iterate through loop and display linked screenshots as req'd
for ($i = 1; $i < $screen_count + 1; $i++) {
echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>";
echo "<a href='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox'
class='horizontal'><img border='0' class='border'
src='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/small" . $i . ".jpg' /></a>";
echo"</td>";
}

echo"</tr>";
echo"</table>";
echo"</div>";
echo"</td>";
/* end screenshots */
echo"</tr></table>";
echo"</td>";
/* --- END SCREENSHOTS CONTAINER --- */
---------------------------------------------------------