IE 7, and 8 issues - weird spacing/overlapping

5 replies [Last post]

Thu, 2010-02-18 02:37

amadika

Offline

Enthusiast

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

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.

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

Tags:

Mon, 2010-02-22 18:57

Parthiban

Offline

newbie

Timezone: GMT+5.5

Joined: 2010-02-22

Posts: 2

Points: 2

clock align

easy to fix this error

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

fix your ie problem

Mon, 2010-02-22 18:58

Parthiban

Offline

newbie

Timezone: GMT+5.5

Joined: 2010-02-22

Posts: 2

Points: 2

clock align

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

Tue, 2010-02-23 02:52

amadika

Offline

Enthusiast

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

Tue, 2010-02-23 03:03

FernE97

Offline

Enthusiast

Timezone: GMT-7

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?

http://www.efdezigns.com/

Tue, 2010-02-23 14:14

amadika

Offline

Enthusiast

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

IE 7, and 8 issues - weird spacing/overlapping

clock align

clock align

Nope, not quite. Seems to

It looks the same to me in

Screenshot

New forum topics

User login

Navigation