Hi, I seem to be having trouble with my newly made website. I have lay'd it out so everything is aligned to the left of the page and fits perfectly together.. But when i zoom out in my web browser, lines between the images emerge and it makes it look bad.. For example
Here is my CSS source code + HTMl
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>College Site</title>
<style type="text/css">
body {
background-image: url(images/Background.png);
background-repeat: -xy;
}
</style>
</head>
<body topmargin="0">
</div>
<div class="Wrapper">
<div id="TopSpace1"></div>
<div id="Logo"></div>
<div id="TopSpace2"></div>
<div id="Login">
<div align="left"> Username:<br />
Password:</div>
</div>
<div id="TopSpace3"></div>
<div id="TopSpace4"></div>
<div id="LeftGlow"></div>
<div id="MenuBar"></div>
<div id="MenuBarSpace"></div>
<div id="AdSpace"></div>
<div id="RightGlow"></div>
<div id="TextBox"></div>
<div id="RightGlow2"></div>
<div id="Footer"></div>
<div id="RightGlow3"></div>
<div id="End"></div>
</div>
</body>
</html>
.Wrapper {
height: 879px;
width: 848px;
margin: auto;
position: relative;
}
#LeftGlow {
background-image: url(images/7_LeftGlow.png);
background-repeat: no-repeat;
float: left;
height: 810px;
width: 41px;
}
#MenuBar {
background-image: url(images/8_MenuBar.png);
background-repeat: no-repeat;
float: left;
height: 60px;
width: 757px;
}
#MenuBarSpace {
background-image: url(images/9_MenuBarSpace.png);
background-repeat: no-repeat;
float: left;
height: 60px;
width: 50px;
}
#AdSpace {
background-image: url(images/10_AdSpace.png);
background-repeat: no-repeat;
float: left;
height: 236px;
width: 757px;
}
#RightGlow {
background-image: url(images/11_RightGlow.png);
background-repeat: no-repeat;
float: left;
height: 236px;
width: 50px;
}
#TextBox {
background-image: url(images/12_TextBox.png);
background-repeat: no-repeat;
float: left;
height: 444px;
width: 757px;
}
#RightGlow2 {
background-image: url(images/13_RightGlow2.png);
background-repeat: no-repeat;
float: left;
height: 444px;
width: 50px;
}
#Footer {
background-image: url(images/14_Footer.png);
background-repeat: no-repeat;
float: left;
height: 43px;
width: 757px;
}
#RightGlow3 {
background-image: url(images/15_RightGlow3.png);
background-repeat: no-repeat;
float: left;
height: 43px;
width: 50px;
}
#End {
background-image: url(images/16_End.png);
background-repeat: no-repeat;
float: left;
height: 27px;
width: 807px;
}
#TopSpace3 {
background-image: url(images/5_TopSpace3.png);
background-repeat: no-repeat;
float: left;
height: 38px;
width: 50px;
}
#TopSpace4 {
background-image: url(images/6_TopSpace4.png);
background-repeat: no-repeat;
float: left;
height: 31px;
width: 230px;
}
#TopSpace1 {
background-image: url(images/01_TopSpace1.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 41px;
}
#Logo {
background-image: url(images/2_Logo.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 284px;
}
#TopSpace2 {
background-image: url(images/3_TopSpace2.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 293px;
}
#Login {
background-image: url(images/4_Login.png);
background-repeat: no-repeat;
float: left;
height: 38px;
width: 180px;
font-size: 13px;
font-family: Verdana, Geneva, sans-serif;
color: #CCC;
}
I've tried setting all the positioning of the divs but that just scrambled the images around.. Can anyone help me out? Thank you.
