Page 1 of 1

CSS TD emulation

Posted: Fri Aug 11, 2006 5:35 pm
by alex.barylski
I am trying to emulate 2 table TD fields using DIV's using the below code...

Code: Select all

<div style="width: 100%; height: 20px">
  <div style="border: 1px solid red; display: inline; width: 50%; text-align: center">
    <strong>Text</strong>
  </div>
  <div style="border: 1px solid green; display: inline; width: 50%; text-align: right">
    sdfsdf
  </div>
</div>
When I added the fixed height: 20px to the container DIV it made a huge difference in making the DIV's stay inlined, but still, under IE it occasionally breaks the second DIV on a new line...

It doesn't even work under firefox??? Mind you I'm just using the above that's it, not a proper HTML document...

Anyone care to shed some light on this subject for me???

Posted: Fri Aug 11, 2006 5:50 pm
by Benjamin
Besides the fact that it's not valid to specify the width on inline elements, It's probably your border.

http://en.wikipedia.org/wiki/Internet_E ... _model_bug
http://tantek.com/CSS/Examples/boxmodelhack.html

Posted: Fri Aug 11, 2006 6:10 pm
by alex.barylski
Interesting...

So, how then, would I do the above but in CSS??? :?

If the idea I had was not valid XHTML...I'm at a complete loss...

At first I thought of using a UL/LI combo, but I'm not sure thats ideal for controls...

Ideally I want a toolbar, which looks something like:

Code: Select all

<td width="100%" align="center">Click here to register</td>
<td>email</td>
<td><input type="text" size="25" /></td>
<td>pass</td>
<td><input type="password" size="8" /></td>
<td><input type="submit" value="Login" /></td>
In that it takes up all width available, flush with it's container elements and the first TD is variable width as the message inside of it changes...

I don't like UL/LI because they often break in my designs onto new lines, which throws everything off, especially if I don't indicate the background-image: repeat-y only...

Is there a way to accomplish such a toolbar using DIV's? is it better to use LI???

Thanks again...

Posted: Fri Aug 11, 2006 6:43 pm
by Benjamin
It has been argued that a form is considered tabular data, so using a table for it wouldn't be all that bad. If you want to use CSS, you could use a list with some interesting css.

Code: Select all

<ul>
<li class="inpu"><input type="text" name="user_name" value="" /></li>
<li class="inpp"><input type="text" name="user_pass" value="" /></li>
<li><input type="submit" value="Login" /></li>
</ul>

You could then vertically align the fields by using padding. If you want some text in there as well, you could set the padding-left on the two input fields to something like 80px and then use a background image aligned vertically.

Code: Select all

li.inpu {
padding: 5px 5px 5px 80px;
background: url('images/username.gif') no-repeat 0 50%
}

li.inpp {
padding: 5px 5px 5px 80px;
background: url('images/password.gif') no-repeat 0 50%
}

Posted: Fri Aug 11, 2006 6:59 pm
by alex.barylski
I'm not sure I follow...

Instead of using LABEL's you want me to use IMAGES? :?

It's multiple language supported so that wouldn't work as it's more work keeping multiple language files, never mind multiple language images...

Also, how does that solve the issue of the first TD consuming all remaining space...???

So it would be more appropriate to use UL instead of a DIV's?

I am sure I wish to use CSS over tables despite FORM data being tabular in nature IMHO anyways...

Posted: Fri Aug 11, 2006 7:03 pm
by Benjamin
Just throwing ideas at you. It may be hard to vertically center any text in a list item which also contains an input field. I suppose you could put the text in a seperate li though. In any case, if you don't want to use a table, a list would be the way to go.

Posted: Fri Aug 11, 2006 7:23 pm
by nickvd
Give this a try... The colours are only for reference and can be changed/removed... there is a small bug with the message list item, it wont stretch to 100% height for some reason, way too lazy to futz with it right now ;)

Code: Select all

<div id="toolbar">
   <ul>
      <li id="msg">Click Here To Log In</li>
      <li><label for="email">email:</label><input type="text" name='email' id='email' size="25" /></li>
      <li><label for="pass">pass:</label><input type="password" name='pass' id='pass' size="8" /></li>
   </ul>
</div>

Code: Select all

div#toolbar {background: red;}
div#toolbar li#msg {background:yellow;}

