Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Text Box HTML Firefox Problem

Posted on 2013-02-07
9
Medium Priority
?
544 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
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

916 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