18 replies [Last post]
LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

I admit to being a table hack but I'm working on a project page to try and fully understand all the hacks that must be done in order to move away from table design.

Here is my project page: http://www.wiregrassweb.net/css_project.html.

You can view and copy the source to your editor as the CSS is included with the page, all images are hot-linked to my website and I have documented what I have done and the problems encountered.

I must not be understanding how the hacks work as this page appears pretty close to what I designed in IE6. However, in FF2 and Opera9.1 it fails miserably.

In a nutshell, what I do not fully understand about the box model is how can a div collapse in FF2 when there is content inside the div? I believe if someone can clarify that, I can probably figure this out for myself.

The page does validate for XHTML and CSS.

Any assistance for this country boy would be greatly appreciated.

Just another old hacker impersonator!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

First, get rid of any and

First, get rid of any and all box model hacks. Never add stuff just for the sake of having it. In standards mode (the full DTD triggers it), even IE shows some good sense.

Second, use a strict DTD. There is no sane reason to author a new document using deprecated elements or attributes.

Third, lose the table. You do not have data that derive their meaning from x–y coördinates.

It wouldn't hurt to set your editor to a sane wrap, say 72 characters. Also, don't save tabs—convert them to spaces before saving (2 spaces per tab is good). Else a few levels of nesting indentions will eat up a lot of width. Nobody likes to h-scroll source either. Moving to html+css for your layouts will mean your documents will be semantic, well structured and more compact. Take advantage of that for human readability.

Quote:
In a nutshell, what I do not fully understand about the box model is how can a div collapse in FF2 when there is content inside the div? I believe if someone can clarify that, I can probably figure this out for myself.

Modern browsers do not enclose floats without your say-so. IE does because it gets it wrong. It's not a box-model issue. See enclosing float elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Just to add a footnote to

Just to add a footnote to what Gary has said; if possible try and loose the Hack terminology. It's somewhat of a mis-conception that moving from tables to using pure CSS-P is defined by having to hack the CSS rules for it to naturally work.

writing good valid CSS requires no hacks but does require a good understanding of how properties are meant to behave in order that one doesn't perceive a rendering contrary to expectation as being the fault of CSS and that one will somehow need to hack at the rules in order to force expected behavior. In reality certain browsers will demonstrate their own interpretation on a properties behavior in these circumstances we occasionally need to Filter specific rules to one browser or another but not to a great degree.

Gary interesting spelling of coördinates; Scandinavian ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Actually, it's valid in

Actually, it's valid in English, too. The umlaut indicates the adjacent vowels are to be pronounced separately rather than as one.

As to "hack", I take the word to mean an elegant solution to a vexing problem, eg., the Holly Hack, or the tripswitch hack.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

hack terminology

Sorry for the 'hack' term but being from an applications development background, we tend to use the term loosely. But I am an old 'hacker', being 58, as I did get into some systems via the pre-internet Arpanet which I shouldn't have been able to access. Hey, we were all curious in those days as to what we could do and couldn't do.

My term relates more to me in that virtually everything I know, I have learned on my own with only a few course in college from the early 70's and believe me, that information is pretty worthless now.

It's an interesting industry and I'm on the downside of my working life. But even though I am semi-retired and do work primarily for local people that I know, I want to try and be as professional as I can. Therefore, I ask questions of people who know the answers.

I appreciate your feedback.

Just another old hacker impersonator!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I understand the original

I understand the original derivation of the term 'Hack', but it is too loosely applied to the process of applying tricks to hide or show particular rules to one browser or another, often in a mistaken fashion where in reality simply a better understanding of the properties would avoid this practise.

Gary do we not generally prefer the term 'filter rules'?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Don't worry about the term.

Don't worry about the term. I've got a few years on you, myself. I know a hacker to be an amazingly brilliant hard/soft-ware engineer, not the script kiddie who assumes the title these days.

In css terms, consider IE's doubled float margin bug. Early on, you had to use an otherwise nice hack, "* html", to do something brutish; feed separate margin half-values to IE so when doubled they were okay, or use padding or a container for the float. Then Steve Classon found a totally unintuitive fix. An elegant solution to a vexing problem—a hack.

