CSS trouble with body style tag

aaronmcgowan · 30-Nov-2005, 12:34 PM #1

Greetings,

Ok. Im creating a website template and I am having some problems. Here is my problem:

- In my CSS I have stated for a image to span across the top only. In IE it works fine, but then in Mozilla FireFox it doesnt work at all. When I add the 'style' code to the only the body tag in the HTML file, it works fine in IE again but it doubles it up in FireFox. What I mean is that it spans across the top then across the bottom again.

Here is the code in my HTML:

Code:

</head>
<body onLoad="MM_preloadImages('images/m1r.jpg','images/m2r.jpg','images/m3r.jpg','images/m4r.jpg','images/m5r.jpg','images/m6r.jpg')">
<div id="wrap">

Here is the code in my CSS file:

Code:

body {
background:url(images/bg.jpg) repeat-x top color:#ffffff;
color:#4F4F4F;
font-family:tahoma;
font-size:11px;
padding:0;
margin:0;
line-height:14px;
text-align:center;
}

Also, I have provided an image of what it looks like or suppose to look like in all browsers using only IE. I want it to look the same with FireFox also. Now, does anyone know why it is not working properly?

ptvGuy · 30-Nov-2005, 07:44 PM #2

Not sure if this will fix the problem, but the following variation of your CSS is more cross-browser friendly:

Code:

body 
{
background-image: url("/images/bg.jpg");
background-repeat: repeat-x;
background-position: top;
background-color: #FFFFFF;
color: #4F4F4F;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0;
margin: 0;
line-height: 14px;
text-align: center;
}

aaronmcgowan · 30-Nov-2005, 10:00 PM #3

Hey,

Thanks! I will try it right away

aaronmcgowan · 30-Nov-2005, 10:21 PM #4

Hey,

Nope it still did not work...

ptvGuy · 07-Dec-2005, 08:20 PM #5

I've tried your code and can't seem to duplicate your problem. I'm assuming that the image you're trying to span across the top of the page is that gradient I see in the background of your screen shot.

I opened that screen shot in a graphics editor, cut a slice of the gradient (156px high by 2px wide) and used it as the background image (bg.jpg). I eliminated the part of your code that preloads the other images as well as your "wrap" DIV and just put some test text in the body. Then I opened it in both IE and Firefox, and it worked fine.

Code:

body 
{
background-image: url("/images/bg.jpg");
background-repeat: repeat-x;
background-position: top;
background-color: #FFFFFF;
color: #4F4F4F;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0;
margin: 0;
line-height: 14px;
text-align: center;
}

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" media="screen"> </head> <body>
test
</body> </html>

The only problem that I'm seeing from my test is that the test text appears in the gradient, but I would have to guess that your "wrap" DIV takes care of that and pads it downward somehow. BTW, put quotes inside the parenthesis around the path and filename of your background image.

aaronmcgowan · 08-Dec-2005, 12:43 PM #6

Greetings,

Thanks ptvGuy! That worked amazingly!!!

Now, Im also having another problem now. Im currently working on a new project, with PHP, and such. Anyways, my problem still lies within the template files causing a mass screw up in the mouse over buttons. Now, instead of using 1 template / HTML file for the whole page, Im using an overall_header, overall_footer, and also an index_body page. But what I mean is that the header and the footer will be called from the PHP files, so that I do not have to edit the headers or footers in every file everytime I edit 1 thing. So, I have am having some problems with my mouseover buttons. But this problem only occurs in Internet Explorer. And works fine in other browsers.

See the image for what I mean:

Here is my overall_header.tpl file code:

Code:

<html >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>The Tech Base :: PC, Programming and Design Support</title>
	<link href="templates/style.css" rel="stylesheet" type="text/css">
	<script language="JavaScript" type="text/JavaScript">
	<!--
	function MM_swapImgRestore() { //v3.0
	 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
	}

	function MM_preloadImages() { //v3.0
	 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	}

	function MM_findObj(n, d) { //v4.01
	 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
		d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
		if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
		for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
		if(!x && d.getElementById) x=d.getElementById(n); return x;
	}

	function MM_swapImage() { //v3.0
	 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
		if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
	}
	//-->
</script>
</head>

<body onLoad="MM_preloadImages('templates/images/m1r.jpg','templates/images/m2r.jpg','templates/images/m3r.jpg','templates/images/m4r.jpg','templates/images/m5r.jpg','templates/images/m6r.jpg')">
<div id="wrap">
	<div id="top">
		<img src="templates/images/spacer.gif" height="38" width="1"><br>
		<img src="templates/images/spacer.gif" width="25" height="1" align="absmiddle">
		<img src="templates/images/logo.jpg" align="absmiddle">
		<img src="templates/images/spacer.gif" width="333" height="1">
		<a href="./index.php"><img src="templates/images/s1.jpg" border="0" align="absmiddle"></a>
		<img src="templates/images/spacer.gif" width="8" height="1"><a href="#"><img src="templates/images/s2.jpg" border="0" align="absmiddle"></a>
		<img src="templates/images/spacer.gif" width="8" height="1"><a href="#"><img src="templates/images/s3.jpg" border="0" align="absmiddle"></a><br>
		<img src="templates/images/spacer.gif" width="1" height="11"><br>
		<a href="./index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image49','','templates/images/m1r.jpg',1)"><img src="templates/images/m1.jpg" name="Image49" width="116" height="54" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image50','','templates/images/m2r.jpg',1)"><img src="templates/images/m2.jpg" name="Image50" width="111" height="54" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image51','','templates/images/m3r.jpg',1)"><img src="templates/images/m3.jpg" name="Image51" width="111" height="54" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image52','','templates/images/m4r.jpg',1)"><img src="templates/images/m4.jpg" name="Image52" width="111" height="54" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image53','','templates/images/m5r.jpg',1)"><img src="templates/images/m5.jpg" name="Image53" width="112" height="54" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image54','','templates/images/m6r.jpg',1)"><img src="templates/images/m6.jpg" name="Image54" width="115" height="54" border="0"></a>
		<br>
	</div>
	<div id="top_txt">
		<img src="templates/images/spacer.gif" width="1" height="8"><br>
		<img src="templates/images/spacer.gif" width="19" height="1">
		<a href="#" class="top">www.thetechbase.com</a>
		<img src="templates/images/spacer.gif" width="295" height="1">
		<span class="top">Current Date: December 05, 2005</span>
	</div>

And here is the CSS code for the DIV top where the mouseover images are located:

Code:

#top {margin:0px auto 0px auto;
width:676px;
height:156px;
text-align:left;
display:table;
padding:0px;
}

Can you please help me ASAP!!! Thanks!

ptvGuy · 09-Dec-2005, 02:48 AM #7

Okay, I'm seeing a lot of spots where SRCs and HREFs are referring to "templates/images/..." which is a relative link to wherever your include ends up.

The thing to remember with includes (whether it's standard SSI, PHP, ASP or whatever method you use) is that your included file is normally stored in a different directory than the file it will be included in. You might put the same header on a page in the root directory, a page in a subdirectory under that, and even a page in the subdirectory below that one. The same relative link can't work from all of them unless you do something to identify it as 'relative from the root directory.' The best way to accomplish that is to place a forward slash at the beginning of every link to identify it as starting from the root directory.

Therefore, if the "templates" subdirectory is right below the root directory, you'd replace every reference to it with "/templates/..." So, the following link:
"templates/images/m6r.jpg"
would become:
"/templates/images/m6r.jpg"
Give it a try, and let me know if that fixes it.

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)