HTML - Different Length Pages Appear Differently

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.

Hi. I just had my dad download the Opera web browser and I was checking on a website I did with all black tables... the tables are unseen when viewed on Mozilla or IE but when I look at the page on Opera the tables show up and are grey bordered. Is this just an error with Opera's code reading or is there something I can be doing to prevent it?

the site is
www.spmstudio.com

Thanks!

Hello all,
I'm sorry if this is a little naive, I'm still new to all of this. I'm hoping this is in the right area, it seems to fit best here.

So I made my first website, and it's no where near done content wise, but I asked some friends (online friends who know about web programming) to take a look at it. They all responded that it was annoying because they had to side scroll. This I have figured is because I am working in a lower resolution then them. I'm working on Ubuntu, and I can't find a way to change the resolution.

What I'm wondering is, how do I know what it looks like to my viewers? Is there a way to edit my code so that it views differently in different resolutions and fits everyone's page? and is there a "normal" width that everyone keeps their pages at, so that it is viewable easily by all?

website is here.

Thanks in advance!

Greetings and thanks for checking my question out.

I oversee an academic site for mostly text at www.zeitschrift.co.uk and when I recently updated it with new material, specifically at www.zeitschrift.co.uk/v4n1jryskamp, it will not seat properly in the browser window, but this page seems to work ok with explorer. Does anyone have any suggestions.

Much appreciated,

HTML Dad

Hi

I have a problem with a page that i have just created.

It looks great in explorer but when i open it with firefox, chrome ans safari it doesn't look that good anymore. Tables are not aligned the way they are supposed to be and pictures are not in their places....

What is the problem??

Thanks a lot for all the help

Best,
B

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

Hello,

I am running a Dotnetnuke website and I am running a News Feed module. In the template, I have the code below. I made the font size smaller to decrease the space between each feed. This works in IE 8 (smaller space between news items), but not IE 7. Any advice?

<table><tr><td><a href='[Link]'><strong><span style="font-family:century gothic;font-size:14; color:#000000;">[Title]</span></strong>
<span style="color:#000066"> Read More...</span><div style="font-size:4px;"><br/></div></a></td></tr></table>

Thank you in advance!

Matt Sabatello
msabatello@brookhaven.org
631-960-8650

Hello. I was trying to code my site, but I ran into a problem with my site working in firefox seamlessly, but looking very not good in internet explorer. I ran it through the markup validator thingy on the w3schools website, and it told me there was only one problem with the site and that was that the body tag was in the wrong spot (I don't know where else I'd put it though). And the text I put in it is way to the left in IE, but aligned right where I want it in FF.

Here's what it looks like in FF:


And here's what it looks like in IE:


This is the code I'm using:
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<title>Bite Me - The free online shonen-ai/yaoi novel - fantasy, vampires, romance, anime!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background:url(http://bitememanga.com/images/layout%20mabob%20copy.jpg) top center no-repeat;
height: 884px
}
#yaoinovel {
margin:auto;
padding: 80px 0px 0px 136px;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 14px;
color: white;
width: 610px

}
#updates {
margin:auto;
padding: 85px 0px 0px 135px;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 14px;
color: white;
width: 625px
}
#adsense {
margin:auto;
padding: 250px 160px 0px 0px;
height: 70px;
width: 175px
}
#affiliations {
margin:auto;
padding: 60px 0px 0px 50px;
width: 500px;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size:14px;
color: white;
}
#nav {
	margin: auto;
    padding:7px 0px 0px 128px;
	text-align: center;
    list-style-type:none;
    color: gray;
    font-family: Geneva, 'Times New Roman', Times, serif;
    font-size:24px;
	font-weight:bold;
	
 }
#nav a	{
    padding:3px;
    border:0px solid #ccc;
    font-size:18px;
    color:#f00;
    text-decoration:none;
	
 }

</style>

