website design cross browser

Posted on 2011-10-01
Last Modified: 2012-05-12

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="">

<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">
<script language="JavaScript" src="js/tFader.js"></script>
<!--[if !mso]>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>

<body bgcolor="#666633">

<p><!--[if gte vml 1]><v:rect id="_x0000_s1025"
 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:
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
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"/>
<table cellspacing="0" cellpadding="0" width="100%" height="96%" id="table1">
		<td align="center">&nbsp;</td>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
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:
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 = [

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

<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
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 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;
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">

	<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>
		<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="" 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;
				<p><font color="#666633" size="3" face="Calibri">
				<input type="button" value="Verzenden" name="B1"></font></p>
<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>



Open in new window

Question by:bartvd
  • 2
LVL 15

Expert Comment

ID: 36897627
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
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36898028
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?

Author Comment

ID: 36899051
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?
LVL 83

Accepted Solution

Dave Baldwin earned 500 total points
ID: 36899072
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


Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now