[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

website design cross browser

Posted on 2011-10-01
4
Medium Priority
?
310 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 84

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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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).
Suggested Courses

864 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