I am having some strange issues I have never encountered with firefox right now. I have never had this before in my 14 years of web design & development. Please visit Farrow Consulting - Telecom systems design, contract evaluation and negotiation, Telephone Bill Analysis, Technology Startup Consulting, Voice and Data Networks . If you are using IE/Safari you should be able to use the form there with no issues. If you are using Firefox you will not be able to even click inside the form fields to even bring the cursor up. Why is this?? I am looking for any sort of assistance I can get. Thanks.
Hi Miamimonkk. Welcome to SitePoint. 
Your apDiv1 is sitting over the top of the form.
#apDiv1 {
height: 621px;
left: 154px;
position: absolute;
top: 173px;
width: 995px;
z-index: 10;
}
This is a poor layout strategy. (Don’t use absolute positioning for layout as a rule.)
Anyhow, as a quick fix, simply reduce the width and height of that div (as there’s no point in having it larger than the image it contains:
#apDiv1 {
[COLOR="Red"]height: 60px;[/COLOR]
left: 154px;
position: absolute;
top: 173px;
[COLOR="Red"]width: 202px;[/COLOR]
z-index: 10;
}
Thanks, what image are you referring to? AP Div1 is the containment div, it wasn’t met for a specific image.
Also, what would be a better layout strategy? Relative positioning? Suggestions?
But that’s all it holds: a Contact Us image. It’s way bigger than it needs to be to hold that image.
Now take this in the context it’s offerred – I’m trying to help you… To help you I’m going to be BRUTALLY frank!
You may have been at this for fourteen years; but it’s painfully obvious you’ve not updated your skills in a decade… and it’s entirely possible you bought into the lie that Dreamweaver is a useful tool for building websites.
Now, you might be asking why I say this.
-
Comment before the doctype, so IE is in quirks mode.
-
Excessively large description meta nothing can actually use.
-
inlined CSS when there’s a perfectly good external stylesheet.
-
screwy media type on that stylesheet since it’s VERY unlikely one should be sending their screen/projection CSS to PRINT.
-
that stupid mm_ javascript nonsense bloating out the markup to do CSS’ job.
-
all your content fonts declared in PX for a miserable accessibility /FAIL/.
-
use of absolute positioning to build the layout instead of flow and floats… an outright broken methodology for building a page.
-
endless pointless non-semantic markup filled with invalid ID’s, id’s on dozens of elements for nothing, non-breaking spaces and vertical breaks doing padding and border’s job, paragraphs around non-paragraph elements, classed spans doing SMALL’s job, line breaks doing padding’s job, id’s on element that don’t need ID’s… shall I go on?
It’s why you have 44 validation errors, meaning it’s not even HTML, it’s gibberish. MUCH of that gibberish is thanks to the steaming pile of manure known as Dreamweaver; as a dearly departed friend of mine used to say the only thing you can learn from Dreamweaver is how not to build a website; and the only thing about Dreamweaver that can be considered professional grade tools are the people promoting it’s use.
13k of HTML for 700 bytes of plaintext and 7 form elements being an indication of just how bad things are in there.
Were I coding that same layout, this is all the HTML would probably look like. (+/- 5% to account for when CSS is made).
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="Description"
content="A Telecommunications company with over 42 years of experience in Telecom systems design, contract evaluation and negotiation, Telephone Bill Analysis, Technology Startup Consulting, Voice and Data Networks."
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Farrow Consulting
</title>
</head><body>
<div id="pageWrapper">
<h1>
Farrow <span>Consulting</span>
</h1>
<div id="contactBox">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
</ul>
(813)-340-0449
</div>
<ul id="mainMenu">
<li><a href="telecom-systems-design.html">Telecom Systems Design</a></li>
<li><a href="voice-data-networks.html">Voice &Data Networks</a></li>
<li><a href="telecom-contracts.html">Telecom Contract Negotiation</a></li>
<li><a href="additional-services.html">Telephone Bill Analysis</a></li>
<li><a href="additional-services.html">Additional Services</a></li>
</ul>
<div class="columnWrapper">
<div class="leeadingColumn">
<div class="contactUs">
<h2>Contact Us</h2>
<b>Farrow Consulting</b><br />
13189 Little Farms Drive<br />
Spring Hill, FL 34609<br />
<b>(352)-556-5433</b> Office<br />
<b>(813)-340-0449</b> Mobile<br />
<br />
<a href="mailto:farrowconsulting@tampabay.rr.com">FarrowConsulting@tampabay.rr.com</a>
<!-- .contactUs --></div>
<!-- .leadingColumn --></div>
<form id="form1" action="farrow_contact.php" method="POST" id="contactForm">
<fieldset>
<label for="contactName">
Name<br />
<small>Add your name</small>
</label>
<div>
<input type="text" name="name" id="contactName" />
</div>
<label for="contactEmail">
Email<br />
<small>Enter a Valid Email</small>
</label>
<div>
<input type="text" name="email" id="contactEmail" />
</div>
<label for="contactPhone">
Phone<br />
<small>Add a Phone Number</small>
</label>
<div>
<input type="text" name="phone" id="contactPhone" />
</div>
<label for="contactWebsite">
Website<br />
<small>Your Website</small>
</label>
<div>
<input type="text" name="website" id="contactWebsite" />
</div>
<label for="contactCompany">
Company Name<br />
<small>Your Company Name</small>
</label>
<div>
<input type="text" name="company" id="contactCompany" />
</div>
<label for="contactTitle">
Title<br />
<small>Your Title</small>
</label>
<div>
<input type="text" name="title" id="contactTitle" />
</div>
<label for="contactService">
How can we help?<br />
<small>Hold Ctrl to select more than one option</small>
</label>
<div>
<select name="service" size="4" multiple="multiple" id="contactService">
<option selected="selected">Telecom Systems Design</option>
<option>Migration Path</option>
<option>Voice and Data Network</option>
<option>Request for Proposal</option>
<option>Contract Negotiation</option>
<option>Telephone Bill Analysis</option>
<option>Startup Company</option>
<option>Other</option>
</select>
</div>
<label for="contactMessage">
Message<br />
<small>Type Your Message</small>
</label>
<div>
<textarea name="message" rows="6" cols="30" id="contactMessage></textarea>
</div>
<input type="submit" value="Submit" id="contactSubmit" />
</fieldset>
</form>
<!-- .columnWrapper --></div>
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="telecom-systems-design.html">Telecom Systems Design</a></li>
<li><a href="voice-data-networks.html">Voice and Data Networks</a></li>
<li><a href="telecom-contracts.html">Telecom Contract Negotiation</a></li>
<li><a href="additional-services.html">Telephone Bill Analysis</a></li>
<li><a href="additional-services.html">Additional Services</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
</ul>
© 2011 Farrow Consulting. All Rights Reserved.
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
SEMANTIC markup – headings for headings, lists for list, accessibile forms with fieldsets, sensible content order, gutting the description down to what search engines might actually USE, removing all the redundant/pointless classes and ID’s that were on everything, and nothing you are doing warrants the use of Javascript. Everything else on that layout goes in the EXTERNAL stylesheet… and at 4.8k it throws almost two thirds of what you had away. Even deleting the CSS and scripting that has no place in the markup it’s still a 40% reduction.
I’ve got a few people ahead of you, but if I remember later I’ll belt out the CSS that would go with that.
Basically CSS is only as good as the HTML it’s applied to – and letting Dreamweaver vomit up outdated markup is what’s messing with you… which is why IMHO you need to throw the entire codebase away and start over clean.
Ok, thanks for the advice. I know Dreamweaver is messing me up, usually I don’t have much issue going through and manually touching up the code afterwards but for this I did. Another thing that I did with this site being that it was being done for a friend and needed to be done fast I tested out sitegrinder for photoshop. Needless to say I will never use it again. It puts everything in absolute positioning and just isn’t effective. I am not sure what they were thinking when they made that program, maybe I would just have to learn it more but not worth my time.
Also, the reason I have apdiv 1 (which is no longer an ap div) is because it’s supposed to be a container for the content on different pages. For small sites like this I use the dreamweaver templates engine rather then server side includes etc. In dreamweaver for DW templates you have to specify an area that is editable on the template for each page, so I made apdiv1 the content area and specified it as editable; starting to doubt the usefulness of dreamweaver.
PS going to setup email notifications so I know when someone replies, thought I did but guess not, that’s why it took me so long to reply.
You will find that with pretty much EVERY ‘automated’ tool for doing things. They are, by definition trash because they all “think” presentation first – when frankly in site development presentation should be LAST.
If you have layout and graphics before you have semantic markup, IMHO that’s just the road to failure – developing the page using tools that only work with presentational concepts being the express bus down that road.
DW’s “template engine” is responsible for as much broken code as Frontpage ever was – that there’s this mass delusion to the contrary makes me wonder if there’s some religious dogma involved in it’s use that I’m somehow immune to.
DW as a whole is filled with things that you pretty much have to ignore even exist to make it a usefu… at which point, why use it (and waste money on it) when flat text editors, ftp clients, and the browsers themselves are free?
Check PM