Member Avatar for mr_scooby

hey guys am teaching myself html and css and have found something I'm not sure how to fix.

I have a 3 page website I'm playing with using exactly the same html on all 3 pages except the title and all 3 linking to the same css sheet yet the index page is smaller than the other pages when viewed in a browser.

edit- in IE they are the same in FF they are different

When I open the navbar image in a photo viewer it is the index page that has the wrong size and the other 2 match the the photo viewer proportions of the image.

html- the navbar & title images are both 714px wide and the background is 780px by 1000px

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

<head>
<title>New Project - Contact Me</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body id="container">
<!-- Curriculum heading -->
<table style="width: 780px; margin-top: 40px; border: 1px solid; cellpadding; 0px; cellspacing: 0px">
	<tr><td>
		<img src="title.gif" alt="title">
	</td></tr>
</table>	

<!--navbar  -->
<table style="width: 780px; margin-top: 40px; border: 1px solid;  cellpadding; 0px; cellspacing: 0px">
	<tr><td>
		<a href="index.html"><img src="1.gif" alt="navigationBar" border="0px"></a><a href="contact me.html"><img src="2.gif" alt="navigationBar" border="0px"></a><img src="3.gif" alt="navigationBar"><img src="4.gif" alt="navigationBar"><img src="5.gif" alt="navigationBar">
	</td></tr>
</table>

</body>

</html>

all 3 html pages have the same html as i cut and past from the index page

css code

/*
html { 
	background-color: #888888;
	
}*/

body {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 780px;
}

#container {		
	margin-top:0px;	
	margin-bottom: 0px;
	background-image: url('bg2.png');
	background-position: top center;	
	height: 1000px;
	background-repeat: no-repeat;
	text-align: center;		
}

all 3 are linked to the same css page

any ideas would be greatly appreciated.

Edited by mr_scooby because: n/a
  • 3 Contributors
  • 3 Replies
  • 187 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mr_scooby

Recommended Answers

All 3 Replies

Member Avatar for Kruptein

I had once the same problem, in FF everything was messed up. I've solved it by instead of using: width: 150px doing width: 145px
Try to do some pixels of the width, heigth and say if it still occurs.

Member Avatar for Traevel

Hi there,

This might not solve your problem right away, but it might prevent some issues in the future (especially if you're copying your code over and over).

On lines 11 and 18 of your HTML code you are using cellpadding and cellspacing, but neither one is a valid CSS property. Instead you could place them outside the style tag to get the desired effect.

<table cellpadding="0" cellspacing="0" style="width: 780px; margin-top: 40px; border: 1px solid;">

Furthermore, it is best not to place properties like height, width, margin etc. in the element itself, but in a box model. Perhaps this page might be of some help.

At first I thought your problem had something to do with the differences between IE and FF, but after reading again I noticed you mentioned differences between identical pages within the same browser. Personally, I haven't spotted any errors in layout in IE or FF with your code, other than the absence of the images of course. Perhaps the following changes in the code might solve it, although I'm not exactly sure.

The new HTML now uses a div as "container" instead of the entire body. The CSS has been changed to maintain layout. One last note: since your code did not handle the "cellpadding" and "cellspacing" correctly, you might see some differences in table-layout. Just remove them if you'd wish to return to the previous look.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>New Project - Contact Me</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="container">
	<!-- Curriculum heading -->
	<table cellpadding="0" cellspacing="0" style="width: 780px; margin-top: 40px; border: 1px solid;">
		<tr><td>
			<img src="title.gif" alt="title">
		</td></tr>
	</table>	
	<!--navbar  -->
	<table cellpadding="0" cellspacing="0" style="width: 780px; margin-top: 40px; border: 1px solid;">
		<tr><td>
			<a href="index.html"><img src="1.gif" alt="navigationBar" border="0px"></a><a href="contact me.html"><img src="2.gif" alt="navigationBar" border="0px"></a><img src="3.gif" alt="navigationBar"><img src="4.gif" alt="navigationBar"><img src="5.gif" alt="navigationBar">
		</td></tr>
	</table>
</div>
</body>
</html>

And the StyleSheet

body {	
	background-image:url('bg2.png');	
	background-position:top center;
	background-repeat:no-repeat;
} 
#container {	
	width:780px;
	height:1000px;
	margin: 0 auto 0 auto;
	text-align:center;	
}

Once again, when I used this code I wasn't able to spot any differences between IE and FF or within the same browser.

Good luck with your site,

Traevel

commented: awesome feedback +2
Member Avatar for mr_scooby

found the problem, I cut the entire folder with all the docs in and pasted somewhere else, then ran it from there and everything was ok.

Really weird, I had done the cntl f5 trick, restarted the browser, even tried restarting the pc and yet it didn't fix it, the project folder was on my desktop at the time and is now in one of my drives.

anyway problem fixed.


Traevel thanks for your answers will have a good look at your suggestions, thanks heaps :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.