Web page table shows fine in IE, Chrome, Safari (desktop and mobile) but NOT Firefox
See here in serveral places:
http://www.hudfhareversemortgage.org/ (top right opt in box - spacing and width is incorrect)
http://www.hudfhareversemortgage.org/reverse-mortgage-calculator/ (and several pages just like this - you should obviously note the fields are way outside the form layout.)
Again - this works fine on Chrome, IE, Safari (and mobile versions) - just not Fire Fox?
All Replies (11)
You have a mismatch on your td tags and colspan attributes. In the row with the phrase "Street Address" and the input below it, you need colspan="3". Faced with a missing "cell" Firefox apparently breaks up the row differently than the other browsers.
Edit: Obviously this is for the second link, not the first link.
Modified by jscher2000 - Support Volunteer
Thanks for the tip - however - that doesn't seem to be the case here:
http://www.hudfhareversemortgage.org/reverse-mortgage-brochure-and-dvd-package/
And I still get the same problem!
colspan=3 for the TD with the street input field (name="lane") seems to fix this page in Firefox.
You do not see this?
<tr><td colspan="2">Street Address</td></tr>
<tr class="spaceUnder"><td colspan="2"><input style="width: 535px" name="lane" class="required" type="text" /></td></tr>
YIKES! I totally misread your first response (jscher2000) - let me try putting in the colspan="3" in both the label and the field now. Sorry!
Yes - that was it. Changed all landing pages with this form to label and field with <td colspan="3">
Now I don't look like a total idiot to my Firefox viewers (this post and the rest of the website not withstanding!)
Thank you - that was simple and something bugging me.
Any ideas, now, about why that squeeze box on the home page (and subsequently all pages throughout the site) shows no spacing between the fields and different field widths - again - as it does compared to all other browsers?
I'm not sure what the "default" size is for a text input. Rather than rely on defaults that may vary from one browser to the next, try setting the width using CSS.
Well - I'm sorry to make you my HTML/CSS cleanup crew - I am a novice at this...but I do have this code on the pages, but it doesn't seem to be taking:
<style>textarea,input,select{padding:3px 3px 3px 3px;width:135;clear:left;float:left;font-weight:bold;font-size:11px;border:1px solid #BDC7D8}</style>
This is a difference between HTML attribute values and CSS property values: in CSS you need to include the unit of measurement, which in this case is px for pixels.
@jscher2000
VERY kind sir, thank you for your tips. My site in Firefox now looks just as it does in all other browsers. And I had an small item or two of code that got corrected in the process.
Both the squeeze box form and all landing page forms now look uniform across all platforms!
THANK YOU VERY MUCH FOR YOUR GENEROUS GIVING OF YOUR TIME AND EXPERTISE!!!!!!!