newbie: css width and height

So I'm trying to get my head round css and divs - updating previously table
based websites to have css layouts.

After banging my head against the wall trying to work out why netscape
wasn't interpreting my box widths correctly, I installed firefox, read more
about the box model and realised that its IE which isn't correct.

So, box width and height refer to the content size, and the padding and
margins are added to that. Ok.

But in IE the box width and height are implemented as the whole box, and the
padding is deducted from that (which actually makes more sense to me coming
from a print background)

I am inclined to design for the "correct" ie netscape and firefox
interpretation, but my client uses IE so it's gonna look wrong.

Any workarounds that aren't too hackish?

Any help appreciated, please be very gentle with me

Ruth

On Tue, 11 Dec 2007 16:19:54 +0100, Ruth <NewsgroupRuthNoSpAm (AT) hotmail (DOT) com>
wrote:

So I'm trying to get my head round css and divs - updating previously
table
based websites to have css layouts.

After banging my head against the wall trying to work out why netscape
wasn't interpreting my box widths correctly, I installed firefox, read
more
about the box model and realised that its IE which isn't correct.

So, box width and height refer to the content size, and the padding and
margins are added to that. Ok.

But in IE the box width and height are implemented as the whole box, and
the
padding is deducted from that (which actually makes more sense to me
coming
from a print background)

I am inclined to design for the "correct" ie netscape and firefox
interpretation, but my client uses IE so it's gonna look wrong.

Any workarounds that aren't too hackish?

Some browsers allready support 'box-sizing':
<http://www.quirksmode.org/css/box.html>

So if you set up:
* {box-sizing: border-box;-moz-box-sizing:border-box;}
... you've got more or less the same box-model behaviour.
--
Rik Wasmus

Thanks everyone.

I have actually now changed my doctype declaration, although that seems to
have messed up some other stuff in IE.

I will now work on the assumption that if it's right in IE but wrong in FF
and NN, I've got it wrong

It's really annoying, but I'm enjoying the flexibility I can get with css
layouts. Well, would get, if IE didn't just do it's own thing...

Ruth wrote:

Thanks everyone.

I have actually now changed my doctype declaration, although that seems to
have messed up some other stuff in IE.

I will now work on the assumption that if it's right in IE but wrong in FF
and NN, I've got it wrong

Most likely true.

It's really annoying, but I'm enjoying the flexibility I can get with css
layouts. Well, would get, if IE didn't just do it's own thing...

Bane of web design. Design in FF, validate then tweak for IE. Sometimes
rethinking your basic design so that 3 pixels does not matter. Google
for "fluid web design" or "liquid web design", be more flexible a life
web designer world get much easier when multiple browsers are involved.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote

Ruth wrote:
Thanks everyone.

I have actually now changed my doctype declaration, although that seems
to have messed up some other stuff in IE.

I will now work on the assumption that if it's right in IE but wrong in
FF and NN, I've got it wrong

Most likely true.


It's really annoying, but I'm enjoying the flexibility I can get with css
layouts. Well, would get, if IE didn't just do it's own thing...

Bane of web design. Design in FF, validate then tweak for IE. Sometimes
rethinking your basic design so that 3 pixels does not matter. Google for
"fluid web design" or "liquid web design", be more flexible a life web
designer world get much easier when multiple browsers are involved.

One step at a time...remember I'm coming from print, where I know EXACTLY
how everything will turn out I'm trying to do the right thing and render
for all browsers and be accessible bla di bla bla...getting there, just
requires changing the way I think completely!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Ruth wrote:

One step at a time...remember I'm coming from print, where I know EXACTLY
how everything will turn out I'm trying to do the right thing and render
for all browsers and be accessible bla di bla bla...getting there, just
requires changing the way I think completely!

Yes it is a very different mindset, but be patient and you'll get there.
You've got the right attitude, which is half the battle.

It also takes time and lots of practice to become proficient so don't
expect miracles overnight. Keep it simple to start and don't sweat the
small stuff.

--
Berg

Thanks! I think I'm getting there.

I've created a page in which everything is positioned absolutely.

So now my next step is to learn how to make a more flexible layout...but at
least it looks the same in all (recent!) browsers and is miles better from
the hash of table code that was previous.

