What's happening with this?

S

Sam Hughes

If I resize the window down in IE, the 2nd column drops to a level
below the 1st column. This doesn't happen in Firefox. What am I doing
wrong?

http://home.earthlink.net/~absolutelyfake/problem.htm

When IE sees that the content div does not fit horizontally in the
window, it decides that the content div should be wrapped so that it lies
beneath your floated menu. However, its left margin is set at 225px, so
it remains off the screen, just pushed down so that it clears the
floating box on its left.

In my opinion, what you are doing wrong is namely using pixels for widths
of margins and content areas. However, while using relative sizes will
improve your karma, it won't fix the bug you have been experiencing. To
fix that, you need to remove the width restriction on the content div.

By the way, while looking at your CSS, I noticed that you have a menu
class set up for A elements that I presume would be in your #menu div.
However, instead of creating a new class, you could just use:

#menu a:link { ... }

in place of

a.menu:link { ... }

And likewise for :visited/:hover. Now you don't have to have a class
attribute for all those start tags.
 
F

Frogleg

When IE sees that the content div does not fit horizontally in the
window, it decides that the content div should be wrapped so that it lies
beneath your floated menu. However, its left margin is set at 225px, so
it remains off the screen, just pushed down so that it clears the
floating box on its left.

In my opinion, what you are doing wrong is namely using pixels for widths
of margins and content areas. However, while using relative sizes will
improve your karma, it won't fix the bug you have been experiencing. To
fix that, you need to remove the width restriction on the content div.

By the way, while looking at your CSS, I noticed that you have a menu
class set up for A elements that I presume would be in your #menu div.
However, instead of creating a new class, you could just use:

#menu a:link { ... }

in place of

a.menu:link { ... }

Thanks. I usually get an answer here within minutes -- often before I
post if Brucie's awake -- and was becoming panicky.

I specified pixel widths because the 'real' page involves several
graphics. 20% of 800 puts things in a completely different place than
20% of 1280.

I'm just creeping up on CSS, and *knew* I had redundant/clumsy 'menu'
stuff. I'm wobbly on syntax, and my comprehensive reference book is
too big to have in my computer area. Relying on "read...remember" is
chancy. Thanks for the bonus info.

I'm becoming somewhat disenchanted with CSS. While it can really do
some nifty things, there seem to be a lot of bottom-of-the-page notes
with "this problem affects Opera in some cases..." and "might make
some IE layouts look a bit odd...." At least with tables, things
more or less stay where you put them. And tutorials have few footnotes
about which browsers are incompatible with them. :)
 
R

rf

Frogleg wrote
I'm becoming somewhat disenchanted with CSS.

Possibly because of where you are coming from :)

By this I mean coming from a "table based" design philosophy.

Table based design usually implies putting things exactly here or there and
specifying the dimensions of things all over the place and stictly having
things here or there in relation to each other, usually to the nearest pixel
and preferably looking exactly the same in all browsers.

CSS is all about writing the content first (the HTML bit) and applying
styles to the HTML elements afterwards, to tart up that content.

Well, not strictly true but do not fall into the trap of thinking "I need a
box this big here and another one this big over there".

Think more like "here is a block of content (a menu) and here is another
block of content (the "content")". Right, I have them, they are written.
Now, how would I like to present (read position) these today?

You are trying to make CSS do too much. CSS is not about desktop publishing,
it is about making the content of a web page present nicely. Nicely on this
browser, nicely on that one, perhaps not the same but nicely. Even nicely on
things such as lynx.

Look at
http://users.bigpond.net.au/rf/frogleg/index.htm
css at
view-source:http://users.bigpond.net.au/rf/frogleg/problem.css

Flows. The CSS was definitely added after the event.

Now look at
http://users.bigpond.net.au/rf/frogleg/index1.htm
css at
view-source:http://users.bigpond.net.au/rf/frogleg/problem1.css

Verify that the only thing that has changed is the CSS (plus, of course, the
link to it).

I can totally rewrite the CSS file and cause the page to look totally
different. This is because I have totally seperated the presentation from
the content. I have also seperated *thinking* about the presentation from
*thinking* about the content.

CSS is Content, then presentation.

Tables are presentation, then content, IMHO a bad way of thinking about web
page design.
 
F

Frogleg

Frogleg wrote
do not fall into the trap of thinking "I need a
box this big here and another one this big over there".

Yeah, but..
Even if I couldn't do this with vanilla HTML and tables, I was
confident that such layout I *could* achieve would stay put. Indeed,
my 'tabled' pages required little fiddling for display at different
resolutions and with different browsers. It was easy to avoid
specifying exact sizes or positions, and absent large graphics,
everything "collapsed" rather nicely.

