CSS - Why Won't These Background Images Show Up In Firefox, But It Looks Perfect In Ie?

Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing.


http://mp3realm.org/new/index.php (First one)
http://mp3realm.org/new/search.php (search page)
http://mp3realm.org/new/default.css (CSS)


Thanks.

Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue.

The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up.

If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is:
http://www.favillephoto.com/new website/index.html

I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there.

Thanks in advance for your help.


This is the css file for my index page:
Code:

body {
	padding: 0;
	background: #ffffff url('images/img01.jpg');
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: normal;
	color: #AD1112;
}

h1 {
	font-size: 250%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 140%;
	font-weight: bold;
}

h4 {
	font-size: 100%;
	font-weight: bold;
}

p, ol, ul {
	line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}

blockquote * {
	line-height: normal;
}

a {
	color: #1267bc;
}

a:hover {
	color: #999999;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 10px 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

hr {
	display: none;
}

/* Header */

#header {
	width: 1030px;
	height: 260px;
	margin: 0 auto;
	background: url('images/img02.jpg') no-repeat right top;
}


/* Menu */

#menu {
	float: right;
	width: 1030px;
	height: 40px;
	padding: 220px 0 0 0;
}

#menu a {
	display: block;
	height: 32px;
	background: url('images/img06.gif') no-repeat;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}

#menu ul {
	width: 1026px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: #AD1011 url('images/img05.jpg') repeat-x;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	list-style-type:none
}

#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#menu li a:hover
{	color: #123456;}

#menu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #000000;
}

#menu div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 3px 10px;
	width: auto;
	height: 20px;
	white-space: nowrap;
	text-align: left;
	background: #6c91c5;
	color: #ffffff;}
	
#menu div a:hover
{	color: #123456;}


/* Page */

#page {
	width: 1030px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 760px;
	height: 2040px;
	padding: 20px;
	background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 220px;
	height: 2070px;
	padding-top: 10px;
	padding-right: 10px;
	background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}

#sidebar a {
	color: #dddddd;
}

#sidebar a:hover {
	color: #999999;
	text-decoration: underline;
}

#sidebar ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	
	font-size: 92%;
}

#sidebar ul li {
	background: url('images/img13.gif') no-repeat 0px 12px;
	border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}

#sidebar ul li.first {
	border: none;
}

#sidebar ul li h2 {
	margin: 0;
	font-size: 100%;
}

#sidebar ul li h3 {
	margin: 0;
	font-size: 92%;
}

#sidebar ul li p {
	color: #dddddd;
	margin: 0;
}

#sidebar p {
	color: #dddddd;
	margin: 0;
	font-size: 92%;
}

.boxed {
	margin-bottom: 10px;
	background: #113c5c url('images/img10.gif') no-repeat left bottom;
}

.boxed .title {
	height: 30px;
	margin: 0;
	background: #000000 url('images/img08.jpg') no-repeat;
	font-size: 16px;
	font-weight: bold;
	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}

.boxed .content {
	padding: 15px;
	background: url('images/img09.gif') repeat-x;
}


.boxedPrintoftheMonth {
	margin-left: -790px;
	background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}

.boxedPrintoftheMonth .title {
	height: 30px;
	margin: 0;
	background: #000000 url('images/img08PotM.jpg') no-repeat;
	font-size: 16px;
	font-weight: bold;
	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}

.boxedPrintoftheMonth .content {
	padding: 15px;
	background: url('images/img09.gif') repeat-x;
}

/* Footer */

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 85%;
	color: #000000;
}

#footer a {
	color: #000000;
}

#footer a:hover {
	color: #666666;
}

This is the css for the rest of my pages:
Code:

body {
	padding: 0;
	background: #ffffff url('images/img01.jpg');
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: normal;
	color: #AD1112;
}

h1 {
	font-size: 250%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 140%;
	font-weight: bold;
}

h4 {
	font-size: 100%;
	font-weight: bold;
}

p, ol, ul {
	line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}

blockquote * {
	line-height: normal;
}

a {
	color: #1267bc;
}

