Solved

Backround image not showing in firefox but works in IE

Posted on 2007-11-28
3
827 Views
Last Modified: 2008-02-01
Hello,
In the ID "container" backround image is specified. Works in IE but does not show up in Fire Fox.

Any Idea's?
Htpp://www.iads.co.uk

Regards,

Keyvan
 
<--------------------------------CSS BELOW--------------------------------------->
body {background-color:#dfdfdf;}

#container
{
    width: 950px;
    background-image:url(images/pageleft.gif);
    background-repeat:repeat-y;
    background-position:-9px;
    }

#masthead{
    width:930px;
    height:100px;
    background-image:url(images/iads.jpg);
    background-repeat:no-repeat;
    margin-bottom:0px;
    padding-bottom:0px;
    }

#menu{
    background-image:url(images/maintopright.gif);
    background-repeat:no-repeat;
    background-position:top right;
    width:930px;
    height:15px;
    margin-top:0px;
    margin-right:10px;
    padding-bottom:0px;
    }

#leftpage{
    width:150px;
    float:left;

    margin:0px;
    padding-top:10px;
    }

#rightpage{
    width:779px;
    border-right: solid 1px black;
    float:left;
    background-color:White;
    }

#footer{
    font-family:Arial;
    font-size:x-small;
    text-align:center;
    background-image:url(images/bottom.gif);
    background-repeat:no-repeat;
    width:930px;
    height:20px;
    float:left;
    padding-left:90px;
    }

#leftcont{
    float:left;  
    padding:10px 20px 10px 10px;
    width:350px;
    font-family:Trebuchet MS;
    text-align:justify;
    font-size:small;
    border-right:dotted 1px gray;
    margin-left:15px;
    margin-top:15px;
    margin-right:5px;
    list-style-type:square;
    }

#rightcont{
    float:right;
    width:350px;
    font-family:Trebuchet MS;
    text-align:justify;
    font-size:small;
    margin-top:15px;
    margin-left:0px;
    margin-right:0px;
    padding-top:40px;
    padding-right:5px;
    }

#clearboth{
    width:100%;
    clear:both;
    }

 .menuitemselected
 {
    background-image:url('/images/menubluegloss.gif');
    font-family:Trebuchet MS;
    font-size:small;
 }
  .menuitemhover
 {
    background-image:url('/images/menubluegloss.gif');
    font-family:Trebuchet MS;
    font-size:small;
 }
 
.vas
{
    padding:0px 15px 0px 20px;
    margin: 0px 10px 0px 10px;
    font-family:Trebuchet MS;
    text-align:justify;
    font-size:small;

}

.vas h1
{
    margin-top:0px;
    font-family:Trebuchet MS;
    font-size:medium;
   
}

.bullets
{
    list-style-type:square;
    line-height:20px;
}
0
Comment
Question by:kjsadeghi
3 Comments
 
LVL 22

Expert Comment

by:RedKelvin
ID: 20370528
Hi there,
I have taken a look in FF, and IE7, and the page looks the same.
0
 

Author Comment

by:kjsadeghi
ID: 20372873
The two links below are screen dumps of the difference between firefox and IE.

I have loaded this website up on 3 different computers and the same backround image is missing in firefox.

http://www.iads.co.uk/debug/firefox.jpg

http://www.iads.co.uk/debug/ie7.jpg

Regards,

Keyvan
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 400 total points
ID: 20373925
Hello kjsadeghi,

Try placing #clearboth after #rightpage, but before the closing of #container...

I hope this helps!

oceanbeach
Change...
 
...<img src="images/rightpan.jpg" width="300" height="200" />
</div>
<div id="clearboth"></div>
</div>
</div>
<div id="footer">...
 
To..
 
...<img src="images/rightpan.jpg" width="300" height="200" />
</div>
</div>
<div id="clearboth"></div>
</div>
<div id="footer">...

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question