Solved

Backround image not showing in firefox but works in IE

Posted on 2007-11-28
3
783 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now