Free Weekly Tech Newsletter

mysterio2099 · 08-10-2005, 12:23 PM

This is basically just a compatibility problem between IE and Firefox/Netscape. When you look at the top, the W3C images in Firefox/Netscape drop down over the menu, and the CSS margin command isn't working.

I am only an amateur with CSS, so I don't know the compatibility issues it has with Firefox/Netscape, but I do know I'm getting tired of them...Dunno why everyone likes Firefox so much if it can't even show CSS code

Please advise.

link for file:
http://www.geocities.com/mystterio2099/xhtml/index.html

HTML Code:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First XHTML Code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
	background: url('images/bg-spacer.jpg') repeat fixed;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	margin-top:0px;
	}
a:link {
	color:#000000;
	text-decoration:none;
	padding: 0px 5px 0px 5px;
	}
a:visited {
	color:#000000;
	text-decoration:none;
	padding: 0px 5px 0px 5px;
	}
a:hover {
	color:#FFCC00;
	background-color:#000066;
	text-decoration:none;
	padding: 0px 5px 5px 5px;
	}
a:active {
	color:#000000;
	text-decoration:none;
	padding: 0px 5px 0px 5px;
	}
h3 {
	font-style:italic;
	font-size:13px;
	}
h2{
	font-style:italic;
	font-size:15px;
	}
h1 {
	font-style:italic;
	font-size:17px;
	}
#header {
	color:#CCCCCC;
	background-color:#000066;
	width:500px;
	height:50px;
	}
#menu {
	color:#000000;
	background-color:#999999;
	width:500px;
	height:15px;
	}
#content {
	color:#000000;
	background-color:#eee;
	border:1px dashed #000000;
	width:500px;
	height:auto;
		}
#footer {
	color:#CCCCCC;
	background-color:#000066;
	width:500px;
	height:10px;
	}
p {
	text-indent:1cm;
	text-align:left;
	}
-->
</style>
</head>
<body>
<center>
<div  id="header" align="left">
<h3>Test Title.com</h3>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.kevinboyette.com%2Fxhtml%2Findex.html"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.kevinboyette.com/xhtml/index.html"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
<div id="menu" align="left">
<a href="home.html">Home</a><a href="Music">Music</a><a href="tabs.html">Tabs</a><a href="Pictures">Pictures</a><a href="equip.html">Equipment</a><a href="contact.html">Contact</a>
</div>
<div id="content"><p>Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.</p><hr />
<p>Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.</p></div>
<div id="footer">Copyright © 2005 KevinBoyette.com</div>
</center>
</body>
</html>

foolishone · 08-10-2005, 12:41 PM

Make the header height 75px.

»fo

mysterio2099 · 08-10-2005, 12:45 PM

this fixes one problem... I still have the margin problem, and also I just noticed that the menu buttons go over the dashed border of the content area.

foolishone · 08-10-2005, 12:54 PM

I am not seeing a margin problem. Where is it?

EDIT: Change the menu height to 18px.

»fo

mysterio2099 · 08-10-2005, 12:59 PM

in Firefox, the top margin isn't 0...in IE it is (like it should be).

foolishone · 08-10-2005, 01:07 PM

Try changing the margin-top in the body to -13px. This is a rather crude way of going about it and I will see if I can find the cause of the problem, instead of a coverup.

EDIT: Okay scratch that. IE loses the title.

mysterio2099 · 08-10-2005, 01:11 PM

Hmmm.....firefox should burn, or work with CSS...this be no not any not no fun dude. HAHA

Stryker · 08-10-2005, 01:17 PM

Easy boy!!!

The margin in FF is because of the margin on H3. Set margin:0px; for H3 to remove top spacing.

I'm still lookin' so go easy for a minute.

foolishone · 08-10-2005, 01:20 PM

Add this line to header:

border:1px solid #000066;

Another coverup but it works in both browsers.

EDIT: Delete the bg-spacer image in body, unless you need it. I didn't see it change anything.

mysterio2099 · 08-10-2005, 01:21 PM

Ok Stryker, that works...but of course it brings the W3C images right up under the H3 title...which I dont want...so I used margin:0px, 0px, 5px, 0px; to space the bottom, but that spaced the top as well.

mysterio2099 · 08-10-2005, 01:22 PM

Quote:

Originally Posted by foolishone

Add this line to header:

border:1px solid #000066;

Another coverup but it works in both browsers.

EDIT: Delete the bg-spacer image in body, unless you need it. I didn't see it change anything.

This fixes it, but makes the header wider than the other areas, which I don't like. So, this isn't a good fix/cover-up.

Stryker · 08-10-2005, 01:24 PM

Ok couple more things...

a:hover has a different margin specified than the other a:'s, with the 3rd parameter as 5px but the rest are 0px. This is why it's overlaping the border.

Also, you should have seperate a:... designations for your menu than the rest of the document (i.e. #menu a:link, etc...). Have a regular set like you have now and set them to regular links, then the #menu a's can be the same as what's there, but it will only apply it to what's in the menu div.

foolishone · 08-10-2005, 01:24 PM

Try padding or margin-bottom:5px.

mysterio2099 · 08-10-2005, 01:28 PM

Ok guys, problems are solved.... But, Stryker, I've never did the links like you mentioned, how exactly do you code that?

I tried #menu.a:link ...that didn't work....not sure how to go about this

Thanks guys!

Stryker · 08-10-2005, 01:31 PM

No "." between menu and a and it should work:

Code:

#menu a:link {
blah: blah;
}
#menu a:active {
blah: blah;
}

