<edit>
NOTICE: I fixed it, I'll explain how below.
Somehow, just posting here helps get things resolved.
</edit>
Hi,
I'm fairly sure that this is some glaring mistake on my part, but I can't seem to find it.
In my website, everything displays correctly in Chrome when the page ends before the screen. However, when the page extends beyond, and requires a scrollbar on the side, all of the border pictures don't line up, ruining the edge of the site.
HTML:
CSS:
I have one {1000x10} background picture that repeats vertically. then there are divider images that cover part of the background to make it look like a styled border for the separate sections of the site. The dividers and the background image don't line up when the site is too long.
Background
Divider
Is there anything I can do about this?
Thanks,
BBX
<edit>
I have tried Google. It's just, I don't really know how to describe this problem in five or less words.
</edit>
<edit>
OK,
I was blankly staring at my site when I got the idea:
When chrome adds the scroll bar, it probably resizes things, which is why the site doesn't display properly.
Resizing the site should work, everything would just be about 3% smaller.
But it doesn't work, which lead me to think that only one element gets resized: the <body>.
I simply switched the BGrunner image from the <body> tag in CSS to the outerEdge tag.
It seems to have solved the problem!
I don't know if there is a way to declare this thread closed, if a moderator could help?
</edit>
NOTICE: I fixed it, I'll explain how below.
Somehow, just posting here helps get things resolved.
</edit>
Hi,
I'm fairly sure that this is some glaring mistake on my part, but I can't seem to find it.
In my website, everything displays correctly in Chrome when the page ends before the screen. However, when the page extends beyond, and requires a scrollbar on the side, all of the border pictures don't line up, ruining the edge of the site.
HTML:
Code:
<!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>
<link href="main.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Madis</title>
<!-- the favicon link-->
<link rel="icon"
type="image/png"
href="http://x10hosting.com/forums/images/Favicon.png"
/>
<!-- end favicon link-->
</head>
<body>
<div class="outerEdge">
<div class="edgeStarter">
</div> <!--edgeStarter-->
<div class="HeaderBG">
<div class="HeaderNav">
<div class="HeaderLink">
<a href="index.php">Home</a>
</div> <!--HeaderLink | Home-->
<div class="HeaderLink">
<a href="aboutus.php">About Us</a>
</div> <!--HeaderLink | About US-->
<div class="HeaderLink">
<a href="personnel.php">Personnel</a>
</div> <!--HeaderLink | Personnel-->
<div class="HeaderLink">
<a href="news.php">News</a>
</div> <!--HeaderLink | News-->
<div class="HeaderLink">
<a href="index.php">Events</a>
</div> <!--HeaderLink | Events-->
<div class="HeaderLink">
<a href="index.php">Donations</a>
</div> <!--HeaderLink | Donations-->
<div class="HeaderLink">
<a href="index.php">Contact Us</a>
</div> <!--HeaderLink | Contact Us-->
<div class="HeaderLink">
<a href="index.php">For Hire</a>
</div> <!--HeaderLink | For Hire-->
</div> <!--HeaderNav-->
</div> <!--HeaderBG-->
<div class="edgeDivider" style="position: relative; top: -10px;">
</div> <!--edgeDivider-->
<div class="contentContainer">
<div id="leftSide" style="display:inline-block; width:710px; margin-left:15px;">
<img src="http://x10hosting.com/forums/images/Madis(aniReplace).jpg" style="margin-left:30px;"/>
</div> <!--leftSide-->
<div id="rightSide" style="display:inline-block; width:310px; height:1000px;">
</div> <!--rightSide-->
</div> <!--contentContainer-->
<div class="edgeDivider">
</div> <!--edgeDivider-->
<div class="Footer">
</div> <!--Footer-->
</div> <!--outerEdge-->
</body>
</html>CSS:
Code:
/* CSS Document */
body {
background: #000 url(images/BGrunner.png) center repeat-y;
color: #FC0;
font-family: Calibri;
margin-top: 0;
}
.outerEdge {
width: 1050px;
margin: auto;
}
.edgeStarter {
width: 1000px;
height: 30px;
margin: auto;
background: url(images/EdgeStarter.png);
z-index: 1;
}
.HeaderBG {
width: 1000px;
height: 250px;
margin: auto;
background: url(images/HeaderBG.png) center top no-repeat;
position: relative;
top: -10px;
z-index: 2;
}
.HeaderNav {
width: 600px;
height: 150px;
position: relative;
top: 50px;
left: 300px;
border: #900 thin dashed;
}
.HeaderLink {
float: left;
width: 130px;
height: 35px;
margin-left: 15px;
margin-top: 17px;
background: url(images/btn.png) center no-repeat;
text-align: center;
padding-top: 10px;
}
.HeaderLink a {
color: #FF0;
font-family: "Arial Black", Gadget, sans-serif;
}
.edgeDivider {
width: 1000px;
height: 40px;
margin: auto;
background: url(images/EdgeDivider.png);
z-index: 1;
}
.contentContainer {
width: 1050px;
margin: auto;
}
.contentContainer a {
color: #FF0;
}
.Footer {
width: 1000px;
margin: auto;
margin-top: 50px;
}I have one {1000x10} background picture that repeats vertically. then there are divider images that cover part of the background to make it look like a styled border for the separate sections of the site. The dividers and the background image don't line up when the site is too long.
Background
Divider
Is there anything I can do about this?
Thanks,
BBX
<edit>
I have tried Google. It's just, I don't really know how to describe this problem in five or less words.
</edit>
<edit>
OK,
I was blankly staring at my site when I got the idea:
When chrome adds the scroll bar, it probably resizes things, which is why the site doesn't display properly.
Resizing the site should work, everything would just be about 3% smaller.
But it doesn't work, which lead me to think that only one element gets resized: the <body>.
I simply switched the BGrunner image from the <body> tag in CSS to the outerEdge tag.
It seems to have solved the problem!
I don't know if there is a way to declare this thread closed, if a moderator could help?
</edit>
Last edited: