Won't align right in Firefox

K

Kavok

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
body
{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div id='divLogin' style='position:absolute; right: 0px; vertical-
align: top'>
<form id="login" action="/login.bml" method="post">
<div style="position:absolute; left: 0px; top 0px; height:
20px;text-align: right;" >
<div style="position:absolute; left: -400px; top: 0px;
padding: 5px;text-align: right;">
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>

I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad

This works perfectly fine in IE6, but it appears to still be aligning
left in firefox.

If I change <div id='divLogin' style='position:absolute; right: 0px;
vertical-align: top'>" to <div id='divLogin' style='position:absolute;
left: 0px; vertical-align: top'>

And <div style="position:absolute; left: -400px; top: 0px; padding:
5px;text-align: right;"> to
<div style="position:absolute; left: 200px; top: 0px; padding:
5px;text-align: right;"> it works perfectly.

The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).

What am I doing wrong?
 
M

Mike Scirocco

Kavok said:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
body
{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div id='divLogin' style='position:absolute; right: 0px; vertical-
align: top'>
<form id="login" action="/login.bml" method="post">
<div style="position:absolute; left: 0px; top 0px; height:
20px;text-align: right;" >
<div style="position:absolute; left: -400px; top: 0px;
padding: 5px;text-align: right;">
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>

I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad

This works perfectly fine in IE6, but it appears to still be aligning
left in firefox.

If I change <div id='divLogin' style='position:absolute; right: 0px;
vertical-align: top'>" to <div id='divLogin' style='position:absolute;
left: 0px; vertical-align: top'>

And <div style="position:absolute; left: -400px; top: 0px; padding:
5px;text-align: right;"> to
<div style="position:absolute; left: 200px; top: 0px; padding:
5px;text-align: right;"> it works perfectly.

The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).

What am I doing wrong?
Click to expand...

I'm not sure what you're trying to do. You did miss a colon:

top 0px;

Can you describe what you generally want? I mean, where on the page do
you want the form to appear? Can you post the non working code that
works in IE but not FF that doesn't use position: absolute?

Mike
 
M

Mike Scirocco

Kavok said:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
body
{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div id='divLogin' style='position:absolute; right: 0px; vertical-
align: top'>
<form id="login" action="/login.bml" method="post">
<div style="position:absolute; left: 0px; top 0px; height:
20px;text-align: right;" >
<div style="position:absolute; left: -400px; top: 0px;
padding: 5px;text-align: right;">
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>

I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad

This works perfectly fine in IE6, but it appears to still be aligning
left in firefox.

If I change <div id='divLogin' style='position:absolute; right: 0px;
vertical-align: top'>" to <div id='divLogin' style='position:absolute;
left: 0px; vertical-align: top'>

And <div style="position:absolute; left: -400px; top: 0px; padding:
5px;text-align: right;"> to
<div style="position:absolute; left: 200px; top: 0px; padding:
5px;text-align: right;"> it works perfectly.

The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).

What am I doing wrong?
Click to expand...

Does this work for you?

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
div{
margin: 0;
padding: 0;
border: 0;
}
body{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
margin: 0;
padding: 5px;
}
#divLogin{
float: right;
vertical-align: top;
width: 166px;
text-align: right;
}
form{
margin: 0;
padding: 2px 2px 0 0;
text-align: right;
font-size: 1em;
}
form input{
width: 90px;
padding: 0;
margin: 0;
height: 18px;
}
..clear{
clear: both;
}
..lblLogin{
width: 60px;
}
</style>
</head>
<body>
<div id='divLogin'>
<form id='login' action="/login.bml" method="post">
<label class='lblLogin' for="strUser">Username:</label>
&nbsp;<input type='text' value='' id='username' name='username'>
<br/><label class='lblLogin' for="strPassword">Password:</label>
&nbsp;<input type='text' value='' id='password' name='password'>
<br/>
</form>
</div>
<div class='clear'></div>
</body>
</html>
 
K

Kavok

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
body
{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;}

</style>
</head>
<body>
<div id='divLogin' style='position:absolute; right: 0px; vertical-
align: top'>
<form id="login" action="/login.bml" method="post">
<div style="position:absolute; left: 0px; top 0px; height:
20px;text-align: right;" >
<div style="position:absolute; left: -400px; top: 0px;
padding: 5px;text-align: right;">
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>

I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad

This works perfectly fine in IE6, but it appears to still be aligning
left in firefox.

If I change <div id='divLogin' style='position:absolute; right: 0px;
vertical-align: top'>" to <div id='divLogin' style='position:absolute;
left: 0px; vertical-align: top'>

And <div style="position:absolute; left: -400px; top: 0px; padding:
5px;text-align: right;"> to
<div style="position:absolute; left: 200px; top: 0px; padding:
5px;text-align: right;"> it works perfectly.

The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).

What am I doing wrong?
Click to expand...

Some more info:

Displays 'correctly' in:
IE6/7
Opera 9

Does not display 'correctly' in:
Firefox 1.5 / 2.0

I'm defining correctly as the way I think its supposed to work. :)
 
K

Kavok