<div id="nav">
<a href="http://bitememanga.com/"><font color="white">.<font color="A30808">Home</font>.</font></a>
<a href="http://bitememanga.com/book.html"><font color="white">.<font color="A30808">Novel</font>.</font></a>
<a href="http://bitememanga.com/characters.html"><font color="white">.<font color="A30808">Characters</font>.</font></a>
<a href="http://bitememanga.com/about.html"><font color="white">.<font color="A30808">About</font>.</font></a>
<a href="http://bitememanga.com/videos.html"><font color="white">.<font color="A30808">Videos</font>.</font></a>
<a href="http://bitememanga.com/comments.html"><font color="white">.<font color="A30808">Comments</font>.</font></a>
<a href="http://bitememanga.com/forum.html"><font color="white">.<font color="A30808">Forum</font>.</font></a>
<a href="http://bitememanga.com/more.html"><font color="white">.<font color="A30808">More</font>.</font></a>

</div>

<div id="yaoinovel">
Welcome to Bite Me, the online shonen-ai/yaoi novel about Aku the vampire, and his love, Haru. You're probably wondering what this means. Well, shonen-ai means "boys love", in other words, love between two boys. A manga is a japanese comic book that reads from right to left, and a manga-novel is a book with Japanese names, settings, and customs that you may find in a manga.  <br><br><br>
We also have lots of shonen-ai and yaoi videos and a forum to discuss boys love.  We hope to see many active participants in our site!
</div>
<div id="updates">
<font color="A30808">*06/25/2009*</font> Switched layouts!  We hope everybody likes the new one!  : D  Also, we added a videos page and changed the forum a lot.</div>

<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-0516390167224604";
/* 468x60, created 6/25/09 */
google_ad_slot = "9079773776";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="affiliations">
<a href="http://www.durka2manga.com/" title="Durka 2 Manga"><img src="http://www.durka2manga.com/images/d2m_aff.jpg" alt="Durka 2 Manga" title="Durka 2 Manga" width="100" border="0" height="31"></a>
&nbsp;&nbsp;&nbsp;<br>If you'd like to become an affiliate, please email us at bitememanga@hotmail.com</div>


<body>
<p></p>
</body>
</html>

I could really use help with this. I appreciate anything you can do!

Good evening all - our site:
http://www.proliant-hard-drives.com/

was designed about a month ago - we just installed IE7 today and the header of our site has a white line displaying horizontally through the middle of it.

http://www.globalonetechnology.com/ff-vs-ie7.jpg

Does anyone know why this is happening? Is there a fix for it?

Thanks!
g1tech

I'm very new to html and have just started making a website in dreamweaver to build a digital portfolio of design work.
The problem is, is that I need my navigation text to be in an exact part of the page (it fills in a section with the table background).
When I started making the site it displayed fine in firefox and safari, but not in a few versions of IE I tried.
I'm sure there's a solution for this and if anyone could help it would be much appreciated. I've included a link to a test page so you can see what I mean:
http://www.digitodd.net/aurora.html

Thanks

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!

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

This site: http://gmjones.org/

Displays well, apart from the black background!, in Opera and FireFox browsers but not in Microsoft's browser.

The code for the search box is

<li><form action="http://www.google.com/search" name="searchbox" method="get" style="padding-top: 1px;">
<input name="hl" value="en" type="hidden">
<input name="sitesearch" value="gmjones.org" type="hidden">
<input maxlength="205" size="38" name="q" value="">
<input value="SEARCH THIS SITE" name="" style="font-size: 80%; margin-left:19px;" type="submit">
</form></li>

How do I get the search box to appear within the rest of the red strip, and in red?

Thanks.

EDIT: DON'T KNOW WHAT I DID BUT IT'S OK NOW!

Hi. I have a very discrete light blue color in the background from a previous template. It ends about halfway through the bottom area and I'd like to extend it throughout the entire page without moving/overwriting anything else please.

www.movehumanityforward.com

Thank you

hello, new member here so hiya!

I have a site and I have a div containing all the page. At first I gave it a height just so I could put CSS in and see what it's like. After I have taken out the height though, the div shrinks to like 1 pixel. Why isn't it as long as it's containing divs - including left column, main section, footer?

Many thanks