Forums

buncreative

Hi there,

I am a mac-user, after learning some CSS tricks here, I thought of helping my uncle creating his optical shop website. However, it seem everything mess-up after I previewed it in IE. At first, a gap was appeared in the browser. Later, after I have added in more info, things gone missing. Can any expertise out there give me some tips to solve the problem?

Below is my html 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>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<title>Nanyang Optical | Welcome</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"reset.css\" />
	<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
</head>

<body id=\"home\">
	
	<div id=\"container\">
		<div id=\"preset_mast\">
			<h1>Masthead and Logo</h1>
		</div>
		<div id=\"main_contain\">
			<div id=\"main\">
				<h2 class=\"title_bar\">Let's ride on the green</h2>
			</div>
			<div id=\"sidebar\">
				
				<ul id=\"nav\">
					<li class=\"blanktop\">btnBlank_top</li>
					<li class=\"home\"><a href=\"index.html\">home</a></li>
					<li class=\"about\"><a href=\"aboutus.html\">about us</a></li>
					<li class=\"services\"><a href=\"services\">our services</a></li>
					<li class=\"products\"><a href=\"products\">our products</a></li>
					<li class=\"contact\"><a href=\"contact\">contact</a></li>
					<li class=\"blankbottom\">btnBlank_bottom</li>
				</ul>
				<div id=\"copyrights_info\">
					<p>copyrights &copy;Nanyang Optical<br/>All Rights Reserved</p>
					<p class=\"emailme\"><a href=\"mailto:danel@buncreative.com\">Concept &amp; Idea: Buncreative</a></p>
				</div>
				
			</div>
			<div id=\"subpromote\"></div>
		</div>
	</div>
	
</body>
</html>

Here is my Global reset CSS code


body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 62.5% Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Last but not least, this is my customized style sheet


#container {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 1010px;
}

#preset_mast {
	height: 157px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	background: url(images/masthead.gif) no-repeat;
}

/* SETTING FOR MAIN */
#main {
	width: 800px;
	margin-left: 200px;
	position: absolute;
	float: left;
}

#main h2.title_bar {
	font-family: helvetica, sans-serif;
	font-size: 2em;
	font-weight: lighter;
	text-indent: 20px;
	color: white;
	padding: 5px 0px 10px 0px;
	background: url(images/titleBar.gif) no-repeat;
}
/* END MAIN */

/* SETTING FOR SIDEBAR */
#sidebar {
	margin: 0 auto;
	float: left;
}

#nav {
	float: left;
	position: absolute;
	top: 160px;
}

li.blanktop {
	display: block;
	height: 35px;
	text-indent:-9999px;
	background: url(images/btnBlank_top.gif);
}

#nav li a {
	display: block;
	height: 35px;
	text-indent: -9999px;
	margin: 0px 0px -2px 0px;
}

#nav li a:hover {
	background-position: top center; 
}

li.home a{
	width: 210px;
	background: url(images/home_nav.jpg) bottom center;
}

li.about a{
	width: 210px;
	background: url(images/aboutus_nav.jpg) bottom center;
}

li.services a{
	width: 210px;
	background: url(images/services_nav.jpg) bottom center;
}

li.products a{
	width: 210px;
	background: url(images/products_nav.jpg) bottom center;
}

li.contact a{
	width: 210px;
	background: url(images/contact_nav.jpg) bottom center;
}

li.blankbottom {
	display: block;
	height: 267px;
	text-indent:-9999px;
	background: url(images/btnBlank_bottom.gif);
}

body#home li.home a,
body#about li.about a,
body#services li.services a,
body#products li.products a,
body#contact li.contact a
 {
	background-position: top center;
}

#copyrights_info {
	font-family: helvetica, sans-serif;
	font-size:0.7em;
	line-height: 1.2em;
	color: #666;
	text-align: right;
	margin-top: 500px;
}

p.emailme a{
	color: #666;
	line-height: 3em;
}
/* END SIDEBAR */

Please I really need some help here. :(

Edwin

Maybe you can put all the stuff also online somewhere? That's easier for us to bugfix...
I don't know if you've tried conditional statements (special css for IE) yet? You can find more info about that here.

buncreative

Hi Edwin,

Thanks a million for your response. I am really new in this area (CSS). Previously, I did the design totally rely on Dreamweaver. But I thought it's time to upgrade myself to a more professional level. Here, I uploaded the file to the server. Please feel free to download it and hope that you can show me the way.

Following is the link, http://www.buncreative.com/demo/website.zip

Take care, and I shall look forward to hearing from you soon.

treehouse : what would you like to learn today?

Forums

css styling not work properly in IE