I Need A Css Guru!!!!

[bryce4president]

Does anyone out there know CSS very well? I'm trying to create a scrollabel table with a fixed header. When I google I get some good examples, and some that even work (on the site i find that is), then I copy the css, the javascript, and apply it to my page and it chokes on itself. Its sooo close in firefox and really close in IE too.

Anyone have any knowledge of degredation?

[jamief]

Re: I Need A Css Guru!!!!

zip up what you got and I give it a shot.

jamie

[bryce4president]

Re: I Need A Css Guru!!!!

I sent an email off to the guy who wrote the .css

Here is all my code and my .css

don't worry about the two javascripts they aren't important to the function of the page, one just puts a date and the other one makes alternating rows have different colors in the table.

I'll attach the screen shots too so you can see what is happening.

This is the Firefox version


This is the IE version


This is my .jsp
mypage.txt

This is my .css
scrolltable.txt

As you can see in IE the bar goes as tall as the table, it doesn't stay in the scrollable area, and there is some extra space to the right of the table before the scroll bar. This is seen in the Firefox version as well but it is worse, almost like it is another cell. There is only supposed to be 5 cells, not six. So it cant be a cell and I have no idea why the scrollable table won't extend itself correctly.

I've played with this all day long and i just can't see what it could be.

thanks for any help.

[BenThurley]

Re: I Need A Css Guru!!!!

We have a scrollable table feature in our renaissance framework. I'm fairly proficient at CSS and I had no end of grief trying to get it to work. It's a piece of pi$$ in firefox, from what I remember you can just set the thead section to position fixed and it works. Of course IE is a different story, anything that worked in one seemed to fail in the other.

Lucky for us that our customer is using this as an Intranet application. We made it work for IE and put a check in so that firefox would just display a regular table. If you google it you will see numerous solutions to this problem but all the ones I found we're in some way flawed. I remember having an idea based on a mix of existing CSS and JavaScript solutions. Unfortunately with the usual time constraints I had to stick it on the back burner. It just wasn't that critical to us that it work cross-browser.

I'd be interested to see if you do find a solution.

[bryce4president]

Re: I Need A Css Guru!!!!

I have also seen many solutions to this problem on Google, and you are right, they are all flawed in their own ways. One way fixes one flaw but ignores another, and then someone will fix that flaw that was ignored but then ignore the flaw addressed by the first one. Its just stupid circles. I tried that THEAD with position fixed but it still doesn't seem to work. It does, but I have this extra space out at the end. My TBODY isn't expanding out to the 100% like it should, and that is what is screwing me up. I'm going to play with it for one more day, then I'm just gonna make 2 tables and do it that way.

I really think there must be some way to do it with 1 table and css, without having to use javascript. Besides, my page is heavy enough without having that overhead added on page load.

[BenThurley]

Re: I Need A Css Guru!!!!

Ah yes! Your last comment reminds me how I thought it could be solved!

There are a lot of "two table" solutions but they all rely on fixed width columns. They need this so you can get the header widths to match the widths of the data cells. I was trying to come up with a solution that we could include in our framework, therefore, couldn't assume fixed widths. My hypothesis was to use CSS and two separate tables and then have a JavaScript function that runs on the onload event to sort out the column widths. The function would scroll through the columns in both tables and set whichever had the smallest width to the value of the larger width.

I think it should work. It was just that by this point I had already wasted a couple of days and go-live was rapidly approaching!

I don't know if it will be any help. I found it quite annoying that people we're proclaiming they had a solution, making it out to be easy, when in fact they had missed something. I'll make no such claim. This is @#%@#%@#%@#% hard!

Good luck

[bryce4president]

Re: I Need A Css Guru!!!!

HAHA. Well I CAN assumed fixed width. Which makes the 2 table solution an option. The problem solving programmer in me is still wanting that one table solution. And the thing about it is that I have declared all my columns a fixed width in the CSS but the TBODY isn't following my orders. The one site that I copied my CSS from has a working example. It works great on his site, so I just copied the CSS out and tried to apply it to my own.

Now, all his CSS is included in the HTML, and all mine is externalized and included. But that should not matter at all. Like I said, I'll play with it a bit more. Here is the link to the working example I found...

http://www.imaputz.com/cssStuff/bigFourVersion.html

[jamief]

Re: I Need A Css Guru!!!!

Thats also the one I downloaded...but I just have too much of a life to work with it as of yet

Im getting bad....... But its on my list!



jamie

[bryce4president]

Re: I Need A Css Guru!!!!

Its ok. By the time you work on it I'll have used the 2 table method, in fact I think I'm going to try and implement that now. But I'm still going to be working on this single table solution. This whole thing has taught me a TON about CSS and browser degredation and the different hacks that are out there for different browsers and their different versions. All I have to say is that IE is aweful. I hate it more today than I did when I switched to Mozilla about 4 years ago.

[BenThurley]

Re: I Need A Css Guru!!!!

I'm with you on the single table solution. It's the holy grail of fixed heading tables. If you find it then patent it quick!

You've raised my interest in this again. I just wish I had the time to look into it.

[bryce4president]

Big Announcement!!!!!

I have the single table solution working in Mozilla. The entire time I was trying to figure out why there was this extra cell at the end of my table when I didn't program one. Well if you look at my page code you will notice that at the bottom of code where I'm supposed to be doing a </td> i acually had a <td>. So I had two open td tags with no closing. Since this is actually legal, websphere didn't catch it. Only when I was trying to do a hard coded example today using attributes that are well liked in the strict version of html did it throw and error telling me I had no </td>. Low and behold, I added my '/' and it automagically worked.

The code I posted will work 100% for mozilla. Feel free to use it at will. The only bug in IE is that the scroll bar still goes the height of the table, not just the TBODY. I'm not sure if this can be fixed or not. Atleast not in 6.0 and <. I haven't tried in 7.0 yet. Frankly I don't want to, buuuut, I might have to. who knows.

In the near future I hope to try and solve the IE bug but it will have to be on my own time as this is now functional and acceptable for my job. If anyone else decides to play around, please post your results.

[gcraill]

Re: I Need A Css Guru!!!!

Here is the link to the working example I found...

http://www.imaputz.com/cssStuff/bigFourVersion.html

This doesn't display in IE7, but it does with Firefox. Therefore your page may also experience issues with IE7 ???

GC

[bryce4president]

Re: I Need A Css Guru!!!!

This doesn't display in IE7, but it does with Firefox. Therefore your page may also experience issues with IE7 ???

Well this is intercomany and we use IE6 here. Thank God our minions up the hall aren't good at keeping on top of the "latest and greatest".

I hate IE even more today than yesterday. with that said, it should be outlawed and mozilla made the dictator of web browsers.