Bug in rendering of INPUT and A tags ?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Bug in rendering of INPUT and A tags ?

hv @ Fashion Content
(Crossposting from general as this seems to be css layout related)

So far Firefox/1.0.7 has been a superb browser, but today I got quite stuck
on a page layout that I just cant get to work. Tested it on 1.5 as well, and
it seems to have the same issue.

http://www.fashioncontent.com/Home%20Test.htm

I can enter data in the right side login form, but not in the left side
form.
Generally no matter how I reorder the left side only the first field/anchor
becomes enabled.

Something seems to go wrong after the first page link on the left side. The
links dont work either!

What might be wrong?

And.... Why will input fields get the proper height only when I remove the
DOCTYPE

Henrik





<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" >
<html><head>
<title>Administration - FashionContent.com</title>
</head>
<style>
html,body { height: 100%; border: 0 none; }

#outer {
height: 100%; overflow: visible; position: relative;
border: 0px; padding: 0 0 0 0; margin: 0 auto;
border-collapse: collapse;
}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; width:100%; height:
550px;text-align:center}

#whiteborder {
 width:920px;height:548px;text-align:left;
 border: 1px dashed white;
}
#whiteborder[id] { position: static; }

#whitecontent {
  position: relative;
  background:purple; border:1px transparent; padding: 8px;
  filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
  text-align: left;
  height:545px;
}
#whitecontent[id] { position: static; height:530px; }

#leftside {
 position:relative; float:left; text-align:right; padding: 10px;
 top:50px;
 width:150px;height:470px;
 border-right: 1px black dashed;
 filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
}
#rightside {
 position: relative; color:white; left:10px; top:60px;
width:710px;height:470px; padding: 0 10px 3px 0;
 filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
}
#rightside-scroll {
 position: relative; color:white; left:10px; top:60px;
width:720px;height:470px; padding: 0 3px 3px 0;
 filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
 overflow: auto; overflow-x: hidden; overflow-y: scroll;
}

#captionbox {
 position: absolute; top:-30px; width:540px;height:75px;
 background: transparent; text-align:right;
 z-index:1;
}

p {
font-family:Verdana,Georgia,Helvetica;font-size: 12px;
}

A, A:visited { font-weight: bold; color: black; text-shadow: white 2px 2px
3px white; text-decoration: none; }
A:activate, A:hover { color: white; text-decoration: underline; }

.test {
 margin: 0; padding: 0;
 border: 1px solid #00FF00;
}

.seethrough { filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80; }
.footer { textalign: center;color:white;
font-family:Verdana,Georgia,Helvetica; font-size: 9px }

/* the rest is old stuff, replace or remove ! */


.navigation-bar {
 align:right; font: Tahoma 11px bold;
 color: white;
 padding-left:45px;
}

.navigation-bar a, .navigation-bar a:visited, .navigation-bar a:activate {
 font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px;
font-weight: bold;
 color: white;
   padding:1px;
   margin:3px;
text-shadow: white 2px 2px 3px white; text-decoration: none;
}

.navigation-bar a:hover { color:red; }

.navigation-bar-input {
width: 80px; height:20px; font: Tahoma 11px;
   padding:1px;
   margin:2px;
   filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
}

.navigation-bar-button {
height:24px; font: Tahoma 8px bold;
   border: 1px raised #00008B;
   padding:1px;
   background-color: 0xDDDDDD;
   margin:1px;
}

</style>

