LinkBack URL
About LinkBacks
Chrome border display problem
<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: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>
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.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; }
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>
Reply With Quote
