Avatar of Stef Merlijn
Stef MerlijnFlag for Netherlands asked on

Good HTML/CSS editor for creating websites for Firefox AND Internet Explorer

Hi,

Currently I'm using MS Frontpage 2003, the problem with this is that my webpages look good when viewed with InternetExplorer, but very poor when viewed with Firefox. Is there good HTML/CSS editor that will generate HTML/CSS code that can be viewed in both browsers?

Or how can I adjust my current website so it's looking good in both browsers?
Anyone who would like to have a peak: http://www.balanced-plus.nl
See CSS below.

Any help is greatly appreciated.
Stef
#achtergrond {
		border			: 1px solid #000080;
		position			: absolute;
		width			: 800px;
		height			: 1500px; 
		z-index			: 2; 
		left			: 9px; 
		top			: 9px; 
		padding-left		: 4px; 
		padding-right		: 4px; 
		padding-top		: 1px; 
		padding-bottom		: 1px;
		font-family		: Arial, Sans-Serif;
		font-size			: 10.0pt;	
		color			: navy;
}
 
.tdblauw {
		background-color	         : #E8EEF7;
		font-family		: Arial, Sans-Serif;
		font-size			: 10.0pt;	
		color			: navy;
}
 
.tdblauwdonker {
		background-color	         : #6F98C6;
		font-family		: Arial, Sans-Serif;
		font-size			: 10.0pt;	
		color			: white;
}
 
.tdrefblauwdonker {
		background-color	         : #6F98C6;
		font-family		: Arial, Sans-Serif;
		font-size			: 12.0pt;	
		font-weight			: bold;
		color				: white;
		padding				: 2px; 
		padding-left		: 5px; 
}
 
.tdwit {
		border-bottom		: 1px solid navy;
		bgcolor				: white;
		font-family			: Arial, Sans-Serif;
		font-size			: 10.0pt;	
		color				: navy;
}
 
.tdheader {
		background-image	: url('Images/Balanced-Plus%20-%20tabel.png');
		font-family	: Arial, Sans-Serif;
		font-size		: 10.0pt;	
		color		: navy;
}
 
td.tdrijmodule {
		background-color	: #FCDD83;
		padding		: 2px; 
		padding-left	: 5px; 
		font-size		: 12.0pt;	
		color		: navy;
}
 
td.tdrijmoduleklein {
		background-color	: #FCDD83;
		padding		: 2px; 
		padding-left	: 5px; 
		font-size		: 10.0pt;	
		color		: navy;
}
 
td.tdrijmodulebedrag {
		background-color	: #FCDD83;
		padding		: 2px; 
		padding-left	: 5px; 
		padding-right	: 11px; 
		font-size		: 10.0pt;	
		color		: navy;
}
 
td.tdrijbedrag {
		padding		: 2px; 
		padding-left	: 5px; 
		padding-right	: 11px; 
		font-size		: 12.0pt;	
		color		: white;
}
 
td.tdrij2bedrag {
		border-left-width	: 1px;
		border-right-width	: 1px;
		border-top-width	: 1px;
		border-bottom-style	: solid;
		border-bottom-width	: 1px;
		border-color		: #6F98C6;
		padding			: 2px; 
		padding-left		: 5px; 
		padding-right		: 11px; 
		font-size			: 10.0pt;	
		color			: navy;
}
 
td.tdrijmodulecart {
		background-color	: #FCDD83;
		padding			: 2px; 
		font-size			: 10.0pt;	
		color			: navy;
}
 
td.tdrij {
		padding			: 2px; 
		padding-left		: 5px; 
}
		
td.tdrijcart{
		padding			: 2px; 
		border-left-width	: 1px;
		border-right-width	: 1px;
		border-top-width	: 1px;
		border-bottom-style	: solid;
		border-bottom-width	: 1px;
		border-color		: #6F98C6;
}
 
td.tdrij1 {
		background-color	: #6F98C6;
		padding			: 2px; 
		padding-left		: 5px; 
		color			: white;
}
 
td.tdrij2 {
		padding			: 5px; 
		border-left-width	: 1px;
		border-right-width	: 1px;
		border-top-width	: 1px;
		border-bottom-style	: solid;
		border-bottom-width	: 1px;
		border-color		: #6F98C6;
}
 
