[SOLVED] CSS Background Repeat

Stuart · #1 Sep 29th, 2007, 12:20

Hi,

I am having some trouble with setting a background image to repeat-y. My code is (div on page):

background: #f0eee4 url(sectionnav_bg.gif) repeat-y center;

The background image looks like this:

Here is a modified version to see it better:

Blue is really white, Gray is really a spacer.

The correct result in Internet Explorer is a white bar below the navigation (top left) that continues to the end of the page:

But then comes my problem - Firefox and Safari...
What is a white bar in IE is a gray empty field in Firefox and Safari:

I have yet to figure out what is causing this. If anyone can help me out, it would be greatly appreciated.

Thanks,
SWagner

alexgeek · #2 Sep 29th, 2007, 12:31

try setting it out in longhand.
background-color: #frddffd;
background-reapeat: repeat-y;
etc...

Stuart · #3 Sep 29th, 2007, 12:37

Thanks Alexgeek,
I'll try that...

Stuart · #4 Sep 29th, 2007, 12:43

Hi,
I tried the longhand. It didn't work...
Take a look:

Please reply,
SWagner

alexgeek · #5 Sep 29th, 2007, 12:46

could you host this on freewebs or something please

Blake121 · #6 Sep 29th, 2007, 12:48

You could try this?

Code: Select all

background: #f0eee4 url('sectionnav_bg.gif') repeat-y top center;

Also make sure you validate your code

Stuart · #7 Sep 29th, 2007, 12:52

Sorry... again, didn't do it.
Back to the beginning:

Stuart · #8 Sep 29th, 2007, 13:02

Here is my complete code:

Code: Select all

#section-navigation {
    float: left;
    margin: 0 0 100px 0;
    padding: 0;
    clear: left;
    width: 200px;
    background: #ffffff url(sectionnav_bg.gif) repeat-y top center;
    }

Maybe that will help...

alexgeek · #9 Sep 29th, 2007, 13:06

Make a freewebs account and host all your files on there

Stuart · #10 Sep 29th, 2007, 13:07

Will that help?
I already have something similar.

Blake121 · #11 Sep 29th, 2007, 13:22

It's just so we can have a link to the page. It helps a lot.

But back to the problem....

Have you cleared your divs properly?

IE usually does it for you so that may be why it's only working in that browser.

Have some thing like this on your footer (or last) div.

Code: Select all

#footer {
  clear:both;
}

Stuart · #12 Sep 29th, 2007, 13:28

Blake, thanks for the tip, but it does not seem to be doing anything...

Blake121 · #13 Sep 29th, 2007, 13:29

hmmmm.... Can we have a link please?

I'm really not sure what it is.

Are you sure all HTML and CSS is valid?

Stuart · #14 Sep 29th, 2007, 13:52

Here is the link:
Go there

Blake121 · #15 Sep 29th, 2007, 13:59

Right... well you have to validate your code!

(http://validator.w3.org/check?verbos...lab%2Ftemp.htm)

There is a line of invalid code right on the problem area

Code: Select all

"<li><a href="javascript:;" class="current">View & Download Files</a></li>"

should be

Code: Select all

<li><a href="javascript:;" class="current">View &amp; Download Files</a></li>

Stuart · #16 Sep 29th, 2007, 14:00

I have validated all html and css - no errors whatsoever...
I changed it to
&

Blake121 · #17 Sep 29th, 2007, 14:01

No... you have 5 HTML errors. Check the link.

I even gave you one error and a fix.

Also you could try this:

Code: Select all

<div id="section-navigation">
    <ul>
        <li><a href="javascript:;" class="current">View & Download Files</a></li>
        <li><a href="javascript:;">Upload Files</a></li>
    </ul>
    <br style="clear: both;" />
</div>

Stuart · #18 Sep 29th, 2007, 14:08

All clear - successfully validated!
However, no change in appearance (Firefox)

Blake121 · #19 Sep 29th, 2007, 14:16

Hmmm... I'm not sure then. I'm better off with PHP to be honest lol.

Try these, but if they don't work I know one of our CSS experts will be able to help you. They should be on soon.

Code: Select all

</div>
<br style="clear:both;" />
</div><!-- end content -->

Also Try switching your background line onto the #main div

Code: Select all

#main {
    float: right;
    padding: 20px 0;
    width: 100%; 
    background: #ffffff url('/research/wagnerlab/images/sectionnav_bg.gif') repeat-y top center;
    }

Also check some of these out:

http://www.alistapart.com/articles/fauxcolumns/
http://www.ilovejackdaniels.com/css/...iquid-layouts/
http://webdesign.about.com/od/freewe...bl2colfaux.htm

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] CSS Background Repeat