a:hover {
	color: #999999;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 10px 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

img.left1 {
	float: left;
	margin: 0 70px 0 70px;
}

img.right1 {
	float: right;
	margin: 0 70px 0 70px;
}

img.left2 {
	float: left;
	margin: 20px 100px 20px 100px;
}

img.right2 {
	float: right;
	margin: 30px 120px 20px 120px;
}

img.left3 {
	float: left;
	margin: 0 110px 0 110px;
}

img.right3 {
	float: right;
	margin: 20px 60px 0 60px;
}

hr {
	display: none;
}

/* Header */

#header {
	width: 1030px;
	height: 260px;
	margin: 0 auto;
	background: url('images/img02.jpg') no-repeat right top;
}


/* Menu */

#menu {
	float: right;
	width: 1030px;
	height: 40px;
	padding: 220px 0 0 0;
}

#menu a {
	display: block;
	height: 32px;
	background: url('images/img06.gif') no-repeat;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}

#menu ul {
	width: 1026px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: #AD1011 url('images/img05.jpg') repeat-x;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	list-style-type:none
}

#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#menu li a:hover
{	color: #123456;}

#menu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #000000;
}

#menu div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 3px 10px;
	width: auto;
	height: 20px;
	white-space: nowrap;
	text-align: left;
	background: #6c91c5;
	color: #ffffff;}
	
#menu div a:hover
{	color: #123456;}


/* Page */

#page {
	width: 1030px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 990px;
	padding: 20px;
	background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}

/* Footer */

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 85%;
	color: #000000;
}

#footer a {
	color: #000000;
}

#footer a:hover {
	color: #666666;
}

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Good Day,

I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!!

Brook

http://www.karmaimports.net/centercss.htm

http://www.karmaimports.net/cssrollover.css


what is should look like: http://www.karmaimports.net/center.htm

I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience.

I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can.

I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file.

base.html
Code:

<body>
    <div id="header">
        <div id="title">
            <div id="innertitle">
                {% block header %}{% endblock %}
            </div>
        </div>
    </div>

index.html
Code:

{% block header %}
    <h1>Signal Auctions</h1>
{% endblock %}

main.css
Code:

#header {
    margin:0 auto;
}

#title {
    padding:20px 20px;
    margin:0 auto;
    background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}

#innertitle {
    width:90%;
    margin:0 auto;
}

h1 {
    font-size:3em;
    padding-left:10px;
}

The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them.

Any thoughts?

Just curious as to what i'm doing wrong here, its the #content block that isn't working. Any help that could be provided would be greatly appreciated.

css Code:
Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; font-size: 11px; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #pagecontent { width: 800px; height: 600px; position: relative; z-index: 6000; margin: auto; } #content { width: 800px; background-color: #999999; } #latesttut { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: left; padding-left: 5px; padding-right: 5px; } #latestblog { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: right; padding-left: 5px; padding-right: 5px; } #seperator { width: 800px; height: 5px; float: left; } #latestnews { width: 784px; height: 213px; border: 3px solid #FFFFFF; padding-left: 5px; padding-right: 5px; float: left; } #footer { width: 800px; position: absolute; bottom: 0; } .nav { background-image: url('images/blank1pxl.jpg'); } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }

  

  


 body {


     font-family: Verdana, Tahoma, Arial;


     color: #FFFFFF;


     font-size: 11px;


 }


 .bg {


     width: 100%;


     position: absolute;


     top: 0;


     left: 0;


     z-index: 5000;


 }


 #pagecontent {


     width: 800px;


     height: 600px;


     position: relative;


     z-index: 6000;


     margin: auto;


 }


 #content {


     width: 800px;


     background-color: #999999;


 }


 #latesttut {


     width: 381px;


     height: 150px;


     border: 3px solid #FFFFFF;


     float: left;


     padding-left: 5px;


     padding-right: 5px;


 }


 #latestblog {


     width: 381px;


     height: 150px;


     border: 3px solid #FFFFFF;


     float: right;


     padding-left: 5px;


     padding-right: 5px;


 }


 #seperator {


     width: 800px;


     height: 5px;


     float: left;


 }


 #latestnews {


     width: 784px;


     height: 213px;


     border: 3px solid #FFFFFF;


     padding-left: 5px;


     padding-right: 5px;


     float: left;


 }


 #footer {


     width: 800px;


     position: absolute;


     bottom: 0;


 }


 .nav {


     background-image: url('images/blank1pxl.jpg');


 }


 a:link {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 }


 a:hover {


     text-decoration: underline;


     color: #0066CC;


     font-size: 9px;


 }


 a:visited {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 }


 a:active {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 } 

