Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE and Firefox 2

Status
Not open for further replies.
ZOR

ZOR

Technical User
Jan 30, 2002
2,963
GB
I have been doing a website build using Frontpage. I have put this on the Frontpage Forum but it seems dead.

My page which contains a table looks okay on IE, but when I look at it with Firefox, the table cell heights look twice as high and the fonts are barely readable.

I have included the code below in the supect page but it makes no difference. Any ideas?? Thanks

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
 
Sort by date Sort by votes
Suggest you try and validate your html page at
If the page has valid markup, and you have a valid doctype, then your page should render (mostly) the same across (most) broswers.

If you have no idea what those bold words mean... use google and research it.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks. I know Frontpage is a problem, however I also found a lot of people having problems with Dreamweaver. I Think the biggest bugbear seems to be the Browsers. If they all interpreted the documents in the same way, than it would be an easier world.
 
Upvote 0 Downvote
Think the biggest bugbear seems to be the Browsers. If they all interpreted the documents in the same way, than it would be an easier world.
Click to expand...
That is why there are doctypes and standards (to ensure valid markup). Your problem is most likely that your HTML markup is not standards compliant, is missing a doctype, or doesn't validate against the doctype you chose. The fact that IE works does not mean that the document is valid, well structured or even HTML!

The biggest bugbear seems to be inexperienced people using programs like FrontPage and Dreamweaver in the mistaken assumption that they will be able to create stunning code with little (or no) hands-on HTML experience.

I learnt with a little help from Dreamweaver. I taught some of the earlier versions of FrontPage and Dreamweaver. I never touch either program now. That doesn't mean they are useless -- far from it! Just don't expect stunning code from either.

Cheers,
Jeff


