5 replies [Last post]
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 22 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

I've spent a few weeks on and off working on a site for my mom. Testing in IE 7 and 8 however, has ground any further development to a halt. I guess I'll start off by giving a link to the site (I've removed any real content / logos for now (but trust me, their removal had no effect on the issue). Please help.. I'd love to get this site up for my mom sometime soon.. preferably before Mother's day Wink

http://www.lend-a-hand-sc.com/test.html

Here's the problem: In IE7 and IE8, there is a small white border on either side of the top and bottom "black overlay". Also, there is a weird overlapping thing happening with the bottom border (also only seen in IE7 and IE8). It displays exactly as I desire it to in Firefox, so if you need a reference point, that'd be it. Also, before anyone mentions it, I haven't done a fix for the PNGs for IE6, and I'm already aware that as is, it won't work. Laughing out loud

The html code is here:

<!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=iso-8859-1" />
	<title>Spiffy Title Here</title>
	<link rel="stylesheet" href="styles/stylesheet.css" type="text/css" />
</head>
 
<body id="welcome">
 
	<div id="wallpaper">
		<div id="wrapper">
			<div class="blackOverlay">
				<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
			</div>
 
			<div id="content">
				<div class="leftContent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium consectetur est id commodo. Suspendisse viverra sagittis lacus, ac tempus diam imperdiet quis. Sed in dui ut dolor cursus rutrum. Aenean volutpat metus lacinia magna iaculis egestas. Donec eget arcu lacus. Suspendisse potenti. Sed lectus felis, rutrum eu suscipit dictum, lobortis at nibh. Donec sollicitudin lectus et nulla egestas pulvinar. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque hendrerit, lorem quis ultricies elementum, sem risus ultricies orci, vitae vestibulum metus nulla quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 
				</div>
				<div class="rightContent">
					<ul class="nav">
						<li class="welcome"><a href="#">Welcome</a></li>
						<li class="services"><a href="#">Services</a></li>
						<li class="rates"><a href="#">Rates / Specials</a></li>
						<li class="contact"><a href="#">Contact Us</a></li>
					</ul>
					<div class="clock"></div>
				</div>
				<div class="footerClock"></div>
			</div>
			<div class="blackOverlay">
				<ul>
					<li><a href="#">Welcome</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Rates / Specials</a></li>
					<li style="border: none;"><a href="#">Contact Us</a></li>
				</ul>
				</div>
		</div>
		<div class="footer"></div>
	</div>
 
</body>
</html>

and the CSS code is here:

/*-----Main-----*/
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	background-color: #000000; 
}
a { 
	color: #999999;
	text-decoration:underline;
}
a:hover { 
	color: #0099ff;
	text-decoration:none;
}
#wallpaper {
	background: url(../images/wallpaper.gif) repeat-y;
	width: 960px;
	margin: 0 auto;
	padding: 0px;
	height: 1000px;
}
#wrapper {
	background: url(../images/repeater.png) repeat-y;
	width: 840px;
	margin: 0 auto;
	padding: 0px;
}
.blackOverlay {
	background-color: #121212;
	padding: 0px;
	clear: both;
	width: 800px;
	margin: 0px 20px 0px 20px;
}
.blackOverlay H2 {
	color: #999999;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 0px 10px 0px;
	margin: 0px;
}
.blackOverlay ul {
	color: #999999;
	font-size: 12px;
	font-weight: bold;
	background-color: #121212;
	padding: 10px 0px 10px 0px;
	margin: 0px;
}
.blackOverlay li {
	display: inline;
	list-style: none;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 20px 0px;
	border-right: 1px solid #999999;
	text-transform: uppercase;
	font-size: 10px;
}
.blackOverlay p {
	color: #999999;
	font-size: 11px;
	padding: 0px 0px 10px 0px;
	margin: 0px;
}
/*------Content-------*/
#content {
	width: 800px;
	margin: 0px;
	background-color: #FFFFFF;
	padding: 0px 20px 0px 20px;
}
h1 {
	background: #121212 url(../images/header.jpg) no-repeat;
	width: 800px;
	height: 235px;
	text-indent: -9999px;
	padding: 0px;
	margin: 0 auto;
	display: block;
}
.leftContent {
	width: 450px;
	text-align: left;
	background-color: #FFFFFF;
	float: left;
	font-size: 13px;
	padding: 0px;
	margin: 0px 20px 100px 20px;
}
.leftContent p {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px 20px 0px 20px; 
}
.leftContent ul {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px 60px 0px 60px; 
}
.rightContent {
	background-color: #FFFFFF;
	width: 300px;
	float: right;
	padding: 0px;
	margin: 0px;
	text-align: right;
}
.footerClock {
	background: #121212 url(../images/homeBottom2.jpg) no-repeat;
	width: 800px;
	float: left;
	height: 105px;
	display: block;
	clear: both;
}
 
.clock {
	background: url(../images/clockTop.jpg) no-repeat;
	width: 233px;
	height: 205px;
	display: block;
	float: right;
}
.footer {
	background: url(../images/footer.png) no-repeat;
	width: 840px;
	height: 15px; 
	clear: left;
	display: block;
	margin: 0 auto;
	padding: 0px;
}
/*-------------Nav styles -------------*/
.nav {
	padding: 0px; 
	margin: 0px;
	list-style: none;
	text-align: left;
	position: relative;
	left: 77px;
}
.welcome a {
	background: url(../images/welcomeBTN.png) no-repeat;
	width: 264px;
	height: 53px;
	display: block;
	text-indent: -9999px;
}
#welcome .welcome a {
	background: url(../images/welcomeBTN.png) no-repeat;
	background-position: 0px -53px;
	width: 264px;
	height: 53px;
	display: block;
	text-indent: -9999px;
}
.welcome a:hover {
	background-position: 0px -53px;
}
.rates a {
	background: url(../images/ratesBTN.png) no-repeat;
	width: 264px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}
.rates a:hover {
	background-position: 0px -50px;
}
.services a {
	background: url(../images/servicesBTN.png) no-repeat;
	width: 264px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}
.services a:hover {
	background-position: 0px -50px;
}
.contact a {
	background: url(../images/contactUsBTN.png) no-repeat;
	width: 264px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}
.contact a:hover {
	background-position: 0px -50px;
}

@}->-- Amanda

Parthiban
Parthiban's picture
Offline
newbie
Madurai
Last seen: 11 years 19 weeks ago
Madurai
Timezone: GMT+5.5
Joined: 2010-02-22
Posts: 2
Points: 2

clock align

Love
easy to fix this error

just remove line no :115(float:left) on style sheet

fix your ie problem

Parthiban
Parthiban's picture
Offline
newbie
Madurai
Last seen: 11 years 19 weeks ago
Madurai
Timezone: GMT+5.5
Joined: 2010-02-22
Posts: 2
Points: 2

clock align

Love
easy to fix this error

just remove line no :115(float:left) on style sheet

fix your ie problem

more visit my site : www.cssblog.info

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 22 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Nope, not quite. Seems to

Nope, not quite. Seems to have caused a different IE issue, actually.

@}->-- Amanda

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 22 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

It looks the same to me in

It looks the same to me in Firefox as it does in IE8. Do you have a screenshot of the problem?

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 11 years 22 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Screenshot

Here's a screenshot. I've highlighted the IE issues. It's pretty subtle problems, but problems all the same.

@}->-- Amanda