CSS - Ie6 Only Shows My Backround

Edit: Problem solved

This topic can be locked or deleted. I tried everything and figured out the problem

Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html

Any help pointing me in the right direction will earn you a friend for life.

On my website (www.tonecollector.com) I use CSS to get a dashed style to my header. The header also has a background image. Without the background image it works ok, but with the background image it doesn't.

The CSS:
.headertabel {
background-image: url(/img/headerbg.gif);
background-color: #FF7B08;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF6DB;
text-decoration: none;
border-left: 6px dashed #FF7B08;
border-right: 6px dashed #FF7B08;

}

The Problem:
http://www.tonecollector.com/dev/what.gif

Whats the solution?

When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area.

I think this is a css issue, but I can't figure it out.

http://alpineec.com/TEST/index.php

Any thoughts?

CSS
Code:

*
{
padding: 0em;
margin: 0em;
}

body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}

body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}

.contentarea
{
padding-top: 1.3em;
}



img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}



.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}

#outer
{
	z-index: 2;
	position: relative;
	/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
	border: solid 1px #fff;
	background-color: #fff;
	margin: 0 auto;
}

#header
{
position: relative;
width: 100%;

background: #5a5a5a;
}

#headercontent
{
	position: absolute;
	bottom: -56px;
	padding: 0em 2.0em 1.3em 2.0em;
	left: 274px;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}


#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}

#menu ul
{
	position: absolute;
	top: 2px;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
	position: absolute;
	left: 191px;
	bottom: 1.2em;
	z-index: 10;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}


pre {
 padding:10px;
 border: 1px dotted #eee;
 background-color:#f9f9f9;
}


#photodiv {
  background-repeat: no-repeat;
}

#aboutBLOCK{padding-left:40px;}

/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none; 
left: 10px;
padding:0; 
margin:0; 
position:relative; 
float:left;
}
#pg ul li {
display:inline; 
float:left; 
margin:0 0 8px 8px;
}
#pg ul li a {
display:block; 
width:90px; 
height:90px; 
	text-decoration:none; 
border:1px solid #000;
}
#pg ul li a img {
display:block; 
width:90px; 
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal; 
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute; 
left: 290px;
top:110px; 
width:300px; 
height: 300px; 
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute; 
left:9px; 
top:110px; 
width:270px; 
height:auto;
font-size:12px;color: black;
}

On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.!

Hi guys
I've added a banner zone in my site, but it is not looking good in FF nor IE !!

Site: www.stockestate.com

Code for the banner zone (div)

Code:

#banner {
	float:left;
	position:relative;
	top:0px;
	left:25px;
	width:468px;
	height:60px;
	margin-top: 50px;
	padding: 4px 4px 4px 4px;
}

Does any1 know what should I try to fix this ? Thanks

I have a CSS tabbed menu that shows horizontal in FF and Google Chrome (not sure about others at this point), but in IE7, it shows as vertical.

I've checked the CSS & HTML in the W3C validators and come back with no errors, so I'm not sure why I'm having this problem. Any suggestions you could offer would be appreciated.

CSS:
Code:

body {
	background-color: #5D5D5D;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

/* Layout Specs */

#container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}
h1, h2, h3, p {
	margin: 10px 255px 10px 15px;
}
div.logo {
	text-align: left;
}
div.content {
	position: absolute;
	background-color: #FFFFFF;
	color: #504E52;
	width: 950px;
	margin: 0px 255px 0px 0px;
	z-index: 1;
}
div.header {
	background-image: url('images/header.png');
	background-position: top;
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 950px;
	height: 200px;
	z-index: 2;
	clear: both;
}
div.rtcol {
	position: relative;
	float: right;
	width: 235px;
	background-color: #E7EEF9;
	color: #504E52;
	border-left: 1px solid #7BD5EA;
	z-index: 2;
}
p.rtcol {
	margin: 0px;
	padding: 0px;
}

/* Tab Menu */

ol#menu {
	height: 2em;
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
}
ol#menu li {
	margin: 0px 0px 0px 3px;
	float: left;
	text-align: center;
}
ol#menu a {
	background: url('images/tab.png');
	color: #504E52;
	display: block;
	float: right;
	height: 2em;
	line-height: 2em;
	padding-left: 10px;
	text-decoration: none;
	font-weight: bold;
}
ol#menu a:hover {
	background-position: 0 -80px;
}
ol#menu a:hover span {
	background-position: 100% -80px;
}
ol#menu li.current {
	background-color: #68B2C3;
	background-position: 0 -80px;
}
ol#menu li.current a {
	background-position: 0 -40px;
	color: #FFFFFF;
	font-weight: bold;
}
ol#menu li.current span {
	background-position: 100% -40px;
}
ol#menu span {
	background: url('images/tab.png') 100% 0;
	display: block;
	line-height: 2em;
	padding-right: 10px;
}

/* Text: Headings, etc. */

h1, h2, h3 {
	text-transform: uppercase;
	color: #6083BB;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.25em;
}
h3 {
	font-size: 1em;
}
h1.rtcol, h2.rtcol, h3.rtcol {
	color: #E36A07;
}

And the HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
 
