Layout: oh hel(p), browser independence and div boxes

started by Wops on Feb 22, 2005 — RSS Feed

Wops Wops
Posts: 5

Just another newbie to complete css design...

After days of trial and error, trying to get
http://www.workorder.se/
to look good in netscape/firefox etc.

It looks as I wish in IE, all code validates, but have problems with nesting boxes, divs paddings, margins etc. So I had a shot at removing all padding and margins and resulted in this
http://www.workorder.se/firefox.asp
and there I don't get columns.

Suggestions ?

Cheers / Peter

p.s. Thanks for a truly great and informative site :-}

Joe Gillespie Joe Gillespie
Posts: 528

wops said:

After days of trial and error, trying to get
http://www.workorder.se/
to look good in netscape/firefox etc.

It looks as I wish in IE, all code validates,


No it doesn't...

http://validator.w3.org/check?verbose=1&uri=http%3A//www.workorder.se/

How can you say it validates?

Wops Wops
Posts: 5

Ahh, sorrry I wasn't clear enough,

http://www.workorder.se/firefox asp validates but looks like something the cat would've done,

both http://www.workorder.se/wo_basic.css and http://www.workorder.se/css/wo_basic.css validates.

The home page http://www.workorder.se/index.asp looks in i.e. like the final result I want to achieve, even though it doesn't validate. The problem I have is automatic box width, relative position, z-index (I think), float and height with lines that stretch from top to bottom.

We have the same look and feel on all our prints, just wanted the web to be the same.

There is no challenge in doing this with frames or tables, the challenge is css, which I'm under the impression is the future.

Cheers / Peter S.

Joe Gillespie Joe Gillespie
Posts: 528

There is no reason why you would need to use z-index for this design. In most instances, layer stacking is automatic and is only relevant to absolute positioning anyway.

Your problem is with the basic box structure but I can't go into all the ins and outs of it here. Check out the CSS layout tutorials at

http://www.wpdfd.com/editorial/wpd0204news.htm#feature

Wops Wops
Posts: 5

I had confused a couple of things,
Div and div is not the same, nor is Class and class.
Thus, ids in Firefox and IE behave differently. In firefox they are case sensitive, but in IE not. The capitalizing of f.ex. LeftColumn is a leftover in me from Delphi semantics and readabiliy, but I wasn't consistent in writing the css and using it.

Now just one problem remains, height.
Pls take a look again. I have one box #PageBase gray background, then one box #ContentBase slightly smaller, white background, and then three columns inside. Apparently the box with the white background doesn't calculate the height equally in firefox and ie. Why?

A new much more compliant page at:
http://www.workorder.se/index.asp

cheers / Peter

Joe Gillespie Joe Gillespie
Posts: 528

It's the height: 100% that is ambiguous. Note the IE handles line spacing differently from other broswers too a any given block of text will be different in IE and other browsers. You can not depend on a column of text being the same height in different browsers. On the web, you have to design to accomodate this by using flexible layouts.

Wops Wops
Posts: 5

Somehow #ContentBase doesn't understand that there is content within. Regardless what I try, now I'm stuck   ???. I want #ContentBase to understand that it is a block around other containers.

Wops Wops
Posts: 5

And the solution was
display: table;

now it behaves equally in IE and FireFox.  

Thanks for all the help.

/Peter

You must login to reply