Sorry to ask but I cannnnnnot find this answer. I know it can be done too...

Ok,

I have a wordpress site and every time I add in custom CSS with a

"background-image"
TAG

It works locally but not when I plug it to the live site.

The graphics are a navigation bar thats it... here is the code

Code:

@charset "utf-8"; /* CSS Document */  a span { 	display: none; }  #container #nav { 	background-image: url(../images/nav.png); 	height: 30px; 	width: 926px; 	margin-left: 100px; } #container #nav li { 	float: left; 	list-style-type: none; }  a.main_nav { 	display: block; 	height: 30px; 	z-index: 1; } a.main_nav:hover { 	background-position: 0px -30px;  } #nav_1 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 133px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_2 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 182px; 	float: left; 	padding-left: 10px; 	background-repeat:no-repeat; } #nav_3 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 160px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_4 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 148px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_5 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 115px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_6 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 122px; 	float: left; 	padding-left: 5px;	 	background-repeat:no-repeat; } #nav_7 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 122px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; }

and my HTML

Code:

<div id="nav"> <a href="" class="main_nav" id="nav_1"><span>button</span></a> <a href="" class="main_nav" id="nav_2"><span>button</span> </a> <a href="" class="main_nav" id="nav_3"><span>button</span> </a> <a href="" class="main_nav" id="nav_4"><span>button</span> </a> <a href="" class="main_nav" id="nav_5"><span>button</span> </a> <a href="" class="main_nav" id="nav_6"><span>button</span> </a> <a href="" class="main_nav" id="nav_7"><span>button</span> </a>     <div class="clear"></div>   </div>

if anyone can help me understand why this does not work in WP that would be most gracious of you

-Jordan

I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7.

Here's the id:

#holder {
background-image: url(/files/images/CSS/header.png);
width: 750px;
margin-left:auto;
margin-right:auto;
margin-bottom: 10px;
margin-top: 10px;
}

Backgrounds show on other divs, so why not this one?

My css code
Code:

#menu {width:172px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #333;}
#menu ul {border: 1px black solid; list-style: none; padding: 0; margin: 0 0 1 0; background-color: #d1d1d1;}
#menu li .menu_box {background-image: url('./images/menu_fill.gif'); margin-left: 200px;}
#menu li {border: none; margin: 0;}
#menu li a {display: block; padding: 5px 5px 5px 0.5em; background-color: #FFFFFF; text-decoration: none; width: 100%;}

My html code
Code:

<div id='menu'>
<ul>
<li class='menu_box'><img src='./images/menu_news.gif' alt='' /></li>
<li><a href='{$url}'>+ Home</a></li>
<li><a href='{$url}about.php'>+ About Nascar Interior</a></li>
</ul>
<ul>
<li class='menu_box'><img src='./images/menu_services.gif' alt='' /></li>
<li><a href='{$url}portfolio.php'>+ Portfolio</a></li>
<li><a href='{$url}enquiry.php'>+ Enquiry</a></li>
</ul>
</div>

For some reason I can't get menu_fill.gif to fill the <li> with the class menu_box. Is there something wrong with my code?

Hi everyone...new here and I hope you can help! Thanks is advance!

I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site:

romanceplaybook
I can't post the entire URL because I'm a new registrant. But just put dot com at the end.

Not that the page background is white. It should be repeating the image bkgd.jpg

Here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win).

In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far.

The HTML...

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen"><!-- @import url(css/base.css); --></style>
<style type="text/css" media="print"><!-- @import url(css/print.css); --></style>	
</head>

