Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background-Image not repeating in FF 1

Status
Not open for further replies.
gpalmer711

gpalmer711

IS-IT--Management
May 11, 2001
2,445
GB
Hi All,

I'm trying to do a new site for vista and have most of the content ready. However I am having a problem getting the site to layout ready in FireFox.

Site URL is [URL unfurl="true"]http://www.vistahelp.co.uk/vista1/default.aspx[/url]

Main Page Code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="pageheader"><img src="images/template_01.png" alt="Vista Site Header" /></div>
        <div id="pagemiddle">
            <div id="leftofcontent">&nbsp;</div>
            <div id="placeholder1">
                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                </asp:contentplaceholder>
            </div>
            <div id="rightofcontent">&nbsp;</div>
            <div id="buttoncontainer">
                <div id="buttonheader"><img src="images/template_05.png" alt="Button Header" /></div>
                <div id="homebutton"><a href="default.aspx"><img class="imgButton" id="imgHome" src="images/template_07.png" alt="Home Button" onmouseover="imgHome.src='images/template_ls_07.png';" onmouseout="imgHome.src='images/template_07.png';" /></a></div>
                <div id="editionbutton"><a href="editions.aspx"><img class="imgButton" id="imgEdition" src="images/template_08.png" alt="Vista Editions Button" onmouseover="imgEdition.src='images/template_ls_08.png';" onmouseout="imgEdition.src='images/template_08.png';" /></a></div>
                <div id="featuresbutton"><a href="features.aspx"><img class="imgButton" id="imgFeatures" src="images/template_09.png" alt="Vista Features Button" onmouseover="imgFeatures.src='images/template_ls_09.png';" onmouseout="imgFeatures.src='images/template_09.png';" /></a></div>
                <div id="tipsbutton"><a href="tips.aspx"><img class="imgButton" id="imgTips" src="images/template_10.png" alt="Vista Tips Button" onmouseover="imgTips.src='images/template_ls_10.png';" onmouseout="imgTips.src='images/template_10.png';" /></a></div>
                <div id="supportbutton"><a href="support.aspx"><img class="imgButton" id="imgSupport" src="images/template_11.png" alt="Vista Support Button" onmouseover="imgSupport.src='images/template_ls_11.png';" onmouseout="imgSupport.src='images/template_11.png';" /></a></div>
                <div id="softwarebutton"><a href="software.aspx"><img class="imgButton" id="imgSoftware" src="images/template_12.png" alt="Vista Software Button" onmouseover="imgSoftware.src='images/template_ls_12.png';" onmouseout="imgSoftware.src='images/template_12.png';" /></a></div>
                <div id="aboutbutton"><a href="about.aspx"><img class="imgButton" id="imgAbout" src="images/template_13.png" alt="About Us Button" onmouseover="imgAbout.src='images/template_ls_13.png';" onmouseout="imgAbout.src='images/template_13.png';" /></a></div>
                <div id="contactbutton"><a href="contact.aspx"><img class="imgButton" id="imgContact" src="images/template_14.png" alt="Contact Us Button" onmouseover="imgContact.src='images/template_ls_14.png';" onmouseout="imgContact.src='images/template_14.png';" /></a></div>
                <div id="buttonfooter">&nbsp;</div>
            </div>
            <div id="rightofbuttons">&nbsp;</div>
        </div>
        <div id="pagefooter"><img src="images/template_16.png" alt="Page Footer" /></div>
    </div>
    </form>
</body>
</html>

Css
Code: 
body 
{
	padding: 0px;
	background-image: url(images/vista_bg.jpg);
	background-position:top left;
	background-repeat:repeat-x repeat-y;
}
#container 
{  
	position:absolute; 
	left:50%;
	width: 925px;
	margin-left: -462px;
}
#pagemiddle
{
	background-position: top left;
	background-image: url(images/middle_bg.png);
	background-repeat: repeat-y;
	width: 925px;
	height: auto;
}
#leftofcontent
{
	float:left;
	top: 168px;
	width:71px;
}
#placeholder1
{
	float:left;
	width:617px;
	min-height:681px;
	top: 168px;
}
#rightofcontent
{
	float:left;
	top: 168px;
	width:37px;
}
#buttoncontainer
{
	float:left;
	top: 168px;
	width: 158px;
}
#buttonfooter
{
	float:left;
	width:158px;
}
#rightofbuttons
{
	float:left;
	top: 168px;
	width: 42px;
}
#pagefooter
{
	clear:both;
}
#maincontent
{
	font-family:Arial Times New Roman;
	font-size:medium;
}
.imgCenter
{
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.imgButton
{
	border:0px;
}
.xpEditions
{
	font-family:Arial Times New Roman;
	color:Gray;
	font-size:medium;
}
a.vistaeditions:Link
{
	font-family:Arial Times New Roman;
	color:green;
	font-size:larger;
}
a.vistaeditions:Visited
{
	font-family:Arial Times New Roman;
	color:Orange;
	font-size:medium;
}
a.vistaeditions:Hover
{
	font-size:medium;
	font-family:Arial;
	color:Lime;
}

Shows fine in IE7 - Shows fine in other IE versions other than Alpha Transparency (I'm not worried about this at the moment)

However in FireFox the background for the main content panel will just not show up. If I set a min-height then it will show to that height.

Is there any way I can just get it to repeat vertically until the content ends?

Regards

Greg Palmer

Greg Palmer
Freeware Utilities for Windows Administrators.
 
Sort by date Sort by votes
Your #pagemiddle is not floated, however, it does contain only floated elements. That means that none of those elements will contribute to the height of #pagemiddle, leaving it at zero height. Your footer does clear its sibling elements before it, but since #pagemiddle is not floated, it does not really affect its height. If you want #pagemiddle to extend down, you can either float it (floated parents will extend to the end of the floated children) or give it overflow: auto;. If you want an old school solution (provided both of these solutions break it for you in other browsers), you can simply add a clearing element at the bottom (but still within) of #pagemiddle.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
711
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
778
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top