Ever since I added a little CSS to my site many of my pages no longer work correctly. Every 2 or 3 months I get the itch to try to fix them but I never seem to be able to find a solution that actually works leading me to conclude either (1) CSS just doesn’t really work for anything but really basic layouts or (2) I really don’t know CSS well enough. It’s probably more (2) but I tend to believe (1). (3) would be that my site layout sucks but lets skip that option for now.
So, here is a challenge for all your CSS advocates. Can you make my site work in CSS? Note: You don’t have to reproduce the entire site or even individual pages, you just need to send me some HTML + CSS that duplicates the basic design decisions of this site.
Here there are:
Front Page (http://greggman.com)
1) the page is basically never wider than 1026 pixels but will scale smaller if the window doesn’t fit 1026 pixels. On the other hand, it will never scale smaller than a certain amount (center column appox 350 pixels)
2) The banner size matches the size of the scaled content (front page only)
3) the left, blog and right columns are 147pixels, 130 pixels and 140 pixels respectively.
4) if the content in any column does not fit the size specified that column scales to fit (and all parts of the column must scale to match)
Content Pages
1) On content pages, the center column is 512 pixels wide but will scale to more if the content is wider than 512 pixels. All areas much match in size.
2) The content on content pages can be nearly any HTML (little or no or css is used inside the content currently and I’m not going to go through and add it to 1000+ pages)
Of course it goes without saying that the solution must work in IE5, 5.5, 6.0, Mozilla, Firefox, Safari and Opera.
To give you some examples. I couldn’t get any of the pages to work with 100% CSS. The biggest problem is getting the various areas to scale to the largest size.
Problem #1:
Here is 1 column, 3 divs, width set to 100 pixels, second div has content that takes more than 100 pixels
| CSS based | Table based | |||
|
normal content
contentthatistoowide
normal content
|
|
Notice the table adjusted all 3 areas to match the largest area. In IE the wide content area stretched to fit but the other 2 didn’t making it really ugly. In Firefox the wide content area didn’t stretch to fit, the content just spills out, also ugly.
Now of course I used 3 separate divs only in the div case. Better might be to make a surrounding div, set its width to 100 pixels. Inside put 3 divs with their width set to 100%. According to the CSS manual a width setting of 100% is a percent of the width of its parent.
Well, you can see the problem. In IE the two divs with normal content did NOT expand to 100% the width of their parent even though the parent’s width was clearly expanded to fit the large child div. In Firefox nothing expanded. The parent is still 100 pixels, all 3 of the divs spill out and the wide content spills out of its div. BAD BAD BAD!
Currently I solve that problem by just not using divs on my site for those kinds of things and instead sticking to old fashioned tables.
Problem #2
As far as I know Firefox displays this page correctly where as IE does not. In IE, the right border of the middle column is missing. So far the only way I’ve found to get that to work is just to switch back to 100% tables.
If you know how to get all this to work with CSS I’d would love to hear how. Note that I don’t want to hear how I should get my page to validate unless you can show me a validating page that fixes the problems. As far as I can tell I’d made several small samples that validate and they still show all the same problems.
You might find this useful:
http://glish.com/css/
I’m working on some CSS stuff now, and I’ll try and avoid tables wherever possible, because I’m really into trying something new instead of reusing the old HTML hacks.
Thank you for the suggestion.
I tried all of those a while ago. None of them actually work. Or more specifically all of them break in the cases mentioned above
If you look at this page you’ll see that unlike my page each column has only one border. If your content doesn’t fit any one column the CSS breaks. Also as soon as you put a border around sub sections in each column like I have then as soon as any one area is a little too wide the whole thing breaks.
Basically what you have to do is build the site and then always make sure your content actually fits. That’s too much work. Obviously I understand if I type some really like word like http://www.bozotheclownforpresident.com it could break my layout but if I post some picture or something and it’s 10 pixels too wide I’d perfer my layout still look okay. unfortunatley I can’t seem to get it work with CSS.
Note that that long URL above was auto cut by my site software to try to prevent things like this.
CSS IMO should have added a CUTWORDS: true; option to force at least text content to fit inside a particular box. Unfortunately it doesn’t. But even if it did it wouldn’t conver images.
Like I said, obviously I don’t expect CSS to handle all cases but if your content is just a little off it would be nice for it to do something not ugly.
I sadly think that if you want to go table-free you’ll have to compromise by changing your design a bit. CSS doesn’t make it easy to make separate elements the same width while still having width adapt according to content.
You should perhaps do a CSS redesign contest instead of this challenge of making the current layout (made with HTML tables in mind) work without tables. Just an idea!
I’m certainly open to it. The only musts are I don’t want to have to redo any art so I’d want to be able to use the same banners, thumbnails, and icons.
Another is that pages formatted to work correctly with in a 512 pixel content column continue to work. One of the problems with the standard align=”left|right” thing for pictures and tables is that their position is dependant on word wrapping and font size so if the font gets too small or the column gets wider then the images on pages like this will start overlapping.
For now though instead of all that work I’d just like to get that page display correctly in IE again. In other words to get the right border on the middle column to appear.
It’s sad to me that CSS is still so broken. People have done amazing things with it but they fit in the small box of things CSS was designed to do instead of the much large box of things we’d like to do. They are also still too many hacks. If CSS is really supposed to seperate content from presentation then things like these CSS dropshadows should work without the extra divs. If CSS really seperated content from presentation then all you’d need is <img class=”dropshadow” src=”mypic.jpg” />
If you’re having a problem with text going outside of the box it’s supposed to be in, you could always try overflow: hidden; …
CSS “Cascading Style Sheets” Lessons – web design lesson – - Web site : http://css-lessons.ucoz.com/index.html