homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Design did not work with CSS
Had to go back to HTML table hack

 3:36 pm on Jul 30, 2002 (gmt 0)

Just recently I had to write the code for a design our designer produced. Well, first I thought I could do it with clean HTML and CSS.

But no.

I had to go back to the old HTM table hack.

But only because our lovely browsers aren't up to the task. So there's one or two things I learned from this:

1) If a designer with no html/css knowledge designs a site, you might be in trouble if you're a coder.
2) You get into trouble only because our browsers aren't up to the task.
3) Stay cool, there'll be a time when CSS2 is no problem anymore. As an alternative, you might want to consider killing the designer with no html/css knowledge.


Anyone else having experience with beautiful but impossible designs? What are you doing in such cases?



 3:38 pm on Jul 30, 2002 (gmt 0)

Hey, let's see the problem code! Bet you could do it in css....



 4:06 pm on Jul 30, 2002 (gmt 0)

My browser jsut crashed after almost finishing a reply :(

Ok, again:

That's the requirements:

  • Design a box with a 1px blue border
  • The two corners on the right are slanted, 45 degrees
  • The corner has two rows, divided by 1px blue line
  • The top part has a light blue background
  • Text in the top part is vertically aligned
  • Text is no closer than 2px to the border

Like this:




How would you approach this? I ended up with nested tables, three gif (the corners and a blind gif), to make it work in IE 5 and up, Gecko browsers (Mozilla, Netscpae 6/7) and Opera. Design does not need to be perfect in Netscape 4.


 4:07 pm on Jul 30, 2002 (gmt 0)

Sorry a mistake:

  • The box has two rows, divided by 1px blue line


 5:08 pm on Jul 30, 2002 (gmt 0)

Fixed width and height divs: That kind of thing is tough though because if you gotta put text in it then even if you put them at pixels it's gonna move those divs.

Same things happen with tables of course though so you may have little more truouble.

Approach it the same way you did with tables: just use divs. When you've go something working (or kinda) post it and we'll all get to play ;)



 5:48 pm on Jul 30, 2002 (gmt 0)

Well, you know, I've found getting CSS-P to work at all as expected in MSIE 5.0 is hopeless.

All I want is a standard layout with a header across the top of the page, a navbar down the side, and, please, no horizontal scrolling.

Hopeless, unless I add so many hacks I end up with twice as much code as I did with tables. It's not pretty, and personally, I think it's going to take another two years before we can really use CSS the way it was designed.


 7:44 am on Jul 31, 2002 (gmt 0)

does it have to be fluid or fixed?


 8:15 am on Jul 31, 2002 (gmt 0)

If a designer with no html/css knowledge designs a site, you might be in trouble

A designer who doesn't know code - I've suffered that one as well.

Here's what I don't get. How can any designer or artist NOT take the time to learn something about the qualities of their medium? If architects worked that way our buildings would fall down around us on a daily basis.

Design of any kind is always a trade-off between pure ideal and real world possibility. You want to use that out of gamut color to create a powerful magazine ad? Then the magazine must be willing to use an extra ink color in their production run, and the advertising company must be willing to pay for it.

Does the designer want a beautiful image with a lot of subtle shades of gray, but want to print it on newsprint? Of course, that's ridiculous.

No decent designer would ignore the output medium in their design process - at least in the print world. So why do "pure design" web folks sometimes expect the web to accommodate anything they can put together in Photoshop?

All design requires trade-offs. But more than that, learning something about any medium also OPENS doors. It suggests design possibilities that would never have occurred to a person before they learned about how the medium works.

Textures of various papers suggest charcoal techniques, or the qualities of a ceramic glaze invite new design potentials for a vase.

The web's no different. I think that coders and developers have the RIGHT to ask for give and take with the designer. There should be no gods and goddesses in this process, only a team that needs to create a site that functions well.



 8:28 am on Jul 31, 2002 (gmt 0)

All I want is a standard layout with a header across the top of the page, a navbar down the side, and, please, no horizontal scrolling.

Have you played with the layouts at www.bluerobot.com?

