15 replies to this topic

[Saint_Michael]

Well I was bit off on the layout but the concept your going for was the same, but as for the widths you would have to set up individual styles to them in two different ways. Using trufusions example all you have to do is set up the CSS for Col1 Col2 Col3 which would look something like this:

ul.col1 li {
width:35px
}
ul.col2 li {
width:65px
}
ul.col3 li {
width:100px
}

That way it would be universal and cute down on the work by doing them individually like this:

<li style="width: 65px;"> Content here</li>

Either method is effective but the first options cuts down on the clutter in the html, and if you need to make changes on the fly you can just do it from one file instead of doing it over several files. Of course if you feel very adventurous you can set up your tables through ajax, this website gives quite a few examples of different table set ups that can be used.

[sonesay]

Sorry to bump up an old thread but I've found a problem with IE7 and this solution. IE 7 does not support display:table-cell (one of manythings IE 7 really sucks at). The only way to get <li> elements displaying in the same line similar to the effect of display:table-cell solution in this post is

display:inline;

But there is still another problem in IE7.

li.col1 {
width:120px;

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.
If anyone has a solution to the width spacing for 'display:inline;' method please share.


edit:

Ok I'm still looking for a suitable sultion that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

Attached Files

•  displayerror.png   402.61K   4 downloads

Edited by sonesay, 30 January 2008 - 10:48 AM.

[truefusion]

sonesay, on Jan 28 2008, 10:58 PM, said:

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.
If anyone has a solution to the width spacing for 'display:inline;' method please share.

Width does not work with all inline-level elements.

sonesay, on Jan 28 2008, 10:58 PM, said:

Ok I'm still looking for a suitable solution that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

My code only hides the "inactive" ones by default, but i am unsure on what to tell you for the solution. If Internet Explorer lacks, then it lacks. You could try to persuade visitors to switching to a better browser. It's interesting that IE7, though it had a noticable improvement with CSS, lacks such an option. I am unsure of any IE CSS hacks (there may not be any) for this. I'm quite sure i can turn my tab script to use tables instead of divisions, even if it creates unnecessary clutter.

[sonesay]

Thinking it over last night as I went to bed I think It would be much easier to use tables to structure the output. It will get clutered with tags but the upside is no futher tweaking of the CSS tabs would need to be done to accomodate the extra inner divs.

Thanks for your input truefusion.

[iGuest]

Trying to center text in HTML Table using CSSAlign Text Column Without Tables Using Css

First let me explain what I need:

Below is all the items I have in a given single Table Cell.

Host Name: Mgmt MAC Address: Mgmt Interface:hme0fjgi0fjgi1fjgi3 Mgmt IP Address (If Static): Jumpstart Network:192.168.2.0/28192.168.3.0/28 OS to Install:Solaris 9Solaris 10OpenSolaris Platform:Sun8USun8Mx86 Swap Size: Reserve Partition: MB Global Zone: Tivoli Agent: OpsWare Agent: Oracle DB Server: DMZ:

 What I want to do is having looking like this:

Host Name: Mgmt MAC Address:   Mgmt Interface:hme0fjgi0fjgi1fjgi3 Mgmt IP Address (If Static):   Jumpstart Network:192.168.2.0/28192.168.3.0/28   OS to Install:Solaris 9Solaris 10OpenSolaris   Platform:Sun8USun8Mx86 Swap Size:   Reserve Partition: MB Global Zone: Tivoli Agent:   OpsWare Agent:   Oracle DB Server:   DMZ:

That what I want it to look like. Any suggestions?

reply by Phillip

[iGuest]

align-text-column-tables-cssAlign Text Column Without Tables Using Css

I use the following to line up the text boxes. Your text line " Mgmt IP Address (If Static):" is the longest so you need to expand width accordingly if you want them all lined up.

CSS: 

label span {  float: left;  width: 10em;}

<label for="bmail"><span>Your Email:</span></label> <input name = 'bmail' size=35 value='' /><br><label for="bname"><span>Your Name :</span></label>   <input name = 'bname' size=35 value=''><br>

-reply by Richard Wimberly