HTML Code problem with IE vs Firefox

cake126 · 10-12-2008 11:17pm #1

Hi folks,

I have been asked to code up a site and have run into a problem. I have been using Microsoft FrontPage to do the coding and firefox to check my progress. Firefox being firefox, it worked like a charm but when I went to check it on Internet Explorer, the whole thing was out of line. I've triple checked the code and I'm coming close to firing this laptop out the window. Hopefully somebody out there can see what's wrong and be able to save my computer.

Here's my code.

Cheers.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Site</title>
</head>

<body bgcolor=#4D4D4D bottommargin=20 topmargin=20 rightmargin=10 leftmargin=10 marginwidth="10" marginheight="30" style="border: 1px solid #FFFFFF; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px">

<div style="border-style: border-width: 1px; padding-left: 2px; padding-right: 2px; padding-top: 1px; padding-bottom: 1px">

<table border="0" cellpadding="10" cellspacing="0" width="100%" height="26">
<tr>
<td width="4%">

</td>
<td width="92%">

<p style="text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline; margin-top: 0pt; margin-bottom: 0pt">
<span style="font-family: Times New Roman; font-size: 28pt">New Site</span><span style="font-size: 28.0pt; font-family: Times New Roman; color: gray">
</span></td>
<td width="4%">

</td>
</tr>
</table>

<table border="0" cellpadding="10" cellspacing="0" width="100%" height="26">
<tr>
<td height="10" width="4%" bordercolor="#FFFFFF">

</td>
<td height="10" width="18.4%" bgcolor=#999999 align="center" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:solid; border-left-width:2px; border-right-style:solid; border-right-width:1px" bordercolor="#000000">
<a href=index.html style="text-decoration: none">
<span style="font-size: 9.0pt; font-family: Arial; color: white; font-weight: bold">
Home</span></td></a>

<td height="10" width="18.4%" bgcolor=#999999 align="center" style="border-style:solid; border-width:1px; " bordercolor="#000000">
<a href=AboutUs.html style="text-decoration: none">
<span style="font-size: 9.0pt; font-family: Arial; color: white; font-weight: bold">
About Us</span></td></a>

<td height="10" width="18.4%" bgcolor=#999999 align="center" style="border-style:solid; border-width:1px; " bordercolor="#000000">

<a href="link3.html" style="text-decoration: none">
<span style="font-family: Arial; font-weight: 700; font-size: 9pt; color: #FFFFFF">
Link 3</span></a></td></a>

<td height="10" width="18.4%" bgcolor=#999999 align="center" style="border-style:solid; border-width:1px; " bordercolor="#000000">

<a href="link4.html" style="text-decoration: none">
<span style="font-family: Arial; font-weight: 700; font-size: 9pt; color: #FFFFFF">
Link 4</span></a></td></a>

<td height="10" width="18.4%" bgcolor=#999999 align="center" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:2px" bordercolor="#000000">
<a href=ContactUs.html style="text-decoration: none">
<span style="font-size: 9.0pt; font-family: Arial; color: white; font-weight: bold">
Contact Us</span></td></a>

<td height="10" width="4%" bordercolor=#000000 style="border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
</td>

</tr>
</table>

<table border="0" cellpadding="10" cellspacing="0" width="100%" height="26">
<tr>
<td width="4%">

</td>

<td style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:solid; border-left-width:2px; border-right-style:solid; border-right-width:2px" bordercolor="#000000" height="389" width="73.6%">
<p align="center">
</td>

<td style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-right-style:solid; border-right-width:2px" bordercolor="#000000" bgcolor=#999999 width="18.4%">
<a href=link6.html>
<p align="center">
</p>
<p align="center"></a>

<p align="center"> </td>

<td width="4%">

</td>
</tr>
</table>

<table border="0" cellpadding="10" cellspacing="0" width="100%" height="26">
<tr>
<td width="4%">
</td>
<td width="16%">
</td>
<td width="60%">

<p style="text-align: center; direction: ltr; unicode-bidi: embed; vertical-align: baseline; margin-top: 0pt; margin-bottom: 0pt">
<font size="2" color="#FFFFFF"><span style="font-family: Arial Narrow">
Contact Details</span></font></td>
<td width="16%">
<a href=http://www.google.ie/> </a></td>

<td width="4%">
</td>
</tr>
</table>

<table border="0" cellpadding="10" cellspacing="0" width="100%" height="26" border="1" bordercolor=#999999 style="border-top-style: solid; border-top-width: 1px;">
<tr>
<td>

<p align="center" style="margin-top: 0; margin-bottom: 0">
</p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<span style="font-family: Arial; font-weight: 700; font-size: 9pt; color: #FFFFFF">
Disclaimers etc</span></td>
</tr>
</table>

</div>

</body>

</html>

Skud · 11-12-2008 9:00am

cake126 wrote: »

Hi folks,

I have been asked to code up a site and have run into a problem. I have been using Microsoft FrontPage to do the coding and firefox to check my progress. Firefox being firefox, it worked like a charm but when I went to check it on Internet Explorer, the whole thing was out of line. I've triple checked the code and I'm coming close to firing this laptop out the window. Hopefully somebody out there can see what's wrong and be able to save my computer.

Here's my code.

Cheers.

Off hand, haven't checked your code. But the embedded style isn't the best idea. Use CSS - generally considered a best practice. If you had a javascript call to manage which browser your page is being viewed in could have multiple stylesheets/style classes and be able to change them as you go (using javascript is just an example of how it could be done without having to pick up a programming language). http://websitetips.com/javascript/#styleswitch something like this.

As you found out IE and Firefox render things differently. Generally people don't adhere to standards for IE as much and result in using some hacks. This is a problem but gets your page to display right...

00sully · 11-12-2008 9:15am