I had to tweak them a bit (or maybe I didn't -- I was knew to CSS and did a lot of playing around).

I never did completely eliminate IE5 horizontal scrolling, but it ain't there in most cases.


 9:51 am on Jul 31, 2002 (gmt 0)

@tedster: If only my designer gets to read your writing!

Anyhow, here's the good news: one night later, I found a way to make it work in both IE 5.x and Gecko, it does also degrade reasonably in Netscape 4, but still looks like *"&% in Opera. Since it's an intranet project and nobody but me is using Opera, that doesn't matter.

So here's the code. Imagine the pictures that are needed as 6x6px gifs, like this:

W stands for white
B stands for blue (#039)
X stands for transparent



And here's the html:

<div class="portlet">
<div class="titelzeile"><div class="eckeobenrechts"><img src="ecke_oben_rechts.gif"></div><p class="title">Lorem ipsum</p></div>
<div class="content"><p>Lorem ipsum...<br>Dolor sit alem...</p><div class="eckeuntenrechts"><img src="ecke_unten_rechts.gif"></div></div>

And here's the css (<link>):
div.portlet{border:1px solid #039;width:300px;}
div.titelzeile{font-weight:bold;font-size:11px;background-color:#ced6e9;color:#039;border-bottom:1px solid #039;}
div.content p{margin-bottom:0;}

Some more CSS (@import):
margin:-1px -1px 0 0;
margin:-1px -2px 0 0;
body>div.portlet>div.titelzeile>div.eckeobenrechts{margin:-1px -2px 0 0;}

div.eckeobenrechts img{

margin:-4px -1px -3px 0;
margin:-4px -2px 0 0;
body>div.portlet>div.titelzeile>div.eckeuntenrechts{margin:-4px -2px 0 0;}

div.eckeuntenrechts img{

As said, beautiful in IE 5.x and Mozilla/Netscape 6/7, ugly in Opera 6, degrading in Netscape 4, not knowing what that looks like in IE 6.

So my problem is almost solved: only one browser worth checking in (Opera 6) is not up to the task - or I am still ("a bit") wrong with my CSS.

But this I can take. The html code amount is about 20% of the table hack which works in all browsers mentioned above.


 6:57 pm on Jul 31, 2002 (gmt 0)

Ha! So in fact the ignorant designer led you to stretch your abilities and learn something. Perhaps you should thank him/her!


PS - the best thing about the internet is that people can't throw things at you through it yet.


 8:02 pm on Jul 31, 2002 (gmt 0)

All I want is a standard layout with a header across the top of the page, a navbar down the side, and, please, no horizontal scrolling.

Yeah, I don't get that. That's the easiest thing you could possibly attempt....?



 7:00 am on Aug 1, 2002 (gmt 0)

Well, basically, if it works in one browser, it doesn't work in any other. I'm kind of working my way through it, and nesting stuff I feel really doesn't need to be nested, but I've found some really, really annoying stuff along the way. In short, if I type in a text-book example, I have to tweak it to get it to work.

So far I have encountered the following problems:

1. If you define an absolutely-positioned div and define the positions of both left and right properties, MSIE will either ignore or miscalculate the right property. Same with top and bottom.

2. If you define a div with an overflow: scroll property, which is potentially really cool, you get both vertical and horizontal scrollbars, which looks ugly, and if you have a long paragraph in that div, you have to scroll sideways for miles. MSIE allows you to define overflow-y: scroll, but no other browser does, so they default to overflow: visible; CSS to replace <frameset>s? Not yet.

3. The containing element for the entire content of the website is not the document, but the viewport. I can see the logic in that, actually, but in some cases it's not what you want. Having said goodbye to enclosing an entire page in a <table>, I now find myself nesting entire pages in a <div>. Saves a bit of typing but not much else. (XHTML1.1 Strict demands everything on a page is enclosed within block-level elements. Hmm.)

4. Mixing relatively and absolutely positioned elements is a potential minefield. You can end up with something Escher would have been proud of, if you're not careful. That's really just a question of careful coding, of course, but the potential to make a pig's breakfast of a page is greatly increased.

I'm not against CSS, I think it's the best thing the web has come up with in the last few years. I just can't wait until browsers support it properly; I'm getting ready to drop NS4 workarounds, only to take up MSIE5 workarounds instead.


 4:02 am on Aug 9, 2002 (gmt 0)

In regard to the ranting about horizontal scrolling, I offer a humble solution which I have used on numerous occasions.

body {

overflow-x: hidden;


This should take care of IE, which leaves Mozilla 1.x, which already doesn't display scrollbars where they aren't needed.


 4:06 am on Aug 9, 2002 (gmt 0)

Almost forgot-

If you want a div to scroll its content, but don't want "ugly scrollbars to show up," try setting the overflow to auto.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved