Solved

Text Box HTML Firefox Problem

Posted on 2013-02-07
9
533 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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 500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

631 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