|
|
Posted by Jon Slaughter on 04/12/07 06:02
"Kavok" <cjc.brimd@gmail.com> wrote in message
news:1176330245.577047.227940@n59g2000hsh.googlegroups.com...
> <?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?
>
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
Navigation:
[Reply to this message]
|