• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

Huh! Works in Firefox but not IE?

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

Xoligy

Member
Joined
May 23, 2005
Ok im doing an online blog for university (it's a group blog and what not) anyway this is my first CSS effort and i thought i was doing alright untill i noticed errors in university. What did i notice... the bg was ment to be two colours and it deisplayed only one in IE so when i got home i soted that out to get a new error... my links no longer work with the new code!

Can someone please tell me where ive gone wrong as i dont have a clue! :shrug:

first the css file
Code:
html {
font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
background-color: #FFDEAD;
color: #fff;
text-align: center;
}
body {
margin: 10px auto 0 auto;
text-align: left;
width: 782px;
border: 1px solid #fff;
background: #B22222;
padding: 0 0 6px 0;
}
#leftcol {
float: left;
display: inline;
width: 124px;
padding: 8px;
margin: 90px 0 10px 6px;
border: 1px dotted #fff;
}
#main {
text-align: justify;
float: left;
display: inline;
width: 601px;
padding: 8px;
margin: 90px 0 10px 10px;
border: 1px dotted #fff;
}
#copyright {
padding: 0 3px 0 3px;
width: 764px;
clear: both;
text-align: center;
border: 1px dotted #fff;
margin: 0 6px 0 6px;
}
ul {
padding: 0;
margin: 4px 0 4px 0;
list-style-type: none;
}
li a {
font-weight: normal;
}
li a:hover {
margin-left: 5px;
color: #fff;
}
p {
margin: 4px 0 4px 0;
}
h1 {
margin: 10px 0 -45px 43px;
}
h2 {
font-size: 13px;
text-decoration: underline;
margin: 0;
}
a {
font-weight: bold;
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
}

now the html file
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>.:Launchpad - Cafe & Bar Reviews:.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
</head>

<body>

<h1>Launchpad - Cafe & Bar Reviews</h1>

<div id="leftcol">
	 <h2>Navigation</h2>	
	 <ul>
		<li><a title="Go to the homa page" href="index.htm">Home</a></li>
		<li><a title="Group 1" href="group1.htm">Group 1</a></li>
		<li><a title="Group 2" href="group2.htm">Group 2</a></li>
		<li><a title="Group 3" href="group3.htm">Group 3</a></li>
		<li><a title="Blogs" href="blog.htm">Blogs</a></li>
	 </ul>
</div>

<div id="main">
	 <h2>Cafe and Bar Review</h2>
	 <p>
	 	Ok here are what we could do with this, we could write down what we were ment to do where i have writen and then have it link to our group blog and then i can make the links goto there blog pages. Also in this section we
	 put what each of us did and so on </p>
	 
	 <h2>Another heading</h2>
	 <p>
	 	If you need anything changing or doing let me nkow and i'll sort it out either in class or tomorrow ok! Oh this isn't completely finished i still have some work to do to the css file :) </p>
</div>

<p><br /></p>

<div id="copyright">
	 <p>
	 	© 2005 <a href="./">Launchpad</a>, This Layout was created by 
		<a href="mailto:[email protected]?Subject=Site Design">The Group</a>
	 </p>
</div>

</body>
</html>

now if i remove the code i enterd the links work in ie but im back to one colour and not aligned! the code i enterd was:

Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>.:Launchpad - Cafe & Bar Reviews:.</title> <----obviosly not that :p
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Any help and insight is appreciated :eh?:
 
Hmm...I can help you with the HTML, but I need a better idea of what you are trying to do. I haven't a clue about CSS though...
 
make a working website using CSS like i say the links dont work in IE but they do in firefox and i dont know why :(
 
ok the problem is sorted in the tutorial he put: margin: 10px 0 -45px 43px;

you carn't have a negative margin doh! stupid tutorial!
 
Back