Solved

website design cross browser

Posted on 2011-10-01
4
304 Views
Last Modified: 2012-05-12
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
Comment
Question by:bartvd
  • 2
4 Comments
 
LVL 15

Expert Comment

by:Eyal
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
0
 
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?
0
 
LVL 6

Author Comment

by:bartvd
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?
0
 
LVL 83

Accepted Solution

by:
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

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 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