[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

website design cross browser

Hi,

I made a website with frontpage. When I open it in IE it looks ok, however, when i open it in firefox the hyperlinks are not at the correct position. I also would like to know how i can make the links over the whole block. This is my code:


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="Contact%20formulier_files/filelist.xml">
<title>Contactformulier</title>
<script language="JavaScript" src="js/tFader.js"></script>
<!--[if !mso]>
<style>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>

<body bgcolor="#666633">

<p><!--[if gte vml 1]><v:rect id="_x0000_s1025"
 style='position:absolute;left:90pt;top:-1.5pt;width:759.75pt;height:105pt;
 z-index:1' stroked="f">
 <v:imagedata embosscolor="shadow add(51)"/>
 <v:shadow color="black" opacity=".5" offset=",3pt" offset2=",2pt"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:120px;top:-2px;width:1013px;height:140px'><img
width=1013 height=140 src="Contact%20formulier_files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]></p>
<p align="center">&nbsp;</p>
<p align="center"><!--[if gte vml 1]><v:rect
 id="_x0000_s1031" alt="" style='position:absolute;left:849.75pt;top:103.5pt;
 width:95.25pt;height:201.75pt;z-index:2' fillcolor="#884" strokecolor="none"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:2;left:1133px;top:138px;
width:127px;height:269px'><img width=127 height=269
src="Contact%20formulier_files/image002.gif" v:shapes="_x0000_s1031"></span><![endif]></p>
<div style="position: absolute; width: 377px; height: 28px; z-index: 2; left: 496px; top: 24px" id="layer3">
	<font face="Calibri" size="4" color="#009900">uw hoveniersbedrijf voor 
	particuliere en bedrijven..</font></div>
<p align="center"><!--[if gte vml 1]><v:rect
 id="_x0000_s1027" alt="" style='position:absolute;left:124.5pt;top:278.25pt;
 width:685.5pt;height:536.25pt;z-index:3' stroked="f" strokecolor="none">
 <v:shadow color="#1c1c1c" opacity=".5" offset="6pt,6pt"/>
 <v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="96%" id="table1">
	<tr>
		<td align="center">&nbsp;</td>
	</tr>
</table>
 </v:textbox>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:3;left:166px;top:371px;width:918px;height:719px'><img
width=918 height=719 src="Contact%20formulier_files/image003.gif" v:shapes="_x0000_s1027"></span><![endif]><!--[if gte vml 1]><v:rect
 id="_x0000_s1028" alt="" style='position:absolute;left:90pt;top:103.5pt;
 width:759.75pt;height:201.75pt;z-index:-1' stroked="f" strokecolor="none">
 <v:fill src="Contact%20formulier_files/image004.jpg" o:title="IMG_0504"
  size="0,0" aspect="atLeast" origin="-32767f,-32767f" position="-32767f,-32767f"
  recolor="t" rotate="t" type="frame"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:-1;left:120px;top:138px;width:1013px;height:269px'><img
width=1013 height=269 src="Contact%20formulier_files/image005.jpg" v:shapes="_x0000_s1028"></span><![endif]></p>
<div style="position: absolute; width: 1013px; height: 269px; z-index: 2; left: 120px; top: 138px" id="layer18">

<script language="JavaScript">

	// configuration structure
	var A_TPL = {
		// randomize the array each time page loads
		'random' : true,
		// number of transparency changes during the transition
		//	increase for smoother transition, reduce for less CPU usage
		'steps' : 20,
		// transition duration in seconds
		'transtime': .5,
		// slide time in seconds
		'slidetime': 5,
		// width of the slide (optional)
		'width' : 1013,
		// height of the slide (optional)
		'height': 269,
		// alt text for the image (optional)
		'alt' : 'Sample Tigra Fader Slideshow',
		// css class assigned to the slide <img> (optional)
		'css' : 'layer18'
	};

	// list of images to display
	var A_ITEMS = [
		'animatie/Animatie_Standaard/f1.jpg',
		'animatie/Animatie_Standaard/f2.jpg',
		'animatie/Animatie_Standaard/f3.jpg'
	];

	// fader initialization	
	var mySlideShow = new tFader (A_ITEMS, A_TPL);

</script>
</div>
<div style="position: absolute; left: 1028px; top: 78px; width: 56px; height: 55px; z-index: 3; background-color: #009900" id="layer13">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a style="text-decoration: none" href="Contact.htm"><font color="#FFFFFF">Contact</font></a></font></div>
<div style="position: absolute; left: 955px; top: 78px; width: 67px; height: 55px; z-index: 3; background-color: #888844" id="layer12">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a href="Projecten.htm" style="text-decoration: none"><font color="#FFFFFF">Projecten</font></a></font></div>
<div style="position: absolute; left: 903px; top: 78px; width: 46px; height: 55px; z-index: 3; background-color: #888844" id="layer11">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a href="Advies.htm" style="text-decoration: none"><font color="#FFFFFF">Advies</font></a></font></div>
<div style="position: absolute; left: 820px; top: 78px; width: 77px; height: 55px; z-index: 3; background-color: #888844" id="layer9">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a href="Onderhoud.htm" style="text-decoration: none"><font color="#FFFFFF">Onderhoud</font></a></font></div>
<div style="position: absolute; left: 697px; top: 78px; width: 61px; height: 55px; z-index: 3; background-color: #888844" id="layer10">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a href="Ontwerp.htm" style="text-decoration: none"><font color="#FFFFFF">Ontwerp</font></a></font></div>
<div style="position: absolute; left: 764px; top: 78px; width: 50px; height: 55px; z-index: 3; background-color: #888844" id="layer8">
	<p align="center">&nbsp;</p>
	<p align="center"><font face="Calibri" color="#FFFFFF">
	<a href="Aanleg.htm" style="text-decoration: none"><font color="#FFFFFF">Aanleg</font></a></font></div>
<div style="position: absolute; left: 547px; top: 78px; width: 144px; height: 55px; z-index: 3; background-color: #888844" id="layer7">
	<p align="center">&nbsp;</p>
	<p align="center">
	<a style="text-decoration: none" href="Hoveniersbedrijfstef.htm">
	<font face="Calibri" color="#FFFFFF">Hoveniersbedrijf Stef</font></a></div>
<div style="position: absolute; left: 495px; top: 78px; width: 46px; height: 55px; z-index: 3; background-color: #888844;" id="layer6" >
	<p align="center">&nbsp;</p>
	<p align="center"><a style="text-decoration: none;" href="Index.htm"><font face="Calibri" color="#FFFFFF">Home</font></a></div>
<p align="center"><!--[if gte vml 1]><v:rect
 id="_x0000_s1029" alt="" style='position:absolute;left:-5.25pt;top:103.5pt;
 width:95.25pt;height:201.75pt;z-index:2' fillcolor="#884" strokecolor="none"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:2;left:-7px;top:138px;
width:127px;height:269px'><img width=127 height=269
src="Contact%20formulier_files/image002.gif" v:shapes="_x0000_s1029"></span><![endif]></p>
<div style="position: absolute; top: -1px; left: 159px; width: 300px; height: 157px; z-index: 8">
<p align="center">
<a href="Index.htm">
<img border="0" src="LOGO%20Hoveniersbedrijf%20Stef.bmp" width="277" height="138"></a></p>
</div>

<div style="position: absolute; left: 167px; top: 1095px; width: 913px; height: 24px; z-index: 6" id="layer16" align="center">
	<font face="Calibri" color="#FFFFFF" size="2">© Hoveniersbedrijf Stef&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	|&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="../../Algemene%20voorwaarden/Algemene%20voorwaarden%20Hoveniersbedrijf%20Stef.pdf"><font color="#FFFFFF"> Algemene voorwaarden</font></a> &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp; 
	<a href="Disclaimer.htm"><font color="#FFFFFF">Disclaimer</font></a>&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp; 
	<a href="Contact.htm"><font color="#FFFFFF">Contact&nbsp;</font></a>&nbsp;&nbsp;&nbsp; </font></div>

<p><!--[if gte vml 1]><v:rect
 id="_x0000_s1030" alt="" style='position:absolute;left:124.5pt;top:278.25pt;
 width:161.25pt;height:543pt;z-index:4' fillcolor="#884" stroked="f"
 strokecolor="none"/><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:4;left:166px;top:371px;width:215px;height:724px'><img
width=215 height=724 src="Contact%20formulier_files/image006.gif" v:shapes="_x0000_s1030"></span><![endif]></p>
<div style="position: absolute; width: 671px; height: 682px; z-index: 10; left: 394px; top: 382px" id="layer19">
	<p:colorscheme
 colors="#ffffff,#000000,#808080,#000000,#bbe0e3,#333399,#009999,#99cc00"/>

	<div v:shape="_x0000_s1026" class="O">
		<div style="mso-char-wrap: 1; mso-kinsoku-overflow: 1">
			<font face="Calibri" color="#666633" size="5">
			<span style="mso-bidi-font-family: Arial">Contactformulier</span></font></div>
		<div style="mso-char-wrap: 1; mso-kinsoku-overflow: 1">
			<font face="Calibri" color="#666633">
			<span style="mso-bidi-font-family: Arial">&nbsp; </span></font>
			<p><font face="Calibri" color="#666633">Via dit onderstaand contact 
			formulier kunt u direct contact opnemen met Hoveniersbedrijf Stef.</font></p>
			<p>&nbsp;</div>
		<div style="mso-line-spacing: 100 50 0; mso-char-wrap: 1; mso-kinsoku-overflow: 1">
			<form method="POST" name="Contactformulier" action="--WEBBOT-SELF--">
				<!--webbot bot="SaveResults" U-File="G:\Hoveniersbedrijf Stef\Website\Website\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" S-Email-Address="info@hoveniersbedrijfstef.nl" S-Email-Format="TEXT/PRE" -->
				<p><font color="#666633" face="Calibri">Naam:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
				* <input type="password" name="T1" size="50"></font></p>
				<p><font face="Calibri" color="#666633">Adres:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="T5" size="50"></font></p>
				<p><font face="Calibri" color="#666633">Postcode:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="T2" size="6"><input type="text" name="T6" size="3"> 
				Woonplaats: <input type="text" name="T7" size="26"></font></p>
				<p><font face="Calibri" color="#666633">Telefoonnr.:&nbsp;&nbsp; 
				* <input type="text" name="T3" size="24">
				<input type="text" name="T8" size="24"></font></p>
				<p><font face="Calibri" color="#666633">Emailadres:&nbsp;&nbsp; 
				* <input type="text" name="T4" size="50"></font></p>
				<p><font face="Calibri" color="#666633">Bericht:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</font>&nbsp;&nbsp; <textarea rows="9" name="S1" cols="42"></textarea><font face="Calibri" color="#666633">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</font><font face="Calibri" color="#666633">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</font></p>
				<p>&nbsp;</p>
				<p><font color="#666633" size="3" face="Calibri">
				<input type="button" value="Verzenden" name="B1"></font></p>
			</form>
		</div>
	</div>
	<p>&nbsp;</p>
	<p>&nbsp;</div>
<div style="position: absolute; width: 193px; height: 502px; z-index: 9; left: 176px; top: 380px" id="layer18">
	<font face="Calibri" color="#FFFFFF" size="5">
	<a href="Contact.htm" style="text-decoration: none"><font color="#FFFFFF">Contact</font></a></font><p>
	<font face="Calibri" color="#FFFFFF">Contactformulier</font></p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</div>

</body>

</html>

Open in new window

screen1.jpg
screen2.jpg
0
bartvd
Asked:
bartvd
  • 2
1 Solution
 
EyalCommented:
using frontpage to build cross browser sites is very bad practice.
it generates microsoft standard and this one probbaly won't work in all browsers

regarding your second question, add a{color:black} to the style tag
0
 
Dave BaldwinFixer of ProblemsCommented:
I agree, the first step is to get rid of FrontPage.  It isn't even supported by Microsoft anymore.  Their current product is Expression Web 4 and I don't know that it is a good idea either.  The premium product is Adobe Creative Suite with Dreamweaver but that's pretty expensive.

What are you goals?  Are you just doing one site or will you be doing more?
0
 
bartvdAuthor Commented:
No, a friend of mine made this site with FrontPage, he asked me to help him, but he already made his site in frontpage.
Does anyone have an idea if I can make the link clickable in the whole block instead of just on the link?
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't know about making the whole block clickable but the change below will put the links in the middle of the block in both IE and Firefox.  It replaces the <p>s with a <div>.
// original
<div style="position: absolute; left: 547px; top: 78px; width: 144px; height: 55px; z-index: 3; background-color: #888844" id="layer7">
	<p align="center">&nbsp;</p>
	<p align="center">
	<a style="text-decoration: none" href="Hoveniersbedrijfstef.htm">
	<font face="Calibri" color="#FFFFFF">Hoveniersbedrijf Stef</font></a></div>
// modified
<div style="position: absolute; left: 547px; top: 78px; width: 144px; height: 55px; z-index: 3; background-color: #888844" id="layer7">
	<div align="center">&nbsp;<br>
	<a style="text-decoration: none" href="Hoveniersbedrijfstef.htm">
	<font face="Calibri" color="#FFFFFF">Hoveniersbedrijf Stef</font></a></div></div>

Open in new window

0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now