Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Text Box HTML Firefox Problem

Posted on 2013-02-07
9
Medium Priority
?
536 Views
Last Modified: 2013-02-08
I have this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<meta name="Generator" content="TEST">
<meta name="viewport" content="width=460">
<style type="text/css">
body{margin:0;padding:0;}
</style>
</head>

<body text="#000000" style="background:#ffffff; height:350px;">
<form method="POST" action="form.asp" name="form1">
<div style="background-color:transparent;margin-left:auto;margin-right:auto;position:relative;width:460px;height:350px;">
<img src="wpimages/wpc2cc6dc4_05_06.jpg" border="0" width="398" height="292" alt="" style="position:absolute;left:8px;top:6px;">
<div style="position:absolute;left:386px;top:212px;width:67px;height:70px;">
    <input type="image" src="down.jpg" onmouseover="this.src='over.jpg'" onmouseout="this.src='down.jpg'" value="login" name="submit" />
</div>
<div style="position:absolute;left:108px;top:65px;width:258px;height:20px;">
    <input name="name" type="text" size="" style="width: 265px; heigh: 1px; color: #a5a5a5; border: 0px solid black;font-weight: bold;font-family: Arial;font-size:10.0pt;">
</div>
<div style="position:absolute;left:108px;top:106px;width:258px;height:20px;">
    <input name="email" type="text" size="" style="width: 265px; heigh: 1px; color: #a5a5a5; border: 0px solid black;font-weight: bold;font-family: Arial;font-size:10.0pt;">
</div>
<div style="position:absolute;left:118px;top:172px;width:238px;height:86px;">
    <textarea name="message" cols="38" rows="5" style="border: 0px solid black; resize: none; color: #a5a5a5; font-weight: bold; font-family: Arial;font-size:9pt;"></textarea>
</div>
</div>
</form>
</body>
</html>

Open in new window


   Now on Internet Explorer and Google chrome works perfect like the picture I´m attaching called error1.jpg that picture shows how must be seen in Firefox. Now in Firefox I see the results like picture error2.jpg with problem, see the black arrows I drew applied for the line of code:

<div style="position:absolute;left:118px;top:172px;width:238px;height:86px;">
    <textarea name="message" cols="38" rows="5" style="border: 0px solid black; resize: none; color: #a5a5a5; font-weight: bold; font-family: Arial;font-size:9pt;"></textarea>
</div>

Open in new window


In error2.jpg shows how the text area command invades other zone in other words the white  blocking the blue.
   What I need to add to my code to see in Firefox good? Like I said the element that invades making the white is the Text area command in the the next line of code:

<div style="position:absolute;left:118px;top:172px;width:238px;height:86px;">
    <textarea name="message" cols="38" rows="5" style="border: 0px solid black; resize: none; color: #a5a5a5; font-weight: bold; font-family: Arial;font-size:9pt;"></textarea>
</div>

Open in new window

Thank you
error1.jpg
error2.jpg
0
Comment
Question by:coerrace
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38864633
You could try using a different doctype instead of an obsolete transitional.

like:
<!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">
Or:
<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

You might have to make some adjustments, but you should be able to get all the browsers to use the same rules.

I would also put all the inline styling in a stylesheet where it belongs so things are a little easier to follow.

Cd&
0
 

Author Comment

by:coerrace
ID: 38864708
What adjustments could you tell me what to modify in my code please specific I´m lost.
Thank you
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38864966
Don't know what adjustments until we see what a doctype change does, and I'm not going to dig around in the rat's nest of inline styling.  I have already spent more time on this than I normally would for a question that has a 1 in 3 probability of being deleted.

So clean it up and validate, so we can see how that works out.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:coerrace
ID: 38865119
This you said:

like:
<!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">
Or:
<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

I tested in both ways no one work simply same issue.
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866777
add

width: 265px;

to your text area style
0
 
LVL 6

Accepted Solution

by:
nickinthooz earned 2000 total points
ID: 38866789
better yet, make it 235px, or whatever the width you want it to be is.  Also stylesheets are much more manageable than inline styles.
Here is what your line of code needs to be.
<textarea name="message" cols="38" rows="5" style="border: 0px solid black; resize: none; color: #a5a5a5; width: 235px; font-weight: bold; font-family: Arial;font-size:9pt;"></textarea>

Open in new window

0
 

Author Closing Comment

by:coerrace
ID: 38866830
Work perfect nickinthooz. Thank you for the help I don't k why COBOLdinosaur was angry with some easy detail. Sometimes is for that in this kind of details can delay us is for that I think this community is to help each other not to kick you. But nickinthooz yo are so generous with people like you the community will grow.
Thak you
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38868534
I don't k why COBOLdinosaur was angry

I never get angry.  I do tell people what I think.  I think you are unprofessional and abusive of Experts, so you will likely see very little support as time goes on unless you learn to respond to what you are being told instead of getting defensive and defending lazy approaches.


Cd&
0
 

Author Comment

by:coerrace
ID: 38868629
Abusive tell me in what give me the list where and how. I almost not use the system and I pay monthly and you are the only person are trying to respond in that matter in all the way since years I´m in experts exchange including other free forums and  I never heard someone trying to respond like this in a supposed help forum. If you are angry and try to say to blame someone like me or someone else think twice because you are not right I´m not have so much experience for that reason I use the forums I´m not god to know all but I have education and I know how to treat people. You don´t know the work we have each one because lazy of course not I have a work where my boss calls me every hour I work more than 8 hours per day but I know my responsibilities. But this is not important you can't judge the people for a minimal things; you don´t know about the people you are in a help forum to help each other and if you have an excellent points that not means you can insult people or treat like garbage. And the point must be if you have laziness to respond then don´t do. You maybe are like god to know all but in my case I think the life is to learn everyday. Here I learn for everybody but not for you I´m impressed until now if you talk of professionalism this is not professional and I´m sure of something maybe you know so much in technology but you miss to learn in how to treat people and not to offend.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question