#menu a:visited {
blah: blah;
}

#menu a:hover {
blah: blah;
}

mysterio2099 · 08-10-2005, 01:35 PM

works great Stryker. Thanks again dawg, you rock. I'll send ya a check

LOL

Stryker · 08-10-2005, 01:39 PM

Not a problem.
Any other issues?

By the way, FF interprets code exactly as it should (as per W3C standards). IE tents to "assume" things when it probably shouldn't, but it usually compensates for errors in code fairly well. In short... nothing wrong with firefox, it just does what it's supposed to do (which is display the code you type)

.

mysterio2099 · 08-10-2005, 01:41 PM

LOL...well, IE accepts my errors, so he be cool B-) FF on the other hand has to have everything juussssttt riiigghht...what has become of the world? Perfection? HA! Who needs perfection? My uncles a nuclear engineer, they don't need perfection! ...might be why their factory exploded and kill millions...but, you know, that's another story (This concludes another fictional story by Mysterio2099)

Stryker · 08-10-2005, 01:45 PM

I await "CSS Problem - 4th Edition".

mysterio2099 · 08-10-2005, 01:54 PM

ha, ha, ha...very funny....Although you may see it. HAHAHHAHAA. At the moment, things are running smoothly ...mwuahahahhaa *knocks on wood*

08-10-2005, 12:41 PM	#2
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	Make the header height 75px. »fo Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 12:45 PM	#3
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	this fixes one problem... I still have the margin problem, and also I just noticed that the menu buttons go over the dashed border of the content area. Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 12:54 PM	#4
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	I am not seeing a margin problem. Where is it? EDIT: Change the menu height to 18px. »fo Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 12:59 PM	#5
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	in Firefox, the top margin isn't 0...in IE it is (like it should be). Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:07 PM	#6
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	Try changing the margin-top in the body to -13px. This is a rather crude way of going about it and I will see if I can find the cause of the problem, instead of a coverup. EDIT: Okay scratch that. IE loses the title. Share Share this post on Digg Del.icio.us Technorati Twitter

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter

08-10-2005, 01:11 PM	#7
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	Hmmm.....firefox should burn, or work with CSS...this be no not any not no fun dude. HAHA Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:17 PM	#8
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	Easy boy!!! The margin in FF is because of the margin on H3. Set margin:0px; for H3 to remove top spacing. I'm still lookin' so go easy for a minute. Share Share this post on Digg Del.icio.us Technorati Twitter __________________ Athlon XP 2800+ • Asus A7N8X (nVidia Nforce2) • Radeon 9600 Pro 256MB • 2x512MB KVR DDR PC3200 Dual Channel • 120GB Seagate 7200RPM 8MB • 160GB WD 7200RPM 8MB • Liteon DVD±RW DL • AOpen DVD±RW DL • Vantec Ion2 350W PSUSend me your picture for the Member Photo Gallery

08-10-2005, 01:20 PM	#9
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	Add this line to header: border:1px solid #000066; Another coverup but it works in both browsers. EDIT: Delete the bg-spacer image in body, unless you need it. I didn't see it change anything. Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:21 PM	#10
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	Ok Stryker, that works...but of course it brings the W3C images right up under the H3 title...which I dont want...so I used margin:0px, 0px, 5px, 0px; to space the bottom, but that spaced the top as well. Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:24 PM	#12
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	Ok couple more things... a:hover has a different margin specified than the other a:'s, with the 3rd parameter as 5px but the rest are 0px. This is why it's overlaping the border. Also, you should have seperate a:... designations for your menu than the rest of the document (i.e. #menu a:link, etc...). Have a regular set like you have now and set them to regular links, then the #menu a's can be the same as what's there, but it will only apply it to what's in the menu div. Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:24 PM	#13
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	Try padding or margin-bottom:5px. Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:28 PM	#14
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	Ok guys, problems are solved.... But, Stryker, I've never did the links like you mentioned, how exactly do you code that? I tried #menu.a:link ...that didn't work....not sure how to go about this Thanks guys! Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:31 PM	#15
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	No "." between menu and a and it should work: Code: #menu a:link { blah: blah; } #menu a:active { blah: blah; } #menu a:visited { blah: blah; } #menu a:hover { blah: blah; } Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:35 PM	#16
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	works great Stryker. Thanks again dawg, you rock. I'll send ya a check LOL Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:39 PM	#17
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	Not a problem. Any other issues? By the way, FF interprets code exactly as it should (as per W3C standards). IE tents to "assume" things when it probably shouldn't, but it usually compensates for errors in code fairly well. In short... nothing wrong with firefox, it just does what it's supposed to do (which is display the code you type) . Share Share this post on Digg Del.icio.us Technorati Twitter

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

08-10-2005, 01:41 PM	#18
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	LOL...well, IE accepts my errors, so he be cool B-) FF on the other hand has to have everything juussssttt riiigghht...what has become of the world? Perfection? HA! Who needs perfection? My uncles a nuclear engineer, they don't need perfection! ...might be why their factory exploded and kill millions...but, you know, that's another story (This concludes another fictional story by Mysterio2099) Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:45 PM	#19
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	I await "CSS Problem - 4th Edition". Share Share this post on Digg Del.icio.us Technorati Twitter

08-10-2005, 01:54 PM	#20
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	ha, ha, ha...very funny....Although you may see it. HAHAHHAHAA. At the moment, things are running smoothly ...mwuahahahhaa knocks on wood Share Share this post on Digg Del.icio.us Technorati Twitter

Subscribe to THE INSIDER

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter