Solved

Backround image not showing in firefox but works in IE

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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 …

759 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