no offence cake126 but that stlye of code is not the way to build even a simple web page. As Skud said, use an external CSS style sheet and call the styles using classes for your HTML elements.

see here --> www.w3schools.com/css/

also, try avoid using tables completely - that might solve some rendering problems.

Overall, the page looks fairly straightforward (altho that code is terribly hard to read) so I dont imagine it would require any javascript hacks to determine browser - i.e. you should be able to get it at least to look the same in IE6&7 and Firefox 2&3

deargas · 11-12-2008 9:25am

Man oh man.

Your code needs a serious overhaul.

Firstly though, you have no content in your tables. Tables need something in them to see what they will be like.

Also, do you really need all the border stuff.

Css, like the previous poster advised has moved on a lot.

All your border stuff can be condensed into border:1px solid white; rather than the reams of stuff Frontpage spews out.

And frontpage, I thought that thing was in a box, underground.

deargas · 11-12-2008 9:39am

ok,

so I've dumped your code into firebug to have a quick look at what you're doing.

here's some tips

1. Don't try to put padding cells into your html. set up your outer table to align = "center"

you need 1 outer table, then everything else should be contained in a row.

Below is my preferential technique to layout a page. After you master this basic layout, you can start looking at floating layouts, and using css, but the easies way to conceptually start is by using tables.
you can remove all the border="1" text it's just to give some visual feedback.

this is my personal preference. e.g.

<table align="center" width="990" border="1">
<tr>
<td>

<table width="100% border="1">
<tr>
<td>
<h1>Banner - Site title</h1>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>

<table width="100%" bgcolor="#cccccc" border="1">
<tr>
<td width="20%">link1</td>
<td width="20%">link1</td>
<td width="20%">link1</td>
<td width="20%">link1</td>
<td width="20%">link1</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>

<table width="100%" border="1">
<td width="25%" valign="top"> Left col </td>
<td width="50%" valign="top"> Centre </td>
<td width="25%">
right col
</td>
</tr>
</table>

</td>
</tr>
</table>

kayos · 11-12-2008 9:58am

To be really anal about it HTML is not code, its a mark up language.

Any way as others have said we all thought front page had been burried underground many years ago. Try get your hands on hmmmm lets say notepad a much better html editor, you dont have the WYSIWYG side of the design but hey it does not produce the worst HTML ever invented....besides notepad Visual Studio, dream weaver (guessing its still around not a web guy so) are good.

Also for your own sake take a look at doing tableless design in CSS and get yourself firebug for firefox best plug in ever.

cake126 · 11-12-2008 12:08pm

Sorry lads. As you may have guessed, I'm farily new to this whole web desgin thing. I was trying to keep it simple but I guess I got bogged down in Front Page (it was what I had on the computer). Nice one for the help.

Just to clear one thing real quick, css will set the style and, in general, FireFox and IE will read it and adhere to it, yeah?

kayos · 11-12-2008 12:41pm

cake126 wrote: »

Just to clear one thing real quick, css will set the style and, in general, FireFox and IE will read it and adhere to it, yeah?

In theory communism works, in theory!

IE and Firefox should both render the page correctly if you follow CSS standards but sadly this is not always the case. Hell even different versions of IE will render different. The only real option is to do cross browser testing and implement different CSS for different browsers. But that all depends on what you are doing in the page.

Years ago frames were the norm, then tables, now its tableless design with CSS. Frontpage was a beginners Web design tool something akin to using MS Word for designing sites. Unless you are doing a very simple page you are better off with a different tool. There are plenty of free ones out there and these will all be MUCH better than frontpage MS offer a free toll for web apps, Web Developer express, which should be easy enough for you to get up to speed on and beat the pants of FP. Not sure if FP still does it but you could have had the best HTML you ever did see and open it in FP and next thing it is destroyed. The only thing these days that would contain the words front page and be in regular use would be the front page extensions for deploying web sites.

KerranJast · 11-12-2008 12:49pm

cake126 wrote: »

Sorry lads. As you may have guessed, I'm farily new to this whole web desgin thing. I was trying to keep it simple but I guess I got bogged down in Front Page (it was what I had on the computer). Nice one for the help.

Just to clear one thing real quick, css will set the style and, in general, FireFox and IE will read it and adhere to it, yeah?

If you stick to valid W3C markup then 99% of it should work across the board. Use the validator to check your code -> http://validator.w3.org/. You may still need a few CSS tweaks for IE6 (google IE6 underscore trick) but IE7 should mirror Firefox and the other standards compliant browsers fairly well.

Bluefrog · 12-12-2008 4:26pm

I reckon if you have to use different CSS for different browsers it kinda defeats one of the great advantages of CSS.

Using javascript to detect browser and serve CSS based on that is overkill unless your doing something extremely complex, providing for accessability and/or your whole interface is being rendered via javascript (GMail for example)

I've been noticing lately that Firefox is much more forgiving of non-closed tags than IE is so, depending on the layout of course, that would often be where I would start looking.

I may sound like a markup zealot but especially if you are only starting in HTML I think it's much more advisable to hand code.

cake126 · 13-12-2008 1:00pm

Sweet. Cheers for all your help lads. I now have a long day of coding ahead of me. Some way to spend your weekends! Nice one.

Just a quick follow up question. Is there a way to find out the screen size using html? I was thinking about something along the lines of (in semi java terms):

int screenWidth = getScreenWidth();
[row of links].width = 80% of screenWidth;

Something like that. Is it even possible?

Overflow · 14-12-2008 1:57am

Forget frontpage, it so old and out of date! You need to be using css and valid XHTML markup. Have a look here at this site, it has a ton of free CSS templates that you can use and edit to your liking:

http://www.freecsstemplates.org/

HTML Code problem with IE vs Firefox

Comments