Does this work for you?

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
div{
margin: 0;
padding: 0;
border: 0;}

body{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
margin: 0;
padding: 5px;}

#divLogin{
float: right;
vertical-align: top;
width: 166px;
text-align: right;}

form{
margin: 0;
padding: 2px 2px 0 0;
text-align: right;
font-size: 1em;}

form input{
width: 90px;
padding: 0;
margin: 0;
height: 18px;}

.clear{
clear: both;}

.lblLogin{
width: 60px;}

</style>
</head>
<body>
<div id='divLogin'>
<form id='login' action="/login.bml" method="post">
<label class='lblLogin' for="strUser">Username:</label>
<input type='text' value='' id='username' name='username'>
<br/><label class='lblLogin' for="strPassword">Password:</label>
<input type='text' value='' id='password' name='password'>
<br/>
</form>
</div>
<div class='clear'></div>
</body>
</html>
Click to expand...

I've already got the rest of the code done. So this wasn't nessicary.
I just cut out a sample to make the problem easier to see.

If you view it in Firefox 1.5-2.X it puts a 'space' after the colon on
Password: and does not right-align it properly. I also don't see where
my missing colon (semicolon?) was.
 
K

Kavok

Some more info:

Displays 'correctly' in:
IE6/7
Opera 9

Does not display 'correctly' in:
Firefox 1.5 / 2.0

I'm defining correctly as the way I think its supposed to work. :)
Click to expand...

I've already
 
J

Jon Slaughter

Kavok said:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>blah</title>
<style type="text/css">
body
{
color: #000;
font-size: 11px;
font: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div id='divLogin' style='position:absolute; right: 0px; vertical-
align: top'>
<form id="login" action="/login.bml" method="post">
<div style="position:absolute; left: 0px; top 0px; height:
20px;text-align: right;" >
<div style="position:absolute; left: -400px; top: 0px;
padding: 5px;text-align: right;">
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>

I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad

This works perfectly fine in IE6, but it appears to still be aligning
left in firefox.

If I change <div id='divLogin' style='position:absolute; right: 0px;
vertical-align: top'>" to <div id='divLogin' style='position:absolute;
left: 0px; vertical-align: top'>

And <div style="position:absolute; left: -400px; top: 0px; padding:
5px;text-align: right;"> to
<div style="position:absolute; left: 200px; top: 0px; padding:
5px;text-align: right;"> it works perfectly.

The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).

What am I doing wrong?
Click to expand...

You have a div that is positioned absolutely and then a div inside that that
is positioned absolutely
Why are you using nested divs? and if you are you should have the inner ones
relative to the outer most div or its useless for that outer most div.

I'm not sure exactly what your after but after deleted your inner div styles
I get something like that is completely right aligned.

<div id='divLogin' style="position:absolute; right:0px; top:0px">
<form id="login" action="/login.bml" method="post">
<div style="" >
<label for="strUser">Username:</label>
<br/>
<label for="strPassword">Password:</label>
</div>
</form>
</div>


note that if you just do

<div id='divLogin' style="position:absolute; right:0px; top:0px">
Hello
</div>

then you get Hello that is right positioned.
Adding the form without the inner divs does not change it.
Basically your having conflicting divs.

Jon
 
J

Jukka K. Korpela

Scripsit Kavok:
<?xml version="1.0" encoding="UTF-8"?>
Click to expand...

Please post a URL, not copy of markup. Read the group for a few days and
you'll learn why. In this case, for example, it is impossible to know from
the copy of markup whether the line break in "vertical-align" was added by
your newsreader or an error on your page itself.
I'm trying to get two labels to text-align:right inside of a div, its
not working. Sad
Click to expand...

So sad. But why don't you post the URL of a real example? The label element
is useless without an associated form field element.

Besides, what's the point in playing with absolute positioning? You might
have encountered a genuine Firefox bug that is triggered by absolute
positioning, but even without that, it would be best to consider a simpler
approach than three nested absolutely positioned elements.

After posting the URL of a real design and explaining what you are really
trying to do, you might - while waiting for useful answers - solve some
_real_ problems that you have created, such as the use of 11px font size for
crucial information. Remove all font size settings at least until you
understand how font sizes work on the Web and for the users of the Web.
The document when run through the w3c validator is valid xhtml 1.0
strict (with the exception of no matching input fields for the
specific labels).
Click to expand...

Either it's valid, or it's not valid. But that's simply the formal side of
the matter.

Besides, if you check the Firefox error console (in the Tools) menu, you'll
see three syntax errors in your _CSS code_.
 
D

dorayme

Bergamot said:
How rude.
Click to expand...

Maybe, maybe not. I'd say not by the general blunt standards on
NGs.

OP wants to know what is wrong with his code. There is a human
need after one has put in some effort, and gotten a problem to
pinpoint the least change that will make it good in one's own
eyes. Apart from this, I personally bookmarked Adrienne's url in
case I ever needed it. Btw, JK basically said what really needed
to be said.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align img inside nav tabs section 5
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2
SendGrid email issue in responsive Gmail 1
Interfering CSS 1
Survey details won't go through using php, ajax, Mysql 0
Positioning CSS components 1

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 361

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top