Hi,
I'm working on Windows XP with favourite browser Firefox 3 and CC HTML editor build 242, released 2008. Loving the software. However, I feel that maybe I've shot myself in the foot by switching too much between the code and visual editor screens as I now have a messy test site where my images are either completely or a couple of millimetres off their locations, depending on the browser. I've tested it on 50 or so browsers using browsershots.
I've been searching these forums for browser compatibility advice and have found a couple of pointers but I wonder whether anyone would be kind enough to take a look at my site and give me any suggestions as to why my header and images aren't displaying correctly in FF 2, 3, IE and Safari? The funny thing is that on one of my 3 computers (XP/Firefox 3) the site shows exactly how it should (see pdf screenshot at http://www.axis-language-services.com/e … teview.pdf ); on the others (Vista/Firefox 3; XP/Firefox 3) it is completely out of alignment.
The test site is http://www.axis-language-services.com/e … index.html . Incidentally, my preview tab in the HTML Editor is a mish-mash of text over lines, the header sticks out to the right, etc.
I'd be so grateful if anyone has any ideas on how I can get my header, menu and other icons stuck firmly where they need to be. I'll try posting the relevant bit of the code below.
Many thanks! Amy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>eggplant translations - marketing translations in English, French and Italian</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body><!-- Master Container: Centered and 700px wide --><img style="Z-INDEX: 101; POSITION: absolute" height="15" alt="click to open your e-mail client" src="http://www.eggplant-translations.com/eggplant/email.gif" width="19">
<div id="container"><!-- Site Top Header -->
<div id="topheader" style="WIDTH: 697px; HEIGHT: 91px">� <a href="http://www.eggplant-translations.com/index.html" target="eggplant translations home page"><img style="Z-INDEX: 102; LEFT: 153px; POSITION: absolute; TOP: 0px" height="90" alt="eggplant translations home page" src="http://www.axis-language-services.com/eggplant/images/title.jpg" width="700" border="0"></a>
</div><!-- Site navigation buttons -->
<div id="navcontainer"><a href="http://www.eggplant-translations.com/services.html">
<div class="navitem"><a href="http://www.eggplant-translations.com/services.html" target="http://www.eggplant-translations.com/services.html"><a title="link to services page" href="http://www.eggplant-translations.com/services.html"><a href="http://www.eggplant-translations.com/services.html"><a href="http://www.eggplant-translations.com/services.html" target="_top">services</a><a href="http://www.eggplant-translations.com/services.html" target="_top"></a></a><a href="#"></a></a><a href="#"></a></a></div></a><a href="http://www.eggplant-translations.com/rates.html">
<div class="navitem"><a href="http://www.eggplant-translations.com/rates.html"><a href="http://www.eggplant-translations.com/rates.html" target="_top">rates</a><a href="#"></a></a></div></a><a href="">
<div class="navitem"><a href="http://www.eggplant-translations.com/quote.html"><a href="http://www.eggplant-translations.com/quote.html" target="_top">free
quotation</a><a href="#"> </a></a></div></a><a href="http://www.eggplant-translations.com/about.html">
<div class="navitem"><a href="http://www.eggplant-translations.com/about.html"><a href="http://www.eggplant-translations.com/about.html">about</a><a href="#"></a></a></div></a>
</div><!-- End of Site Navigation Buttons --><!-- Main content container --><a href="http://www.eggplant-translations.com/contact.html">
<div class="navitemlast"><a href="http://www.eggplant-translations.com/contact.html"><a href="http://www.eggplant-translations.com/contact.html" target="_top">contact
us</a><a href="#"> </a></a></div></a><a href="mailto:info@eggplant-translations.com?subject=enquiry from your website"><img style="Z-INDEX: 103; LEFT: 802px; POSITION: absolute; TOP: 118px" height="15" alt="" src="http://www.axis-language-services.com/eggplant/email.gif" width="19" align="bottom"></a><!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:eggplant-translations?call"><img src="http://mystatus.skype.com/smallicon/eggplant-translations" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; Z-INDEX: 104; LEFT: 783px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 117px" width="16" height="16" alt="My status"></a>
<div id="main"><!-- The sidebar for news etc -->
<div id="sidebar" style="WIDTH: 197px; HEIGHT: 387px">
<p align="right">
<span class="headertext2"><img style="Z-INDEX: 105; LEFT: 654px; POSITION: absolute; TOP: 142px" height="19" alt="" src="http://www.axis-language-services.com/eggplant/minieggplant.jpg" width="20" border="0">eggplant
translations</span>�
<br>
call� 0800 756 5388 (from
UK)<br>+44 (0)798 335 9069 (not in
UK)<br><a href="mailto:info@eggplant-translations.com?subject=enquiry from your website"><font color="#ff80c0">info@eggplant-translations.com</font></a><br>
� skype: eggplant-translations
<br>
<span class="headertext2"><br>office hours
(GMT+1)</span>
HTML editor build 242: browser...
amy
Trial User
2 posts
Cary
Ambassador
1,073 posts
When your page doesn't look right, first make sure the markup for the html isn't part of the problem by using a validator:
http://validator.w3.org/check?verbose=1 … index.html
In the case of your page, simply fixing the markup errors doesn't completely help because there are styling errors as well. The code below fixes both.
I changed your doctype to html 4.01 transitional because you don't gain anything by using xhtml (which the wysiwyg mode messes up even more than regular html) and you are trying to use code which shouldn't be used with strict pages.
The main cause of your problems is the use of absolutely positioned elements which aren't contained in relatively positioned parent elements, so they don't move with the rest of the page. I would recommend that you don't use this code with the visual editor.
HTML:
CSS:
http://validator.w3.org/check?verbose=1 … index.html
In the case of your page, simply fixing the markup errors doesn't completely help because there are styling errors as well. The code below fixes both.
I changed your doctype to html 4.01 transitional because you don't gain anything by using xhtml (which the wysiwyg mode messes up even more than regular html) and you are trying to use code which shouldn't be used with strict pages.
The main cause of your problems is the use of absolutely positioned elements which aren't contained in relatively positioned parent elements, so they don't move with the rest of the page. I would recommend that you don't use this code with the visual editor.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>eggplant translations - marketing translations in English, French and Italian</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">
<!-- Site Top Header -->
<div id="topheader" style="WIDTH: 698px; HEIGHT: 90px"><a href="http://www.eggplant-translations.com/index.html" title="eggplant translations home page"><img height="90" alt="eggplant translations home page" src="http://www.axis-language-services.com/eggplant/images/title.jpg" width="698" border="0"></a></div>
<!-- Site navigation buttons -->
<div id="navcontainer">
<div class="navitem"><a href="http://www.eggplant-translations.com/services.html" target="_top" title="link to services page">services</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/rates.html" target="_top">rates</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/quote.html" target="_top">free quotation</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/about.html" target="_top">about</a></div>
<div class="navitemlast"><a href="http://www.eggplant-translations.com/contact.html" target="_top">contact us</a></div>
</div>
<!-- End of Site Navigation Buttons -->
<!-- Main content container -->
<a style="Z-INDEX: 103; LEFT: 641px; POSITION: absolute; TOP: 117px" href="mailto:info@eggplant-translations.com?subject=enquiry from your website"><img height="15" alt="" src="http://www.axis-language-services.com/eggplant/email.gif" width="19" align="bottom" border="0"></a>
<!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a style="Z-INDEX: 104; LEFT: 618px; border: none; POSITION: absolute; TOP: 116px" href="skype:eggplant-translations?call"><img src="http://mystatus.skype.com/smallicon/eggplant-translations" width="16" height="16" alt="My status" border="0"></a>
<div id="main">
<!-- The sidebar for news etc -->
<div id="sidebar" style="WIDTH: 197px; HEIGHT: 387px">
<p align="right"> <span class="headertext2"><img style="Z-INDEX: 105; LEFT: 500px; POSITION: absolute; TOP: 142px" height="19" alt="" src="http://www.axis-language-services.com/eggplant/minieggplant.jpg" width="20" border="0">eggplant
translations</span> <br>
call 0800 756 5388 (from
UK)<br>
+44 (0)798 335 9069 (not in
UK)<br>
<a style="color:#ff80c0" href="mailto:info@eggplant-translations.com?subject=enquiry from your website">info@eggplant-translations.com</a><br>
skype: eggplant-translations <br>
<span class="headertext2"><br>
office hours
(GMT+1)</span> <br>
Mon-Fri 0900-1730<br>
Sat/Sun
closed<br>
<br>
Confused? <a href="http://www.eggplant-translations.com/faq.pdf" target="_blank" style="color:#ff80c0">Check out our FAQ</a><br>
(opens in .pdf)</p>
<p align="center"><img height="72" alt="payroll giving silver logo" src="http://www.axis-language-services.com/eggplant/Silver_08.jpg" width="145" align="middle" border="0"> </p>
<p align="center"> <img height="35" alt="credit card logos" src="ccs.gif" width="178" border="0"><br>
best viewed
in Mozilla Firefox</p>
</div>
<!-- End of Sidebar -->
<br>
<h1> </h1>
<p><br>
<strong><br>
eggplant
translations</strong> is a new breed of
translation company offering specialist marketing translations to corporate
clients and individuals in English, French, Italian and other major European
languages.<br>
<br>
We work with you from your first quote to final delivery of
your project <span style="color:#ff80c0; FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">–</span> and beyond <span style="color:#ff80c0; FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">–</span> to give you first-class results at a price
you can afford.<br>
<br>
Forget literal translations. Forget
mistranslations. At <strong>eggplant translations</strong> we've
spent six years helping our clients sell themselves and their products to
the world. In the tough world of advertising, second best simply isn't good
enough. So why compromise on your translations? Contact us today for a free,
no-obligation quotation. <br>
<br>
With a little help from us, your words will sell themselves. </p>
<br>
<br>
<div id="footer" style="WIDTH: 686px; HEIGHT: 64px"> (c) Copyright 2008 eggplant
translations. eggplant translations is a trading name of Axis Language Services
Ltd<br>
Registered office: 25 Victoria Road, Waltham Abbey EN9
1HH, UK Company no. 05607654 VAT no. GB 876 9980 37<br>
<a href="http://www.eggplant-translations.com/legal.pdf" target="_blank" title="eggplant translations legal info">Click for legal info (opens in .pdf)</a> </div>
</div>
<!-- End of main container -->
<!-- Footer -->
<!-- End of footer -->
<img style="Z-INDEX: 100; LEFT: 7px; POSITION: absolute; TOP: 137px" height="50" alt="eggplant - where your words sell themselves" src="http://www.axis-language-services.com/eggplant/dictionary.jpg" width="400" border="0"></div>
<!-- End of master container -->
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>eggplant translations - marketing translations in English, French and Italian</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">
<!-- Site Top Header -->
<div id="topheader" style="WIDTH: 698px; HEIGHT: 90px"><a href="http://www.eggplant-translations.com/index.html" title="eggplant translations home page"><img height="90" alt="eggplant translations home page" src="http://www.axis-language-services.com/eggplant/images/title.jpg" width="698" border="0"></a></div>
<!-- Site navigation buttons -->
<div id="navcontainer">
<div class="navitem"><a href="http://www.eggplant-translations.com/services.html" target="_top" title="link to services page">services</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/rates.html" target="_top">rates</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/quote.html" target="_top">free quotation</a></div>
<div class="navitem"><a href="http://www.eggplant-translations.com/about.html" target="_top">about</a></div>
<div class="navitemlast"><a href="http://www.eggplant-translations.com/contact.html" target="_top">contact us</a></div>
</div>
<!-- End of Site Navigation Buttons -->
<!-- Main content container -->
<a style="Z-INDEX: 103; LEFT: 641px; POSITION: absolute; TOP: 117px" href="mailto:info@eggplant-translations.com?subject=enquiry from your website"><img height="15" alt="" src="http://www.axis-language-services.com/eggplant/email.gif" width="19" align="bottom" border="0"></a>
<!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a style="Z-INDEX: 104; LEFT: 618px; border: none; POSITION: absolute; TOP: 116px" href="skype:eggplant-translations?call"><img src="http://mystatus.skype.com/smallicon/eggplant-translations" width="16" height="16" alt="My status" border="0"></a>
<div id="main">
<!-- The sidebar for news etc -->
<div id="sidebar" style="WIDTH: 197px; HEIGHT: 387px">
<p align="right"> <span class="headertext2"><img style="Z-INDEX: 105; LEFT: 500px; POSITION: absolute; TOP: 142px" height="19" alt="" src="http://www.axis-language-services.com/eggplant/minieggplant.jpg" width="20" border="0">eggplant
translations</span> <br>
call 0800 756 5388 (from
UK)<br>
+44 (0)798 335 9069 (not in
UK)<br>
<a style="color:#ff80c0" href="mailto:info@eggplant-translations.com?subject=enquiry from your website">info@eggplant-translations.com</a><br>
skype: eggplant-translations <br>
<span class="headertext2"><br>
office hours
(GMT+1)</span> <br>
Mon-Fri 0900-1730<br>
Sat/Sun
closed<br>
<br>
Confused? <a href="http://www.eggplant-translations.com/faq.pdf" target="_blank" style="color:#ff80c0">Check out our FAQ</a><br>
(opens in .pdf)</p>
<p align="center"><img height="72" alt="payroll giving silver logo" src="http://www.axis-language-services.com/eggplant/Silver_08.jpg" width="145" align="middle" border="0"> </p>
<p align="center"> <img height="35" alt="credit card logos" src="ccs.gif" width="178" border="0"><br>
best viewed
in Mozilla Firefox</p>
</div>
<!-- End of Sidebar -->
<br>
<h1> </h1>
<p><br>
<strong><br>
eggplant
translations</strong> is a new breed of
translation company offering specialist marketing translations to corporate
clients and individuals in English, French, Italian and other major European
languages.<br>
<br>
We work with you from your first quote to final delivery of
your project <span style="color:#ff80c0; FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">–</span> and beyond <span style="color:#ff80c0; FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">–</span> to give you first-class results at a price
you can afford.<br>
<br>
Forget literal translations. Forget
mistranslations. At <strong>eggplant translations</strong> we've
spent six years helping our clients sell themselves and their products to
the world. In the tough world of advertising, second best simply isn't good
enough. So why compromise on your translations? Contact us today for a free,
no-obligation quotation. <br>
<br>
With a little help from us, your words will sell themselves. </p>
<br>
<br>
<div id="footer" style="WIDTH: 686px; HEIGHT: 64px"> (c) Copyright 2008 eggplant
translations. eggplant translations is a trading name of Axis Language Services
Ltd<br>
Registered office: 25 Victoria Road, Waltham Abbey EN9
1HH, UK Company no. 05607654 VAT no. GB 876 9980 37<br>
<a href="http://www.eggplant-translations.com/legal.pdf" target="_blank" title="eggplant translations legal info">Click for legal info (opens in .pdf)</a> </div>
</div>
<!-- End of main container -->
<!-- Footer -->
<!-- End of footer -->
<img style="Z-INDEX: 100; LEFT: 7px; POSITION: absolute; TOP: 137px" height="50" alt="eggplant - where your words sell themselves" src="http://www.axis-language-services.com/eggplant/dictionary.jpg" width="400" border="0"></div>
<!-- End of master container -->
</body>
</html>
CSS:
body
{
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
background: #f4f4f4 url(images/bg.gif) center repeat-y;
text-align: center;
}
a {text-decoration: none; color: #fff;}
a:hover {text-decoration: underline; color: #fff;}
#container
{
width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: left;
}
#topheader
{
background-color: #A374A3;
height: 90px;
}
#title
{
font-size: 24px;
color: #fff;
font-family: verdana;
margin: 5px;
}
#navcontainer
{
background-color: #ccc;
}
.navitem
{
background-color: #89007E;
padding: 5px;
text-decoration:none;
font-weight:bold;
text-align:center;
color: #fff;
width: 129px;
margin-top:1px;
margin-right:1px;
float:left;
}
.navitemlast
{
background-color: #89007E;
padding: 5px;
text-decoration:none;
font-weight:bold;
text-align:center;
color: #fff;
width: 130px;
margin-top:1px;
margin-right:0px;
float:left;
}
#main
{
padding:5px;
width: 688px;
text-align:justify;
color:#A82283;
line-height: 1.6em;
}
#sidebar
{
width:197px;
border:1px solid #DC89BF;
float:right;
margin-top:20px;
margin-right: 0px;
margin-left: 10px;
padding: 3px;
text-align:left;
clear:both;
}
h1
{
font-size:20px;
font-weight:bold;
padding-top: 5px;
}
.headertext1
{
font-size:18px;
font-weight:bold;
}
.headertext2
{
font-size:10px;
font-weight:bold;
}
#footer
{
background-color:#89007E;
color: #fff;
text-align:center;
vertical-align:middle;
height: 20px;
padding-top:5px;
clear:both;
}
img
{
border: 1px solid #fff;
}
{
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
background: #f4f4f4 url(images/bg.gif) center repeat-y;
text-align: center;
}
a {text-decoration: none; color: #fff;}
a:hover {text-decoration: underline; color: #fff;}
#container
{
width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: left;
}
#topheader
{
background-color: #A374A3;
height: 90px;
}
#title
{
font-size: 24px;
color: #fff;
font-family: verdana;
margin: 5px;
}
#navcontainer
{
background-color: #ccc;
}
.navitem
{
background-color: #89007E;
padding: 5px;
text-decoration:none;
font-weight:bold;
text-align:center;
color: #fff;
width: 129px;
margin-top:1px;
margin-right:1px;
float:left;
}
.navitemlast
{
background-color: #89007E;
padding: 5px;
text-decoration:none;
font-weight:bold;
text-align:center;
color: #fff;
width: 130px;
margin-top:1px;
margin-right:0px;
float:left;
}
#main
{
padding:5px;
width: 688px;
text-align:justify;
color:#A82283;
line-height: 1.6em;
}
#sidebar
{
width:197px;
border:1px solid #DC89BF;
float:right;
margin-top:20px;
margin-right: 0px;
margin-left: 10px;
padding: 3px;
text-align:left;
clear:both;
}
h1
{
font-size:20px;
font-weight:bold;
padding-top: 5px;
}
.headertext1
{
font-size:18px;
font-weight:bold;
}
.headertext2
{
font-size:10px;
font-weight:bold;
}
#footer
{
background-color:#89007E;
color: #fff;
text-align:center;
vertical-align:middle;
height: 20px;
padding-top:5px;
clear:both;
}
img
{
border: 1px solid #fff;
}
amy
Trial User
2 posts
Hi Cary,
You are a genius! Thank you so much for your time and for giving me the code. The site looks great now. Thanks also for explaining the problem in a way I could understand.
Much appreciated,
Amy
You are a genius! Thank you so much for your time and for giving me the code. The site looks great now. Thanks also for explaining the problem in a way I could understand.
Much appreciated,
Amy
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