[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Many thanks BabyJeffy. You are right, I come under the bracket of:

The biggest bugbear seems to be inexperienced people using programs like FrontPage and Dreamweaver in the mistaken assumption that they will be able to create stunning code with little (or no) hands-on HTML experience.

However, spending money on Frontpage and Dreamweaver, one would think it would be reasonably ok. Thanks for the link, I did two other URL checks, one was the British Broadcasting Corporation - They had 62 errors. The other one, who takes all our money was Microsoft.com. They had NO errors. Something in this hey? Have a star for the link, thanks again
 
Upvote 0 Downvote
However, spending money on Frontpage and Dreamweaver, one would think it would be reasonably ok.
Click to expand...
I'm with you 100% on that one!

One of the reasons I moved away from Dreamweaver early on was the continuous upgrade cycle that you had to maintain if you wanted to create code that wasn't just restricted to one browser. I imagine that it's much the same still.

Regarding validation... it's not the cure-all we all imagine. As you have found... even some of the highest ranking sites have validation errors (and they still look fine)! I have seen validated CSS code crash browsers dead - and pulled my hair out at the quirks each browser shows. It's also important to identify the "serious" from the "less serious" validation failures.

Serious: "You didn't close the <td> tag"
Less Serious: "You included an empty tabindex <input tabindex="">

You think IE and Firefox renders differently in Windows? Wait till you try Safari, IE and Firefox on the Mac *grin*

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Don't like the "Grin" bit. I think I will just hope someone from the Browser companies will produce some add in lines of HTML for people to insert in there code. Things I am noticing is Firefox does not seem to recognise a Bold Font, It does not
do anything visual with Hover buttons, although the button function is working etc etc. I will keep struggling to see how far I will go before throwing it in. Best regards
 
Upvote 0 Downvote
If anyone has time to suss this I would be greatful. It did look okay on Firefox before I went into design (Frontpage) and physically played with the table. I added a cell. I have removed it back to the original, but in Firefox it stretches the cell heights. In IE its okay.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>Send Out The Data</title>

<script type="text/javascript">
function update_message_body()
// This function composes an e-mail message using the contents of
// another form on the same page.
{
var Name = document.SubmissionForm.name.value;
var Address = document.SubmissionForm.address.value;
var City = document.SubmissionForm.city.value;
var State = document.SubmissionForm.state.value;
var Zip = document.SubmissionForm.zip.value;
var Phone = document.SubmissionForm.phone.value;
var Email = document.SubmissionForm.email.value;
var CurrentDate = new Date();

document.ProxyForm.MessageBody.value = "\n\n" + "-= Start of Message =-" + "\n\n"
+ "User Information Submission" + "\n\n"
+ "Time received: " + CurrentDate + "\n\n"
+ "Name: " + Name + "\n\n"
+ "Address: " + Address + "\n\n"
+ "City: " + City + "\n\n"
+ "State: " + State + "\n\n"
+ "Zip: " + Zip + "\n\n"
+ "Phone: " + Phone + "\n\n"
+ "Email: " + Email + "\n\n" + "-= End of Message =-";
return true;
}


function chkForm() {
var nameVal = document.getElementById('name').value;
var addressVal = document.getElementById('address').value
var cityVal = document.getElementById('city').value
var stateVal = document.getElementById('state').value
var zipVal = document.getElementById('zip').value
var phoneVal = document.getElementById('phone').value
var emailVal = document.getElementById('email').value

if((nameVal=='')||(addressVal=='')||(cityVal=='')||(stateVal==-1)||(zipVal=='')||(phoneVal=='')||(emailVal=='')){
alert('All fields required.');
return false;
} else {
update_message_body();
}
}
</script>
<base target="_self">
</head>
<body>
<h3>Page Title</h3>
<form name="SubmissionForm" action="mailto:target@email.com" enctype="multipart/form-data" onSubmit="return chkForm();">
<table class="Fatscope" border="1" width="577">



<tr>
<td class="DescriptorCell" width="182">Name:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='name'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">Address:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='address'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">City:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='city'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">State:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='state'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">Zip:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='zip'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">Phone:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='phone'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>



<tr>
<td class="DescriptorCell">Email:</td>
<td class="ContentCell" width="276">
<p align="center">
<select id='email'>
<option value="-1">-- Select --</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
</select>
</td>
</tr>




</table>
<p class="CenteredContent"><input type="reset" value="Clear All Entries"></input></p>
</form>

<form name="ProxyForm" enctype="text/plain" method="post" action ="mailto:Target.comd?subject=Reuseable Code Library Submission" onsubmit="return chkForm();">
<p class="CenteredContent"><input type="submit" value="Submit New Function"></input></p>
<input type="hidden" id="MessageBody" name="MessageBody"></input>
</form>
</body>
</html>


Many thanks
 
Upvote 0 Downvote
I think your spacing problem is here:
Code: 
<tr>
  <td class="DescriptorCell" width="182">Name:</td>
  <td class="ContentCell" width="276">
      [b]<p align="center">[/b]
      <select id='name'>
          <option  value="-1">-- Select --</option>
          <option  value="AK">Alaska</option>
          <option  value="AL">Alabama</option>
      </select>
  </td>
</tr>
Firefox will apply a top and bottom margin to <p> elements by default, I seem to remember that IE (wrongly) ignores them if the <p>'s the only thing in a table cell. If you just want to centre the control within the cell, why not remove the <p> altogether and apply a little CSS:
Code: 
.ContentCell { text-align: center }
I can't reproduce your font size problem, are you sure there's no stylesheet being applied to this page?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Many thanks Chris. You hit it on the head. I tried making one of the cells (1st One) centered. Then when I saw it fail on Firefox, I amended it to Left. But it was still no good.

After your reply, I looked at the code.


<td class="DescriptorCell" width="107" bgcolor="#FFFFFF">
<p align="left">DBC-6</td>


<td class="DescriptorCell" width="107" bgcolor="#FFFFFF">DBC-6</td>


The offending bit was <p align="left">. I removed it as the lower line of code, and it was back to normal on Firefox. Have a well deserved star for finding that one. I was going round in circles trying to sort it out. Best regards, thanks again.
 
Upvote 0 Downvote
You can apply in your css:

P { margin:0; padding:0;}

to get rid of that problem in Firefox.

Your fix above is cleaner but there will be occasions where you will need that paragraph tag and with the css above you no longer have that additional padding problem in Firefox.

----------------------------------------
Florida Web Design
Orlando Web Hosting
Florida Coldfusion Hosting
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

angemaths
  • Locked
  • Question
updating WordPress and Plugin?
Replies
1
Views
172
jackm01
jackm01
pdldavis
  • Locked
  • Article
Wmv Files on Web Page in Firefox - Refresh Page? 2
Replies
5
Views
106
spamjim
spamjim
2thetiger7
  • Locked
  • Question
Java Script image slider will not load images within Firefox
Replies
2
Views
81
spamjim
spamjim
dkemas
  • Locked
  • Question
IE6 on wamp server making IE8 behave strangely
Replies
5
Views
91
darryncooke
darryncooke
EdwardMartinIII
  • Locked
  • Question
Drupal: menus and submenus?
Replies
8
Views
122
kjv1611
kjv1611

Part and Inventory Search

Sponsor

Back
Top