Hello all,
I am having some trouble getting my background image to show in FF and IE, I am using firefox web developer add-on and when I click edit css, the background image shows up, when I close the edit css it reverts back to having no background.
here is the page.
here is my css
#footer {
position:absolute;
bottom:0;
width:100%;
height:90px; /* Height of the footer */
background:#FFF;
background-image:url('./images/bottbgrp.png') repeat-x;
color:#000;
}that css is good except I always .footer {bottom:0;left:0,top:auto;right:auto;width:100%;height:xxx;background:url('image.png') repeat-x;} for footer positioning, seems to work fairly often
** My twisted mind at work **
what have you done in outer elements like <body> and <html> that may cause screwups
margins and paddings inherit, so a padding on the body, inherited by the footer may push the image outside the boundaries of the footer element, ,
the image is in my tif, and shows up in the debuglist of page elements, so is being accessed
not sure, havent looked at the whole css file,
but check any padding settings,
and/or
explicitly set padding-bottom and margin-bottom to 0, at the end of any css thats sets a margin or padding in the file, to check the possibiliity
background-image:url('./images/bottbgrp.png') repeat-x;Two things -
1. take off the quotes
2. have a dedicated background-repeat attribute.
Your css isn't valid when I checked it in Chrome.
background-image:url(./images/bottbgrp.png);
background-repeat: repeat-x;background-image:url('./images/bottbgrp.png');
background-repeat: repeat-x;
I had that same problem, you just have to make the repeat tag on a separate line and don't shorthand it. I don't know why it does that but this way works.
I had that same problem, you just have to make the repeat tag on a separate line and don't shorthand it. I don't know why it does that but this way works.
The reason for this is that "background" is the shorthand property and not "background-image". background-repeat values can be placed under background, but not background-image. Otherwise it would probably be called "background-image-repeat".
So you could do this:
background: url(./images/bottbgrp.png) repeat-x;The reason for leaving out the quotes is that IE on the Mac doesn't throw a wobbly. But, as this browser is probably dead by now, it won't hurt to leave them in. Sorry, force of habit.
Apologies in advance for the walls of text you are about to read
Okay I tested in chrome and the error I got was:
bottbgrp.pngResource interpreted as image but transferred with MIME type text/html.Firefox displays an error like so(I think it's unrelated to the chrome error):
Warning: Unknown pseudo-class or pseudo-element 'eq'.
Source File: http://www.costumeshopfinder.co.uk/test/
Line: 0I am using the stylesheets I got with th coda slider I am using along with a CSS that keeps the footer at the bottom:
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background-color: transparent;
border: 0;
font-size: 99%;
font-family: Arial;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1.2;
}
ol, ul {
margin-left: 25px;
}
:focus {
outline: 1px #c0c dotted;
}Coda-Slider-2.0.css
/*
Place footer at bottom
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%;
position:relative;
}
#header {
background:#000;
color:#FFF;
padding:40px 100px 20px 0px;
height:100px;
}
#header h1{
text-indent: -9999px;
}
#navigation li{
color:#FFF;
display:inline;
text-decoration:none;
}
#body {
padding:10px;
width:900px;
margin:auto;
padding-bottom:90px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:90px; /* Height of the footer */
background-image:url(./images/bottbgrp.png);
background-repeat: repeat-x;
color:#000;
}
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
/* Insignificant stuff, for demo purposes */
.panel h2.title { margin-bottom: 10px;}
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { padding: 20px 0 }
.coda-slider { background: #FFF; }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 900px }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }
/* Tab nav */
.coda-nav ul li a.current { background: #39c }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 20px }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: inline }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }The 'eq' error seems to be a common js error when using stuff like jquery. I've seen it in a few forums, but nobody has answered with a solution. The other instances suggest that it still works.
The "Unknown" error usually crops up when you have something like a css value but no property, e.g.
body{
#000000; font-weight:bold;
}Note the #000000 value, but it's missing a property.
Is your js overwriting any original css/html? It may be trying to do so and not completing the job. Just a thought.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.