How do you guys check for old browsers like the old IE ones? Do you have
copies of them installed or use some kind of emulator? Or is it just a
matter of gaining experience in which browsers support what?

Or (head hanging in shame) can I ignore ppls what use IE 5.5?


"Bergamot" <bergamot (AT) visi (DOT) com> wrote

Ruth wrote:

One step at a time...remember I'm coming from print, where I know EXACTLY
how everything will turn out I'm trying to do the right thing and
render
for all browsers and be accessible bla di bla bla...getting there, just
requires changing the way I think completely!

Yes it is a very different mindset, but be patient and you'll get there.
You've got the right attitude, which is half the battle.

It also takes time and lots of practice to become proficient so don't
expect miracles overnight. Keep it simple to start and don't sweat the
small stuff.

--
Berg

Ruth wrote:

I've created a page in which everything is positioned absolutely.

I cringe every time I hear that. It is usually one of the worst ways to
lay out a web page.

What happens when the visitor has a different window size than you?
Larger text size? Different fonts? Unless you know what you're doing,
absolutely positioned layouts do not adapt to such variations at all. At
best it looks bad. At worst it's unusable.

Chances are you don't need absolute positioning at all, you just haven't
learned how to do it differently yet. If you post a URL we can better
evaluate the situation.

How do you guys check for old browsers like the old IE ones?

Search for 'multiple IE'.

--
Berg

You are 100% right....which is why I'm adjusting it now.

But I only started learning DIVs and CSS on Monday so first I wanted to get
my head around positioning with CSS, which was easier with absolute
positioning, now I'm hoping to adjust it to be a bit more liquid. Actually
it was good cos it helped me get my head around the css box model, which I
actually find counter-intuitive especially in terms of the padding. (whoever
heard of a box with the padding outside of it?)

I cringe at the idea of posting this... (very fragile newbie!!) but here
goes...

Original table based website (yes, i know!)
http://www.brianbarr.co.uk

New css-ly structured version
as above but add /testsite

It's not finished yet - the links aren't in place, and there are a couple
design bits I want to fix.

Any suggestions welcome (but please be nice, I'm trying hard!)

Thanks for all your help
R

"Bergamot" <bergamot (AT) visi (DOT) com> wrote

Ruth wrote:

I've created a page in which everything is positioned absolutely.

I cringe every time I hear that. It is usually one of the worst ways to
lay out a web page.

What happens when the visitor has a different window size than you?
Larger text size? Different fonts? Unless you know what you're doing,
absolutely positioned layouts do not adapt to such variations at all. At
best it looks bad. At worst it's unusable.

Chances are you don't need absolute positioning at all, you just haven't
learned how to do it differently yet. If you post a URL we can better
evaluate the situation.

How do you guys check for old browsers like the old IE ones?

Search for 'multiple IE'.

--
Berg

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Ruth wrote:

Original table based website (yes, i know!)
http://www.brianbarr.co.uk
New css-ly structured version
as above but add /testsite

I don't have Verdana. Please read this:
http://k75s.home.att.net/fontsize.html

Test it yourself by removing Verdana from your font settings. It is
unreadable.

Oh, you don't have to assign font-family so often. Set it just once in
the body.

You have too much pixel-precision. Think about flexible design. On my
wide-screen monitor, it's just a skinny column in the center.
http://allmyfaqs.net/faq.pl?AnySizeDesign

The icons on the right links look cartoonish to me.

Oh, please don't top-post.

--
-bts
-Motorcycles defy gravity; cars just suck

Thank you for your comments, constructive criticism appreciated.

Now that I have (hopefully!) figured out the box situation with CSS I am
redesigning the site to be more flexible (getting rid of as many absolutes
as possible) - about half way through, I'll post it when I'm finished.

With regard to the font declaration - I had a quick look at the document you
recommended (will read properly on Monday!) - are you saying that the
problem with verdana is the size? Isn't that the point of making the text
resizable? I guess it's bad form to present the user with something they
have to resize from the off.

Still, even if I change the font, won't I always have the problem of finding
a happy medium between all browsers / devices / resolutions?

The client likes these icons but I take your point about the cartoonishness
so will see if we can find something that everyone is happy with.

All in all I'm still happier with this than the old table-based layout,
which now I've used css seems a totally mad way of doing things.

Have a good weekend.

R