Wordpress Themes - WP Forum at BFA - [SOLVED] jpg background image for nav menu not showing up in IE7

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - [SOLVED] jpg background image for nav menu not showing up in IE7 (http://forum.bytesforall.com/showthread.php?t=5025)

[SOLVED] jpg background image for nav menu not showing up in IE7

Hello,
I have a red box which i used as a background image for my nav menu area. When i view the page with IE7 though, the red box isnt displayed. ive changed it to a .jpg, it was a gif before. Does IE7 not read gifs? It is a jpeg now but still isnt there. Any help would be greatly appreciated!

www.bigmamas.com.au

Why use a jpg when you can set the background with CSS?

HTML Code:

div#pages-2 {background: red; }

you can ever add the border and padding etc.

thanks juggledad!
ive got it to mostly work, but is there a way to create the white space between the black border and the red box? Ive been looking around css pages online but havent found the code for it. Many thanks in advance. :)

the best way to do this is to code your own menu and add an extra <div>. If the site will be static and there won't be many new pages, this will work.

Instead of adding the pages widget, add a text widget with the following

HTML Code:

<div id="pages-2" class="widget widget_pages">

<div id="my-inner-box">

        <div class="widget-title"><h3> </h3></div>                

        <ul>

                <li class="page_item page-item-2 current_page_item"><a href="http://www.bigmamas.com.au" title="Welcome">Welcome</a></li>                        

                <li class="page_item page-item-6"><a href="http://www.bigmamas.com.au/food" title="Food">Food</a></li>

                <li class="page_item page-item-8"><a href="http://www.bigmamas.com.au/menuwinelist" title="Menu/Wine List">Menu/Wine List</a></li>

                <li class="page_item page-item-10"><a href="http://www.bigmamas.com.au/functions" title="Functions">Functions</a></li>

                <li class="page_item page-item-12"><a href="http://www.bigmamas.com.au/reviews" title="Reviews">Reviews</a></li>

                <li class="page_item page-item-14"><a href="http://www.bigmamas.com.au/contact" title="Contact">Contact</a></li>

        </ul>

</div>

</div>

then change the CSS Insert to this

HTML Code:

div#pages-2 {

border:solid 1px #000000;

}

div#my-inner-box {

background:red;

margin:20px;

}

the outer <div> will have the border and the inner onw will have a margin and a red background. You can fiddle with the magrin size to get it the size you want.

thanks so much! it worked. will have a look and learn more about css. :)