td.tdrijref {
		padding			: 5px; 
		border-left-width	: 1px;
		border-right-width	: 1px;
		border-top-width	: 1px;
		border-top-style	: solid;
		border-bottom-width	: 1px;
		border-color		: #6F98C6;
		font-style		: italic;
}
 
td.tdrefheader {
		background-color	: #E8EEF7;
		font-family		: Arial, Sans-Serif;
		font-size			: 10.0pt;	
		font-weight		: bold;
		color			: navy;
		padding			: 5px; 
}
 
td.tdrijcheck0 {
		padding			: 1px; 
		padding-left		: 5px; 
		border-left-width	: 1px;
		border-right-width	: 1px;
		border-top-width	: 1px;
		border-bottom-style	: solid;
		border-bottom-width	: 1px;
		border-color		: #6F98C6;
}
 
td.tdrijcheck1 {
		background-color	: #FFEFD5;
		padding			: 1px; 
		padding-left		: 5px; 
		font-family		: Webdings, Sans-Serif;
		font-size			: 10.0pt;	
		font-weight		: bold;
}
 
td.tdrijcheck2 {
		background-color	: #FFFACD;
		padding			: 1px; 
		padding-left		: 5px; 
		font-family		: Webdings, Sans-Serif;
		font-size			: 10.0pt;	
		font-weight		: bold;
}
 
#laagkop {
		position			: absolute; 
		width			: 642px; 
		height			: 70px; 
		z-index			: 1; 
		left			: 156px; 
		top			: 0px;
		padding-top		: 7px; 
		padding-left		: 5px; 
		padding-bottom		: 8px;
}
 
#laagmenu {
		position			: absolute;
		background-color	: #6F98C6;
		background-image	: url('Images/Balanced-Plus%20-%20menu.png');
		width			: 156px;
		height			: 600px;
		z-index			: 2;
		left			: 0px;
		padding-left		: 9px;
		top			: 0px;
}
 
#menu {
		font-family		: Arial, verdana, sans-serif;
		font-size			: 10.0pt;
		width			: 137px;
		padding			: 0;
		margin-bottom		: 1em;
		color			: #333;
}
 
#menu ul {
		list-style		: none;
		margin			: 0;
		padding			: 0;
}
 
#menu ul li {
		margin			: 0;
		margin-bottom		: 0;
}
 
#menu ul li a {
		display			: block;
		border			: 1px solid #369;
		border-top		: 2px solid #369;
		padding			: 2px 2px 2px 4px;
		color			: navy;
		background-color	: white;
		text-decoration		: none;
		width			: 100%;
}
 
#menu ul li a:hover {
		border-left		: 5px solid red;
		border-right		: 1px solid #69c;
		border-bottom		: 1px solid #369;
		color			: red;
		font-style		: italic;
}
 
html>body #menu ul li a {
		width			: auto;
}
 
#submenu {
		width			: 137px;
		margin-bottom		: 4px;
}
 
#submenu ul li {
		margin			: 0;
		margin-left		: 17px;
		margin-bottom		: 0;
}
 
#fotos	{
		position			: absolute;
		top			: 10px;
		left			: 9px;
}
 
#laagonderwerp {
		position			: absolute;
		background-image	: url('Images/Balanced-Plus Onderwerp.png');
		width			: 642px;
		height			: 57px;
		z-index			: 3;
		left			: 156px;
		top			: 75px;
		padding-top		: 17px;
		padding-left		: 70px;
		text-align		: left;
		font-size			: 14.0pt;	
		font-weight		: bold;
		color			: white;
}
 
#laagnews {
		position			: relative;
		width			: 612px;
		height			: 92px;
		z-index			: 1;
		top			: 0px;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;	
}
 
#laagnewsinfo {
		position			: absolute;
		background-color	: #6F98C6;
 		border			: 1px solid #000080;
		width			: 20px;
		height			: 92px;
		z-index			: 1;
		left			: 0px;
		padding-top		: 9px;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;
}
 
#laagnews1 {
		position			: absolute;
 		border			: 1px solid #000080;
		width			: 195px;
		height			: 92px;
		z-index			: 1;
		left			: 21px;
		padding			: 4px;
		padding-top		: 5px;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;
}
 