<body> 
<div id="container"> 
	<div class="logo"><img src="images/logopng.png" alt="P.C. Quick"></div> 
	<ol id="menu"> 
		<li class="current"><a href="index.html"><span>Home</span></a></li> 
		<li><a href="services.html"><span>Services</span></a></li> 
		<li><a href="contact.html"><span>Contact</span></a></li> 
	</ol> 
	<div class="header">&nbsp;</div> 
	<div class="content"> 
		<h2>Test Title</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p> 
		<p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p> 
	</div> 
	<div class="rtcol"> 
		<h3 class="rtcol">Computer Training Courses</h3> 
		<p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info! 
	</div> 
</div>	
</body> 
</html> 

I have the following code which works fine in IE but not in firefox.

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr><td></td></tr>
</table>

IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table.

Hello,

I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting.

*edit... nvm.

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

I am trying to edit a CSS that was set up by someone else - never done this before, using Dreamweaver.

I wanted the links to be a darker blue on baykeeper DOT org, so I changed the code in both homepage.css and subpage.css, the two style sheets for our website. There appears to be only one place to specify link color in each style sheet:

a:link {
color: #004B91;
text-decoration: none;
}
a:visited {
color: #004B91;
text-decoration: none;
}
a:active {
color: #004B91;
text-decoration: none;
}
a:hover {
text-decoration: underline;

If you look at baykeeper DOT org/index.html which is drawing from homepage.css, only the main content has dark blue links. The side column does not. On any other page (drawing from subpage.css) the links are still the same color. I have checked in the .css files and refreshed the pages but clearly I'm missing something...

My questions a
1. Is there some other way to set link color in CSS? I don't see any other places where I could change the color, but maybe I don't know where to look.
2. I had a similar problem with the favicon - I updated the template but it didn't apply to all the pages equally. Why is that? Is there some way to refresh individual pages' connections to the templates? Mysterious to me.
3. Once I figure this stuff out, the bottom nav links will be invisible because the darker blue will blend in - so that's a location where I *want* the link color to be different (white). How do I control the link color in different sections of the layout?

Thanks in advance for any help you can provide.

Hey all,
I'm trying to make some links using the normal list method, and have the link class leak the image. Right now nothing is showing up...no text, no button/image...nothing.

It's rather baffling to me, because I have pretty much the same code working on a different page. I can't see anything that would cause this.

I would very much appreciate it if you have a look at my code and see if you can see something I missed.

CSS:
Code:

.box1{
        width:900px;
        height:700px;
        background-image:url(bg.jpg);
}
#links{
        width:853px;
        height:31px;
        margin: 0 auto;
        text-align:center;
        line-height:0;
        display: block;
        overflow: hidden;
        text-decoration: none;
        text-indent: -99999px;
        font-size: 0.0;
        line-height: 0.0;
        background-repeat:no-repeat;
}
#links li{
        float: left;
        list-style: none;
}
a.link1{
        width:185px;
        height:31px;
        display:block;
        background-image:url(bg.gif);
        background-position: 592 25px;
}

HTML:
Code:

<div class="box1">
    <ul id="links">
        <li><a href="#" class="link1" title="Job Description">Job Description</a></li>
        <li><a href="#" class="link1" title="Home">Job Description</a></li>
        <li><a href="#" class="link1" title="Home">Job Description</a></li>
        <li><a href="#" class="link1" title="Home">Job Description</a></li>
    </ul>
</div>

Thanks much

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.

Don't know if I got the language right on the headline? I've got the following css for my forms:
.form table {
border-collapse: collapse;
color: black;
border: 1px solid black;}

and the markup looks like this

<table class="form" width="100%" cellspacing="0">

however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class...

any ideas...

good
http://www.rickweston.com/my_ucwdc/membership/register.php

bad
http://www.rickweston.com/judge/about_judge/index.php

thnks for any help

Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating.

I am using the following command to set a DIV element with transparent background;

Code:

filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');

The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot.

(the light red line is the extra 1px I am referring to)

If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem;

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<style>

body {

	margin: 0px;
	padding: 0px;
	/*
	 * IE hack to center .content div (part1).
	 */
	*text-align: center;
}

div.content {

	width:600px;
	margin: 0px auto;
	/*
	 * IE hack to center .content div (part2).
	 */
	*text-align: left;
}

div#a {

	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
	padding-bottom: 5px;
	padding-top: 5px;

}

div#a div#b {

	overflow: hidden;
	height: 280px;
	position:relative;
}

div#a div#b div#c {
	
	position: absolute;
}

div#a div#b div#c img {
	
	border: none;
	display: block;
}

div#a div#b div#e {

	background-color: red;
	color: #fff;
	position:absolute;
	padding: 20px 10px;
	width:260px;
	height: 240px;
	margin-left: 500px;
	/* IE8 hack for background colour with alpha value */
	filter: progid:DXImageTransform.Microsoft.gradient
	(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
			
		</style>
	</head>
	<body>
		<h1>Test 5</h1>
		<div id="a" class="content">
			<div id="b">
					<div id="c">			
						<img src="pic.png" />
					</div>
					
					<div id="e">			
						hello
					</div>
			</div>
		</div>	
	</body>
	
</html>

Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great.