Now, after being promised vastly improved control over layout and
near-infinite flexibility, I am (and others are, to judge by posts
here) finding that *this* won't work in IE and *that* goes wonky in
Mozilla and some other thing may or may not go completely pear-shaped
in differing resolutions. 3X the scope in exchange for 5X the work.
Look at
http://users.bigpond.net.au/rf/frogleg/index.htm
css at
view-source:http://users.bigpond.net.au/rf/frogleg/problem.css

Flows. The CSS was definitely added after the event.

Thanks. I've just looked and saved. Will study offline.

Umm. Because I wanted to get my specific problem visible ASAP, I
stripped the page of non-problem info. It's really rather attractive
and sophisticated with graphics in IE6.0.2008 at 800x600. :)
Verify that the only thing that has changed is the CSS (plus, of course, the
link to it).

I can totally rewrite the CSS file and cause the page to look totally
different. This is because I have totally seperated the presentation from
the content. I have also seperated *thinking* about the presentation from
*thinking* about the content.

I've been to the CSS Zen Garden. :) I'm *so* not in that class. So
to speak. As it were.

Thanks again for the examples. I'll get it right eventually.
 
R

rf

Frogleg wrote
Yeah, but..
Even if I couldn't do this with vanilla HTML and tables, I was
confident that such layout I *could* achieve would stay put.

CSS layout does *not* stay put. That is the best thing about it. It allows
the page to adapt to the viewers environment. If you want something to "stay
put" then consider using a huge gif :)
Indeed,
my 'tabled' pages required little fiddling for display at different
resolutions

Different "resolutions" are irrelevant. What you really mean is screen size
and how do you know how big your viewers screen is. For example most of my
"screens" are 1600x1200 pixels. My "desktop" is (currently) 4800x1200
pixels. It might (as it was yesterday) be 1600x2400 pixels.

Resolution is Irrelevant.

Besides, your viewers canvas size is never equal to their "resolution". It
is the canvas size you should worry about but then you should not even
worry about that. You have no control over it so you should design to any
size canvas.
and with different browsers.

This been discussed before. Refer to the archive. To summarize different
browsers are irrelevant. As irrelevant as canvas size. Your page will
*never* look the same in two or more different browsers. That is why there
*are* two or more different browsers.
It was easy to avoid
specifying exact sizes or positions, and absent large graphics,
everything "collapsed" rather nicely.

So why are you trying to "position" things? Let them flow. Let them degrade
gracefully. Don't anticipate a "size", use the browsers layout capabilities.
Now, after being promised vastly improved control over layout and
near-infinite flexibility, I am (and others are, to judge by posts
here) finding that *this* won't work in IE and *that* goes wonky in
Mozilla and some other thing may or may not go completely pear-shaped
in differing resolutions. 3X the scope in exchange for 5X the work.

I repeat what I said before, you are trying too hard. Lean back a bit from
your "it must go here" attitude and let the browser lay it out for you. It
can, you know.
Thanks. I've just looked and saved. Will study offline.
....

Umm. Because I wanted to get my specific problem visible ASAP,

ASAP does not count in usenet :)
I
stripped the page of non-problem info. It's really rather attractive
and sophisticated with graphics in IE6.0.2008 at 800x600. :)

Then provide a URL to this page you have a problem with. I'm sure one of us
could "CSS" it quite readily :)

(probably not me, I'm going to the snow in only two sleeps time :) )

And once again you are quoting things like IE and <shudder> 2008</shudder>.
What if I use 2009? And there it is again: 800x600. This window that I am
typing into now is er, 945x1045. The browser I am using to look at
something, over there --> is, er, whatever... It does not matter to me, it
should not matter to you.
Thanks again for the examples. I'll get it right eventually.

I'm sure you will ;-)

Take the time to "unlearn" the bad habbits (not a slur on you, just a
general observation) you have grown into with your existing design skills.
This is what I will be spending my time on next week, teaching people, my
friends, how to ski, how to ski well, hopefully very well. This is what I do
when I go to the snow, being a ski instructor :)

The major effort is to stop the student from using the incorrect reflexes
they have grown into. Then we can start working on a more correct set of
reflexes that allow us to turn (and therefore ski) more elegantly.
 
W

Webcastmaker

Well, not strictly true but do not fall into the trap of thinking "I need a
box this big here and another one this big over there".

You point out the difference between 2 different Web design
methodologies. (Neither mutually exclusive of the other, and neither
more accessible than the other if both are done right) Some web
developers believe that a web page is best served when you place this
big box over here and that big box over there.

Just 2 different thoughts about what makes the web tick.
 
M

Mark Parnell

What's the CSS for inserting spaces/line-breaks?

Line breaks are content, and therefore nothing to do with CSS. As for
"spaces", perhaps padding and/or margins may be what you are looking
for, but it depends on the context.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top