#laagnews2 {
		position			: absolute;
		border			: 1px solid #000080;
		width			: 195px;
		height			: 92px;
		z-index			: 1;
		left			: 217px;
		padding			: 4px;
		padding-top		: 5px;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;	
}
 
#laagnews3 {
		position			: absolute;
		border			: 1px solid #000080;
		width			: 195px;
		height			: 92px;
		z-index			: 1;
		left			: 413px;
		padding			: 4px;
		padding-top		: 5px;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;	
}
 
#newskop1 {
		background-color	: #ECF1FB;
		font-family		: Tahoma, Arial;
		font-size			: 8.0pt;	
		font-weight		: bold;
		color			: navy;
		margin-bottom		: 4px;
}
 
#newskop {
		font-family		: Tahoma, Arial;
		font-size			: 10.0pt;	
		font-weight		: bold;
		padding-bottom      : 2px;	
		color			: red;
}
 
#laaginhoud {
		position			: absolute;
		width			: 637px;
		height			: 485px;
		z-index			: 4;
		left			: 156px;
		top			: 127px;
		text-align		: left;
		bottom			: 20px; 
		margin			: 0;
		padding			: 16px;
		padding-bottom      : 25px;	
}
 
#AchtergrondBlauw {
		background-color	: #E8EEF7;
}
 
#koptekst	{
		font-size			: 14.0pt;
		font-weight		: bold;
		margin-top		: 35px;
		margin-bottom		: 15px;
}
 
#koptekstvolg	{
		font-size			: 12.0pt;
		font-weight		: bold;
		margin-top		: 30px;
		margin-bottom		: 5px;
}
 
#koptekstvolgklein	{
		font-size			: 10.0pt;
		font-weight		: bold;
		margin-top		: 30px;
		margin-bottom		: 5px;
}
 
#tekstklein	{
		font-size			: 8.0pt;
		margin-top		: 4px;
 		margin-bottom		: 4px;	
}
 
#litekst {
		font-family		: Arial, Sans-Serif;
		font-size			: 11.0pt;	
		color			: navy;
}

Open in new window

HTML

Avatar of undefined
Last Comment
Stef Merlijn

8/22/2022 - Mon
elimesika

ASKER
Stef Merlijn

Thank you for the help, but I had hoped for some more response from others, so I would have more options. I've looked at newgator, but it's just a but to simple. Cuurently I'm rebuilding my webpage with a DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
After that I validated the HTML on: http://validator.w3.org and corrected all HTML-errors.

Now I'm having one problem which has to do with using JavaScript in my webpage. The moment I add any JavaScript, the CSS isn't loaded anymore.

Does anybody have a suggestion?
ASKER
Stef Merlijn

Here is the JavaScript I use. It's used to show a powerpoint-presentation of some screens.
I got it from some scripting site and it worked fine when I didn't had a DOCTYPE.

It's used like this:
<script type="text/javascript">
  //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
  new fadeshow(fadeimages, 590, 455, 1, 3000, 1)
</script>

<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["Images/Balanced-Plus%20-%20scherm0.png", "", ""] //plain image syntax
fadeimages[1]=["Images/Balanced-Plus%20-%20scherm1.png", "", ""] //plain image syntax
fadeimages[2]=["Images/Balanced-Plus%20-%20scherm2.png", "", ""] //plain image syntax
fadeimages[3]=["Images/Balanced-Plus%20-%20scherm3.png", "", ""] //plain image syntax
fadeimages[4]=["Images/Balanced-Plus%20-%20scherm4.png", "", ""] //plain image syntax
fadeimages[5]=["Images/Balanced-Plus%20-%20scherm5.png", "", ""] //plain image syntax
fadeimages[6]=["Images/Balanced-Plus%20-%20scherm6.png", "", ""] //plain image syntax
//fadeimages[1]=["Images/Balancd-Plus%20-%20scherm1.png", "http://www.cssdrive.com", ""] //image with link syntax
//fadeimages[2]=["Images/Balanced-Plus%20-%20web%200010.png", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadebgcolor="white"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
// -->
</script>

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Stef Merlijn

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question