Just ignore these callow youths, such as Hugo. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh for the love of...... Oh

Oh for the love of......
Oh alright 'Hack' it is, I must have dreamed all the past posts where we all essentially agreed that we cared not for the term 'hack' as applied to CSS.

Ignore me I'm just a callow youth only just beginning my fast descent into the twilight of my coding years Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo wrote:<snip> Gary do

Hugo wrote:
<snip>
Gary do we not generally prefer the term 'filter rules'?

I don't. Maybe because I go back so far, but I like the term "hack" for its early on meaning.

Certainly many of the hacks do act as filters, but what about the tripswitch hack? The {display: inline;} hack for the doubled float margin bug? These aren't filters as they apply to all. Isn't it a hack to simply trigger hasLayout,, or to avoid triggering hasLayout, rather than any kind of filter (though you might use a "filter" to feed different rules to IE)?

After reading what I just wrote, I will stipulate that many a brilliant hack are used as filters. By way of contrast, the conditional comment is an ugly brute force filter without any semblance of elegance—not a hack.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I surrender Hack it is,

I surrender :rolleyes: Smile

Hack it is, you're quite right it has relevance but only when that original meaning is understood, it remains the case that the term has become misused and stylesheets riddled with hacks have led to the impression that this is the norm.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

Transitional vs Strict, and XHMTL vs HTML 4.0

I have redone only the top part of the project page, applied some of the instructions from the links given me. Check it out via FF & IE at http://www.wiregrassweb.net/css_project.html.

The menu in FF is still padding above the links as I set the background for one link to a different color. Tried various combos of overflow:auto, overflow:hidden, display: inline; with no effect.

Just another old hacker impersonator!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Let's clear some

edit: Arrgh! this post has lost its context, as the previous post was edited while my back was turned. The questions asked are no longer there. Sad

Let's clear some misconceptions. A transitional DTD doesn't allow you to be sloppier, it is for backward compatibility. It allows for elements and attributes that are deprecated (not guaranteed to be around). Since there is no sane reason to use deprecated markup, there is no reason to use a transitional DTD. The "strict" just tells the validator to use current specs to check your work against.

The meta http-equiv content type is mostly ignored. That's not really an issue because any properly configured server will include the MIME type in its response header, and that trumps the document meta datum[1]. The default server MIME type setting for the .html extension is text/html. Apache, at least, has a MIME type config file that controls the content type header. An .xhtml extension will give you application/xhtml+xml, or you can override the config file with a local .htaccess file.

I've used the .htaccess file in the directory of this xhtml doc.

Order allow,deny
Deny from all

AddType application/xhtml+xml .htmlThis config override says 1) don't show me to anyone, and 2) serve .html files from this and descendant directories as application/xhtml+xml.

The server response header looks like this:

Date: Fri, 21 Sep 2007 18:59:22 GMT
Server: Apache/1.3.29 (Unix)
Last-Modified: Wed, 30 Jun 2004 20:29:27 GMT
Etag: "bb84a8-57e-40e322a7"
Accept-Ranges: bytes
Content-Length: 1406
Content-Type: application/xhtml+xml

200 OK

Since only the Moz/Gecko family and Opera browsers support xhtml, there's no point in worrying about. Just let it be served as text/html[2].

I'd stick with (x)html unless you have compelling reason to go with xml. But, that's just me. As for xhtml vs html, go with whichever you prefer æsthetically.

cheers,

gary

[1] IE, as you'd expect, screws the pooch on this, sniffing the document for apparent type. A text document with something that looks like html markup in it will be rendered as html. See Content-type: text/plain

[2] I do support one intranet in a Firefox house. We do extend the DTD, creating our own elements. It serves to allow data to be easily extracted.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

Strict it is

Thanks Gary. I guess it doesn't make sense to use anything other than strict.

Now on to my updated project page. I've redone the page, created an .htaccess page like the one you recommended and validated as XHTML.

Can you determine why I am getting padding above the navigation 'ul' section?

UPDATE UPDATE UPDATE UPDATE!!!

