Solved

Backround image not showing in firefox but works in IE

Posted on 2007-11-28
3
840 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

630 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