?
Solved

website design cross browser

Posted on 2011-10-01
4
Medium Priority
?
306 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

752 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