JavaScript and client side scripting.
Moderator: General Moderators
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Fri May 23, 2008 8:18 am
Code: Select all
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-image: url(images/layout/background-pattern.jpg);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:316px;
z-index:1;
background-image:url(images/layout/background-gradient.jpg);
background-repeat:repeat-x;
}
I am trying to place a background over the document background (which repeats x and y) and repeat it by x (horizontally), but the width:100% doesn't work.
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Fri May 23, 2008 12:16 pm
Works for me in Vista FF3-RC1 and IE7.
What doctype are you using, browser?
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Mon May 26, 2008 4:02 am
Windows XP with IE7 and FF2. The doctype is transitional.
Here's the page code:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-image: url(images/layout/background-pattern.jpg);
background-repeat: repeat;
}
#wrapper {
position:relative;
width:980px;
height:100%;
margin:0 auto;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
width:100%;
height:316px;
z-index:1;
background-image:url(images/layout/background-gradient.jpg);
background-repeat:repeat;
visibility: visible;
overflow: visible;
}
#apDiv2 {
position:absolute;
left:19px;
top:17px;
width:687px;
height:414px;
z-index:2;
}
-->
</style></head>
<body>
<div id="apDiv1"></div>
<div id="wrapper">
<div id="apDiv2">
<table width="679" height="203" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="90" colspan="2" align="left" valign="top"><img src="images/layout/top.jpg" width="949" height="90" /></td>
</tr>
<tr>
<td height="19" colspan="2" align="left" valign="top" background="images/layout/menu-background.jpg" bgcolor="#FFFFFF"><img src="images/layout/menu-background.jpg" width="17" height="19" /><a href="products.php"><img src="images/layout/button-products.jpg" width="68" height="19" border="0" hoversrc="images/layout/button-products-rollover.jpg" /></a><a href="ektheseis.php"><img src="images/layout/button-ektheseis.jpg" width="162" height="19" border="0" hoversrc="images/layout/button-ektheseis-rollover.jpg" /></a><a href="contact.php"><img src="images/layout/button-contact.jpg" width="95" height="19" border="0" hoversrc="images/layout/button-contact-rollover.jpg" /></a></td>
</tr>
<tr>
<td width="249" height="22" align="left" valign="top" bgcolor="#FFFFFF"><?php require_once('menu.php'); ?></td>
<td width="700" align="left" valign="top" bgcolor="#FFFFFF"><?php require_once('product.php'); ?></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><img src="images/layout/bottom.jpg" width="948" height="72" /></td>
</tr>
</table>
</div>
</div>
<!--rollOver script-->
<script type='text/javascript' src='scripts/jscript/rollover.js'></script>
</body>
</html>
So here's the problem. It seems when the browser window is maximized, the repeat-x works, but when it's not maximized it doesn't.
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Mon May 26, 2008 9:47 am
Put a border around your div & see if it's really extending as far as you think. Also set your background-repeat property to "repeat-x", not just "repeat".
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Tue May 27, 2008 12:31 pm
Problem is that #apDiv1 width is browser viewport width not the content.
Only solution what i found is to put #apDiv1 inside another div (for example #apDiv1Holder).
Code: Select all
<div id="apDiv1Holder"><div id="apDiv1"></div></div>
Code: Select all
#apDiv1Holder { position: relative; min-width: 980px; }
Works in IE7 and FF3, but most likely will fail in IE6
Why are you positioning it absolutely? Put all content inside this div and it should work.
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Thu May 29, 2008 8:34 am
Still none of these solutions worked.
I've confirmed though that this cutoff happens when I put images on the page and the window is not maximized.
EDIT :
Problem is that #apDiv1 width is browser viewport width not the content.
Wait, I think I understand. I tried your way and you're right. I also tried putting an 100% width transparent gif image in the #apDiv1 and it worked as well. (Maybe it works in IE6 as well). So it needed content to stretch the div, bad thing backgrounds cannot stretch or images do not have repeat property...