Forums

med267

Hi,

I have a simple page with rounded corners that shows up strange in IE7 (1st image)

http://img.skitch.com/20090522-md5gxfy6k8aafhu9w4qn48gip8.jpg

But shows up fine in Safari 3 & Firefox 3 on Windows or Mac.

http://img.skitch.com/20090522-e4a2h227epc6rhsf4sb1j794xy.jpg

1) I am looking for help how I could get the margin left to show properly in IE7 (Flush left & up with picture above it)
2) Try to to solve the rounded corners issue in the IE7 screenshot (1st image)

Here is my css file:

* 					{ margin: 0; padding: 0; }
body 				{ background-color: #a8bdc6; background-image: url(bgofpage.gif); background-repeat: repeat-x repeat-y; font-size: 82.5%; font-family: Georgia, serif;}
p					{ font-size:1.2em; color: #f4f8fb; }
.floatLeft 			{ float: left; }
.floatRight 		{ float: right; }
.clear 				{ clear: both; }
.imagecenter { text-align: center; }

div#page-wrap 		{ width: 680px; margin-top: 75px; margin-left: auto; margin-right: auto; }


#dl_nav				{ font-size: 70%; text-align: center; }
#dl_nav ul 			{ list-style: none; margin: 0 0 0 0px; padding: 0; padding-top: .5em; }
#dl_nav li 			{ display: inline; }
#dl_nav a:link, #dl_nav a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; background-image: url(buttonbg1.gif);   text-decoration: none; border: 1px solid #711515;	}

#dl_nav a:hover 	{ color: #FFFFFF; background-color: #711515; background-image: url(buttonbg1.gif);  }
#videodirective		{ text-align: center; margin-bottom: 4px; }
#menucenter 		{ margin-left: 11px; margin-bottom: 0px; margin-right: 0px; margin-top: 0px; background-color: black; width: 654px; min-height: 70px; }

.mainbox			{ width: 678px; background: url(mainbox_vertmiddle.gif) center repeat-y; margin: 10px 0; }
.mainbox .inside	{ padding: 0 20px; }

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\"
		<title></title>
			<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
	
	
	<!--[if lt IE 7]>
		<style>
			@import \"http://www.site.com/_css/ie6.css\";
		</style>
	<![endif]-->


	</head>
	


<style>
div.overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(/img2/white.png);	
}

div.overlay div.close {
	background:url(/img2/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

div.overlay a {
	height:450px;
	display:block;
}
</style>

	
	<body>
	
	



	<div id=\"page-wrap\">
	
		<div class=\"mainbox\">
			<img src=\"mainbox_top.gif\" alt=\"\" width=\"678\" height=\"10\"/>
			
			<div class=\"imagecenter\">
			
			
			<img src=\"couple.jpg\" alt=\"\" border=\"0\" />				
			
			<div id=\"menucenter\">
			
				<div id=\"videodirective\">

					<img src=\"videodirective.gif\" alt=\"videodirective\" width=\"319\" height=\"21\"/>
				</div>
			
			<div id=\"dl_nav\">
			<!-- link up overlay -->
				<ul>
				<li><a href=\"#\" rel=\"div.overlay\"
				
				title=\"\" >Flash High</a></li>
				<li><a href=#>High MP4</a></li>
		
				</ul>

				

<p> </p>


			</div>
			
			</div>
			



			
			<div class=\"imagecenter\">
				<br />
				<p>Content</p>

				<p>Date</p>
				<img src=\"logo.gif\" alt=\"logo\" width=\"655\" height=\"36\"/>
		
			</div>

	
			<img src=\"mainbox_bottom.gif\" alt=\"mainbox_bottom\" width=\"678\" height=\"12\"/>
		
		</div>
		
	</div>	
	

		
		<div id=\"footer\">
		footer
		</div>

		
	
	</body>
</html>

Thanks very much for taking a look *

Jeff

med267

I guess in my first screenshot of my IE7 problem, it doesnt show very clear. (sorry)

The #menucenter shows up in IE7 off center to the right & a small amount of pixels down from the 655 x 258 image above it. (I am trying to have it flush to the left & up flush to the large image above it.

treehouse : what would you like to learn today?

Forums

IE7 Problem Safari 3 & Firefox 3 Win Mac Fine