<body>
<div id="container">
<div id="head">
<div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div>
<div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div>
</div>
<div id="leftColumn">
<img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/>
<p class="linkSelectedTop1">Welcome</p>
<p class="link1"><a href="bio.php">Biography</a></p>
<p class="link1"><a href="blog.php?category=">Musings</a></p>
<p class="link1"><a href="guestBook.php">Guest Book</a></p>
<p class="link1"><a href="links.php">Links</a></p>
<p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p>
</div>
<div id="rightColumn">
<div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div>
<div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div>
<h1>Welcome</h1>
<p class="clear">&nbsp;</p>
</div>
<div id="footer"><p>&nbsp;</p></div>
</div>
</body>
</html>

The CSS...

html {
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #000000;
}

body {
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 80%;
background-color: #000000;
}


a {
text-decoration: none;
color: #A50023;
}

#container {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}

* html #container {
height: 100%;
}

#head {
position: relative;
background-image: url("../images/headerBlend.gif");
background-repeat: repeat-x;
background-position: 0 0;
text-align: left;
margin: 0;
padding: 0;
height: 100px;
}

#headerTitle {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#headerGraphic {
position: absolute;
top: 0;
right: 0;
z-index: 9;
}

#rightPages48 {
position: absolute;
top: 0px;
right: 0;
z-index: 10;
}

#krdPortrait {
position: absolute;
top: 0px;
right: 64px;
z-index: 10;
}

#leftColumn {
float: left;
top: 100px;
left: 0;
z-index: 10;
width: 120px;
margin: 0;
padding: 0;
background-color: #000000;
text-align: right;
}

#leftColumn p {
font-weight: bold;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#leftColumn a {
color: #BFA673;
}

#leftColumn a:hover {
color: #A50023;
}

.link1 {
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelected1 {
color: #A50023;
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelectedTop1 {
color: #A50023;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#rightColumn {
position: relative;
min-height: 100%;
margin: 0;
margin-left: 120px;
padding: 0;
background-image: url("../images/rightColumnFill48.gif");
background-repeat: repeat-y;
background-position: 100% 0%;
background-color: #FFFFFF;
text-align: left;
}

* html #rightColumn {
height: 100%;
}

#rightColumn h1, h2, h3, h4, h5, h6, p {
margin-left: 36px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 0px;
}

#rightColumn h1 {
font-size: 200%;
color: #606880;
padding-top: 36px;
}

#rightColumn p {
color: #333333;
margin-top: 9px;
}

#clear {
width: auto;
height: 500px;
margin-right:48px;
margin: 0;
padding: 0;
margin-right:48px;
background-color: Transparent;
}

#footer {
width: auto;
height: 72px;
margin: 0;
padding: 0;
background-color: #000000;
}

#footer p {
margin-top: 36px;
}

Hello all!

I'm having difficulties... in IE, showing background image works perfectly, however, on FireFox it does not show the background image...

SAMPLE CODE:

Code:

#header385 {
	width: 1009px;
	margin: auto;
	background-image:url(http://www.zadarsport.com/20pozadina_385.png);
	background-repeat:repeat-y;
	}

#kraj {
	width: 1009px;
	margin: auto;
	background-image:url(http://www.zadarsport.com/20kraj.png);
	background-repeat:repeat-y;
	z-index:-1;
	}

i do not use height option because it's depending on how many words and images article has, however, it works in IE

example:

http://www.zadarsport.com/x.php

please check #kraj and #header385 and try to help me PLEASE... thanks!

Hi,

I have a page where I am including a background image via CSS. It looks fine when viewed in a browser, but when I print it the background does not show up.

I have my stylesheet include set to both screen and print:

<link rel="stylesheet" type="text/css" href="includes/css/form.css" media="screen, print">

The CSS code in question that sets the background image is:

#title{
background: url(../../images/title_bg.gif);
width: 398px;
height: 52px;
text-align: right;

}

<div id="title">
<div class="titleText"><cfoutput>#FormDETAIL.strTitle#</cfoutput></div>
</div>

Why can I not see this background image when I print the page??

It was showing up until I changed something in the CSS that I can't change back (because it would mess up the formatting), and now I don't know how to further change the CSS to get the footer to display properly.

(Um... can't post link to the site, what should i do?)

For reference, the footer background is the same as the navigation background (silver). It may currently be set to highlightred.png but that was so I could try to determine if it was offset behind anything. It doesn't appear to be, unless it's lining up perfectly behind highlight.png from the navigation.

Any help would be greatly appreciated, and thank you in advance.