HTML - Firefox Reads It Differently Than Explorer

Here is the code:
EDIT:

I missed part of the code:

<id class = "vision">
CLEAN is founded </class>on the belief that education is the essential foundation for global climate change solutions. CLEAN is a program designed to supplement existing elementary (1st-8th grade) science education. First, children learn the fundamental scientific background they need in order to understand global climate change. Second, CLEAN provides them with the tools and support they need to take positive action. Particular emphasis is placed on climate change as a concern that is not only individual and local, but equally collective and global. This emphasis is supported through the development of communication and collaboration between classrooms locally and internationally. The problems presented by global climate change can seem overwhelming, often leading to apathy and inaction. By combining practical information with a fun, engaging, play-based learning environment, CLEAN fosters a positive attitude that empowers children to take meaningful action.

and the "Vision" code in my css is very simple:

.vision {
font: bold 25px Tahoma, 'trebuchet MS', Sans-serif;
}


In firefox it renders like this:



while here it is in Explorer:


Why the difference and how do I fix it? I have read that Microsoft doesn't follow the "rules" established by the web boards about how code should be done. Is this the problem in this case? Thanks!

Hi,

I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc).

Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck.

CSS code:

Code:

/*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/

body
{
	background: #000000;
	color: white;
}	
	
div#site
{
	display: block;
	color: #000000;
	margin-top: -10px;

}

/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */

#header
{
	background: url(images/header2.gif);
	width: 865px;
	height: 143px;
	
}	

/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/

#header .text
{
	position:relative;
	top:42px;
	left:322px;
	
	word-spacing: 24px;
	font-size: large;
}

/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/

div#navbar2 {

    width: 70%;

    border-top: solid #000 0px;

    border-bottom: solid #000 0px;

	background-image: url(images/button.gif);
}

div#navbar2 ul {

   margin: 0px;

   padding: 0px;

   font-family: Arial, Helvetica, sans-serif;

   font-size: 12px;

   color: #FFFFFF;

   line-height: 30px;

   white-space: nowrap;

}

div#navbar2 li {

   list-style-type: none;

   display: inline;

}

/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/

div#navbar2 li a {

   text-decoration: none;

   margin: 20px;
   
   padding: 7px 15px;

   color: #FFFFFF;

}



div#navbar2 li a:visited {

   color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/

}

div#navbar2 li a:hover {

   font-weight: bold;
   
   color: #FFFFFF;

   background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/

}

/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/

#content
{
	background: url(images/content.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

#content_nobars
{
	background: url(images/content_nobars.gif);
	width: 865px;
	height: 534px;
	margin-left: 0px;
	margin-right: 0px;
	float: left; 
    margin: 0px 187px;
	
}

/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/

#content .title
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:215px;
	width:500px;
    height:18px;
	overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
					 /*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}

#content .text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 255px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title2
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:375px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text2
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 415px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .title3
{
	color: #CC66FF;
	font-size:16px;
	position:absolute;
    text-align:left;
	left:515px;
	top:541px;
	width:500px;
    height:18px;
	overflow:hidden;
}

#content .text3
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:500px;
	top: 580px;
	width:500px;
	height:80px;
	overflow:hidden;
}

#content .read_more
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 168px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more2
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 318px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content .read_more3
{
	color:black;
	font-size:14px;
	position:relative;
	text-align:center;
	left:355px;
	top: 468px;
	width:100px;
	height:16px;
	overflow:hidden;

}

#content_nobars .about_us_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 425px;
	width:550px;
	height:250px;	
	overflow:auto;
}

#content_nobars .other_title
{
	color: #000000;
	font-size:24px;
	text-decoration:underline;
	position:absolute;
    text-align:center;
	left:510px;
	top:200px;
	width:500px;
    height:30px;
	overflow:hidden; 	
}

#content_nobars .other_text
{
	color:black;
	font-size:14px;
	position:absolute;
	text-align:left;
	left:480px;
	top: 250px;
	width:550px;
	height:432px;	
	overflow:auto;
}

#content_nobars .about_us_picture
{
	background: url(images/1.jpg);
	width: 290px;
	height: 175px;
	position:relative;
	left:130px;
	top:50px;
}

/*The footer code defines the location of the footer image, and the size of it.*/

#footer
{
	background: url(images/footer.gif);
	width: 870px;
	height: 105px;
}

/*These 2 commands keep URL links coloured black, before and after they have been visited.*/

a:link { color:black }
a:visited { color:black }

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file
which will be used to create the layout and look of the website.-->

<head>

<title>Pampered Pooches Grooming</title>

<link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css">

</head>

<!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.-->

<body>

<div id="site">

	<div id="header">
	
	</div>
	
	<div id="navbar2">
		
	<ul>

<!--This code creates a list of the navigational links to other pages of the website-->	
	
	<li><a href="index.html">Home</a></li>

	<li><a href="aboutus.html ">About Us</a></li>

	<li><a href="services.html ">Services</a></li>
	
	<li><a href="theparlour.html ">The Parlour</a></li>
	
	<li><a href="dogofthemonth.html ">Dog of the Month</a></li>
	
	<li><a href="contactus.html ">Contact Us</a></li>

	</ul>
	
	</div>
	
	<div id="content">


<!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.-->
	
	<div id="footer">
	</div>
	

	

</div>

</body>

</html>

Thanks for any help.

hello,

the attached below is a position template for displaying merchandise.

in IE the html shows properlly with no internal borders.

in FIREFOX (version 1.5.0.9), the cells and tables are all bordered.

i have now intentionally put - BORDERCOLOR="FFFFFF' and BORDERWIDTH="0" -wherever i possibly could in order to try and eliminate the borders from showing in firefox - to no avail.

any suggestions?

weblost


here is the link if you prefer to view it.

the position is the one marked "test 2"

http://cafepanik.com/lobby/3_sneekee...ial/index.html

I have created a div which sits on the right hand side. I have created two different size ones as one of my html pages has a lot more content on it. here are in the divs in CSS: Code:

#picstrip{
	width:200px;
	height:740px;
	padding: 10px 10px 20px 10px;
	background-color:#8d6cd1;
	z-index:999999;
	float:right;
}

#picstrip2{
	width:200px;
	height:1270px;
	padding: 10px 10px 20px 10px;
	background-color:#8d6cd1;
	z-index:999999;
	float:right;
}

I want these divs to be touching the footer i have created:
Code:

#footer{
background-color:#2ba475;
width:800px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

table.foot{
text-align:center;
}

I am currently able to make it work it just one of the web browsers at a time. The div seems to be shorter in size in IE. is there any way round this problem?

I will be so greatful for any help.
Thank You

Hi,

My background looks differently in Firefox and Explorer. Any ideas? Thank you

<html>
<head>
<STYLE TYPE="text/css">
<!--
body {
background-color: #570000;
background-image: url(http://i144.photobucket.com/albums/r...uzaramka.jpg);
background-repeat: no-repeat;
background-position: center;
background-position: top;
}

-->
</STYLE>
</head>
</html>