div#toolbar li#msg {
   text-align:center;
   float:left;
   width: 50%;
}
div#toolbar ul {
   text-align:right;
   margin-left: 0;
   padding-left: 0;
   white-space: nowrap;
}
div#toolbar li {
   display: inline;
   list-style-type: none;
}
div#toolbar label {margin:0 10px;}

Posted: Fri Aug 11, 2006 7:35 pm
by alex.barylski
Edit: nickvd I used what you supplied modified it a bit and it works good enough, still not quite like tables, as the width is always off, but I've figured out how to prevent the damn thing from breaking onto new lines, etc...and the first item text is centered and resizes accordingly to adjust to availble space...

Nice... :)

Posted: Sat Aug 12, 2006 1:33 am
by matthijs
Is there a way to accomplish such a toolbar using DIV's? is it better to use LI???
I think the most important thing is to make the form accessible (by using labels correctly and going for good seperation of markup and design. Just replacing td with div if you don't use labels won't do much accessibility-wise.
So it would be more appropriate to use UL instead of a DIV's?
Personally I would try to use ul. For the design with css is shouldn't make a difference, as you can layout an ul and li the same way as a div (display:block;float/inline,width, height, etc).

nickvd's solution seems ok. Hockey, you want to share what you modified? maybe the problems with the width can still be solved?

Posted: Sat Aug 12, 2006 2:28 am
by RobertGonzalez
Hockey, set your margins on the containing div to auto or to 1px. This will make the containing div occupy the entire width of the screen. Then set the float to left on the left span element and the float to right on the right span. From your original code:

Code: Select all

<div style="width: 100%; margin: 0 auto; padding: 10px 0;">
  <span style="border: 1px solid red; width: 50%; text-align: center; float: left; font-weight: bold;">Text</span>
  <span style="border: 1px solid green; width: 50%; text-align: right; float: right;">sdfsdf</span>
</div> 

Posted: Sat Aug 12, 2006 3:16 am
by matthijs

Code: Select all

style="border: 1px solid red; width: 50%;
That will never fit. 2x 50% + 2x 2x1px is 100%+4px. Even 2x 50% will often give you trouble due to rounding errors at certain screen sizes. Normally I would use 49.9% therefore. Or even less because most of the times I need a gutter anyway.

Posted: Sat Aug 12, 2006 5:06 am
by Oren
Haven't read all the posts here, but this may be of interest: http://www.456bereastreet.com/archive/2 ... _with_css/

Posted: Sat Aug 12, 2006 11:59 am
by alex.barylski
matthijs wrote:
Is there a way to accomplish such a toolbar using DIV's? is it better to use LI???
I think the most important thing is to make the form accessible (by using labels correctly and going for good seperation of markup and design. Just replacing td with div if you don't use labels won't do much accessibility-wise.
So it would be more appropriate to use UL instead of a DIV's?
Personally I would try to use ul. For the design with css is shouldn't make a difference, as you can layout an ul and li the same way as a div (display:block;float/inline,width, height, etc).

nickvd's solution seems ok. Hockey, you want to share what you modified? maybe the problems with the width can still be solved?
Hmmmm...accessability...well that is the point behind using CSS, that and it's less HTML to filter through and will load faster of course :P

Well I dropped the labels in favour of just entering a psuedo-email addy in the TEXT and a fake password in teh PASSWORD INPUT fields...

I assume that screen readers would announciate the TYPE="text" and possibly the name, in the case "email and pass"???

Can anyone verify whether it's a MUST to use labels or can I get away with the above assumption???

Edit: I finally got my toolbar to look and feel the way I wanted it to...so now it's onto my next HTML segment :P

Posted: Sat Aug 12, 2006 12:51 pm
by nickvd
Can we see a screenie?

Posted: Sat Aug 12, 2006 2:09 pm
by matthijs
Can anyone verify whether it's a MUST to use labels or can I get away with the above assumption???
I hink if you are going to digg into all the guidelines and interpretations, you'll be busy for a few days to find a definative answer to that question.
In Web Accessibility (Thatcher et al) they do recommend using labels for form inputs. It is also a guideline in WCAG 1.0. However, according to the authors of the book, the new WCAG 2.0 (still not definative) might not be that explicit.

I tried to find the answer on the section508.gov website, but didn't succeed (how is that for accessible?)

But, even if you would comprehend the guidelines and find out whether or not you get the dead penalty for not using labels, I think it isn't too much work to use labels. Even if screen readers could do without in some situations, better safe then sorry.