I have FF now looking like IE6. I thought the problem was with the 'navcontainer' but it actually was in the 'navcontainer ul'. I added padding: 0px; with no change, added margin-top: 0px; with no change but when I put BOTH in, it now properly displays the navigation bar right below the header.

Here is the CSS code:

#navcontainer { width: 100%; /* the overflow auto did expand the navigation but I have padding at the top of this navcontainer */ overflow: auto; text-align: center; background-color: #990000; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; } /* Works as expected in both IE & Firefox */ #navcontainer ul { /* ok, when I add padding: 0px; & margin-top: 0px; FF now displays properly with no padding above */ padding: 0px; margin-top: 0px; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: .90em; }

So now my question is why did it assume there to be padding AND margin at the top of the navcontainer ul div section?

Just another old hacker impersonator!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

look at the Firefox default stylesheet

If you look at the Firefox default stylesheet, html.css (in the res directory of wherever you have Firefox), you'll see this:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

There is 1em of margin, top and bottom, and 40px of padding on the start side (left in Western ltr text). This is true also of Konqueror/Safari. IE and Opera have the top and bottom the same, but use 40px margin from the start side, i.e. {margin-left: 40px;}.

The side padding and margin set the list's indention. I think you will find that IE's list is 40px in from the left compared to Firefox. Set {margin: 0;} to remove indention from them all.

Is that what you're asking? I've lost track of the issues. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

Many thanks

Gary,

Thanks for clearing that up. That is a good thing to know. I have now modified the page, adapted it to my actual administration page, put in my php/mysql backend access, uploaded, tested and validated with both xhtml and css.

This project has taught me a lot and I really appreciate the feedback everyone has given me.

Finally, in regards to the comment about doing away with the tables, I read that if the information is tabular, then using tables is fine. I know for the form on the right, that is not really tabular so my next step is to move the form information on the right out of a table structure.

Should I leave the list in table form or see about generating XML format, use a XSL to format and include either in a set height content or let it float freely down expanding the content box? I know this doesn't have anything to do with CSS but just looking for how you would approach this.

Just another old hacker impersonator!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Why don't you mark up your

Why don't you mark up your sample content with semantic tags, then worry about presentation?

I see no need to go with xml and conversion etc.. Are you using a templating system like Smarty for your PHP? Separation of logic and structure is as helpful on the server side as separation of structure, presentation and behavior is on the client.

Take a look at your page in IE.

Great job of getting things going.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

Smarty Template

Gary,

I'm not familiar with the Smarty Template so I guess I'll need to check it out.

One of the reason I wanted to make this move is so that I could separate content from presentation and really work on my graphic design, which has been lacking. CSS ZenGarden really was my inspiration to make this move. Seeing the exact same content put into so many different designs sold me. That is something you can't really do with tables.

Besides, the more I get into this, the more I enjoy the graphic side more than the backend content side.

Just another old hacker impersonator!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Besides, the more I

Quote:
Besides, the more I get into this, the more I enjoy the graphic side more than the backend content side.

Yikes, the more you get into what? CSS? I hope you don't just see CSS as a convenient method , better than table layouts, to simply provide 'containers' for graphics.

For most of us the opposite is true we enjoy and focus on the frontend markup/css side of things while constantly fighting the eternal battle with the graphics designer and their blind arrogance and inflated belief in their role in web development, and ignorance of the distinction between 'design for print' and 'design for web'.

Oh and don't mind me I'm just griping Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

LukeDouglas
Offline
Regular
Alabama
Last seen: 14 years 18 weeks ago
Alabama
Timezone: GMT-5
Joined: 2005-12-10
Posts: 21
Points: 0

Me, myself and I

Hugo,

I guess the arguing I would have with graphic designers is myself. I'm a one-man operation. I register the domain names, maintain the DNS settings, outline the site in consultation with my clients, develop the backend, design the website, publish it, host it and maintain it. If they have a problem, they just call me.

My clients are small businesses. Most want a website for the who, what, when, where and why about their businesses as an extension of their other local advertising. I wouldn't even attempt to take on a medium or large business. It's not my focus. But I still want to develop well written and attractive websites. I'm evolving.

Just another old hacker impersonator!!!