[SOLVED] CSS Background Repeat

[Stuart]

Hi,

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

Code: Select all

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]

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

[Stuart]

Thanks Alexgeek,
I'll try that...

[Stuart]

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


Please reply,
SWagner

[alexgeek]

could you host this on freewebs or something please

[Blake121]

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]

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

[Stuart]

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]

Make a freewebs account and host all your files on there

[Stuart]

Will that help?
I already have something similar.

[Blake121]

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]

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

[Blake121]

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]

Here is the link:
Go there

[Blake121]

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]

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

[Blake121]

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]

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

[Blake121]

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

[Stuart]

I think the br clear:both; did it.

Thanks for all your help!
SWagner