<body style="background: black
url(http://www.fashioncontent.com/background.jpg) no-repeat scroll
center; -moz-background-clip: initial; -moz-background-origin:
initial; -moz-background-inline-policy: initial;">

<div id="outer"><div id="middle">
    <div id="inner">
      <div id="whiteborder">
        <div id="captionbox"> <img
src="http://www.fashioncontent.com/fc-logo.gif"> </div>
        <div id="whitecontent">
          <div id="leftside">
              <span class="navigation-bar">
         <a href="http://admin.fashioncontent.com/Home.htm">Home</a><br/>
             <a
href="http://admin.fashioncontent.com/index.htm">BlingOn.com</a><br/>
             <a
href="http://admin.fashioncontent.com/contact.htm">Contact</a>
             <a
href="http://admin.fashioncontent.com/financial.htm">Financial</a>
            </span>
       <form method="post" action="j_security_check">
     User <input class="navigation-bar-input" name="j_username" type="text">
     Password <input class="navigation-bar-input" name="j_password"
type="password">
              <input class="navigation-bar-button" value="Login"
type="submit">


       </form>



          </div>
          <div id="rightside">
            <p>Fashion Content Ltd provides news and multimedia content on
mobile
              phones for the U.K. market. </p>
      <form method="post" action="j_security_check">
      User <input class="navigation-bar-input" name="j_username"
type="text">
      Password <input class="navigation-bar-input" name="j_password"
type="password">
                  <input class="navigation-bar-button" value="Login"
type="submit">
      </form>
          </div>
        </div>
      </div>
      <span class="footer">All content of this website &copy; copyrighted
2005 Fashion
      Content Ltd</span> </div>
  </div></div>
</body></html>


_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Re: Bug in rendering of INPUT and A tags ?

Boris Zbarsky
hv @ Fashion Content wrote:
> http://www.fashioncontent.com/Home%20Test.htm
>
> I can enter data in the right side login form, but not in the left side
> form.

The <div id="rightside"> overlaps most of the <div id="leftside">, so when you
click you're clicking on the rightside div, not the leftside.  I recommend some
z-indexing here.

> And.... Why will input fields get the proper height only when I remove the
> DOCTYPE

What is the "proper height"?

-Boris
_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Re: Bug in rendering of INPUT and A tags ?

hv @ Fashion Content

> The <div id="rightside"> overlaps most of the <div id="leftside">, so when
> you
> click you're clicking on the rightside div, not the leftside.  I recommend
> some z-indexing here.

Thanks for pointing that out!

I take it position:relative isn't the correct choice

>
>> And.... Why will input fields get the proper height only when I remove
>> the DOCTYPE
>
> What is the "proper height"?

I defined the class

.navigation-bar-input {
width: 80px; height:20px; font: Tahoma 11px;
   padding:1px;
   margin:2px;
   filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
}

So I would expect the input field to be 20 pixels high.

>
> -Boris


_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Re: Bug in rendering of INPUT and A tags ?

hv @ Fashion Content
I tried fiddling with z-index for leftside and rightside, but it didn't seem
to change things.
Tried position:static, but that didn't help either.

Could you explain what makes the two overlap? If I change left to 160px, the
right side gets a 160px gap

"hv @ Fashion Content" <[hidden email]> skrev i en meddelelse
news:dmo1ce$[hidden email]...

>
>> The <div id="rightside"> overlaps most of the <div id="leftside">, so
>> when you
>> click you're clicking on the rightside div, not the leftside.  I
>> recommend some z-indexing here.
>
> Thanks for pointing that out!
>
> I take it position:relative isn't the correct choice
>
>>
>>> And.... Why will input fields get the proper height only when I remove
>>> the DOCTYPE
>>
>> What is the "proper height"?
>
> I defined the class
>
> .navigation-bar-input {
> width: 80px; height:20px; font: Tahoma 11px;
>   padding:1px;
>   margin:2px;
>   filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
> }
>
> So I would expect the input field to be 20 pixels high.
>
>>
>> -Boris
>
>


_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Re: Bug in rendering of INPUT and A tags ?

Boris Zbarsky
In reply to this post by hv @ Fashion Content
hv @ Fashion Content wrote:
> I take it position:relative isn't the correct choice

Depends on what you want, of course.

> .navigation-bar-input {
> width: 80px; height:20px; font: Tahoma 11px;
>    padding:1px;
>    margin:2px;
>    filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
> }
>
> So I would expect the input field to be 20 pixels high.

Counting the borders and padding?  Or no?  In standards mode those are not
included in "height".

-Boris
_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Re: Bug in rendering of INPUT and A tags ?

Boris Zbarsky
In reply to this post by hv @ Fashion Content
hv @ Fashion Content wrote:
> I tried fiddling with z-index for leftside and rightside, but it didn't seem
> to change things.

What z-indices did you set?

> Tried position:static, but that didn't help either.

position:static on which?

> Could you explain what makes the two overlap?

The fact that floats are out of flow.

-Boris
_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout
Reply | Threaded
Open this post in threaded view
|

Solved: Bug in rendering of INPUT and A tags ?

hv @ Fashion Content
>
> What z-indices did you set?
>

I tried z-index:1 on leftside. Didn't work.

Right now I tried z-index:2 on leftside and z-index:1 on rightside. And it
worked :)

Thanks mate!


_______________________________________________
mozilla-layout mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-layout