Nuts

[Jon Slaughter]

This stuff is getting on my nerves ;/

I am trying to create a graphical variable size "button" that encapsulates a
fixed position ul for a menu. I cannot get it to work at all.


The button consists of 2 images for the right corners, one images for the
bottom, one for the right most side, and the last for the filler.

You can check it out by hover over one of the links at

http://www.jonslaughter.com/MyPage.html


I want to add corners to the sub menu along with a shadow at the bottom.

I have the graphics and I've been trying for the last 2 hours to get
something to work but everything comes out wrong because I cannot position
absolutely to the fixed position container that holds the ul.

http://www.jonslaughter.com/Test.html


What I need to know is how nested containers with different combinations of
positions work. On my sub menu with a position:fixed and if I do
position:absolute on any element contained in it then my coordinates always
end up relative to viewport.

I've tried many things..

if I do something like

<div style="position:fixed">
<div style="position:relative">
</div></div>

and in the second div dot he coordinates refer relative to the fixed
container of the first? When I do stuff like that in my original code it
totally screws up the menu. That is, I have to have the sub menu as fixed
but when I try to create a container inside that that has relative coords it
then screws up.

Maybe I need to specify something else besides display:inline or block?

This crap is driving me nuts ;/

Thanks for any help,
Jon

 

[Ben C]

What I need to know is how nested containers with different combinations of
positions work. On my sub menu with a position:fixed and if I do
position:absolute on any element contained in it then my coordinates always
end up relative to viewport.

I've tried many things..

if I do something like

<div style="position:fixed">
<div style="position:relative">
</div></div>

and in the second div dot he coordinates refer relative to the fixed
container of the first? When I do stuff like that in my original code it
totally screws up the menu. That is, I have to have the sub menu as fixed
but when I try to create a container inside that that has relative coords it
then screws up.

Maybe I need to specify something else besides display:inline or block?

If you set position: fixed or position: absolute, you get display: block
whatever you specify.

absolute: origin is containing block infimum point (containing block is
generally nearest ancestor with position of anything except static)

fixed: origin is viewport infimum.

relative: origin is infimum of normal-flow box.

Yes the terms are very confusingly named. Relative is the odd one out--
the box is flowed normally, and then offset at the last minute from its
normal-flow position, leaving a gap where it was.

 

[Jon Slaughter]

http://www.jonslaughter.com/Test2.html

The boxes represent the partition that I need. The issue seems to be that I
have to specify a height for it or it doesn't work. I thought that the
outer most div would calculate the height but it doesn't seem to do this.

For my application I can't(or don't) want to specify the height because it
should be able to compute it automatically. Its just the height of the ul
inside the divs + a few pixels for the border(in the example its 20px +
height of ul).

It looks like I'm going to have to do that though for each sub menu I have.
Is there any way to get the user agent to calculate it for me? (specifying
anying absolute fixed height isn't good as I have to do it for each time I
use the box. Specifying auto doesn't work either)

Thanks,
Jon

 

[Jon Slaughter]

If you set position: fixed or position: absolute, you get display: block
whatever you specify.

? You mean as a default or that I cannot change it? If I use display:inline
it works and looks different, atleast in FireFox, than display:block. The
block shifted down while the inline is not.

absolute: origin is containing block infimum point (containing block is
generally nearest ancestor with position of anything except static)

fixed: origin is viewport infimum.

relative: origin is infimum of normal-flow box.

Yes the terms are very confusingly named. Relative is the odd one out--
the box is flowed normally, and then offset at the last minute from its
normal-flow position, leaving a gap where it was.

What I'm having trouble is, is how they inherit the positioning from there
parent containers. I wasn't sure if it was inheriting or not before but my
simple example seems to work(See other post). The issue seems to be that I
have to specify the height because the user agent isn't calculating it for
me the way I thought it would. I can specify the height but I'd rather not
if possible.

Thanks,
Jon

 

[Jonathan N. Little]

? You mean as a default or that I cannot change it? If I use display:inline
it works and looks different, atleast in FireFox, than display:block. The
block shifted down while the inline is not.

Floats, absolutely positioned elements, inline-blocks, table-cells,
table-captions, and elements with 'overflow' other than 'visible'
(except when that value has been propagated to the viewport) establish
new block formatting contexts.

http://www.w3.org/TR/CSS21/visuren.html#q15

You could save yourself and us a lot of grief if you study up a bit on CSS.

 

[Bergamot]

http://www.jonslaughter.com/Test2.html

Why don't you use border properties for the bars across the top/bottom
and down the sides? It would be much simpler than using all those divs.
They're only pretending to be borders anyway.

 

[Jon Slaughter]

Floats, absolutely positioned elements, inline-blocks, table-cells,
table-captions, and elements with 'overflow' other than 'visible' (except
when that value has been propagated to the viewport) establish new block
formatting contexts.

http://www.w3.org/TR/CSS21/visuren.html#q15

You could save yourself and us a lot of grief if you study up a bit on
CSS.

****. I'm reading the css spec now. You seem to have to point out every time
someone wants some help(or just me specifically) to go somewhere else. If
you don't like me asking questions then thats just tough cause you can't do
a damn thing about it but bitch.

 

[Jon Slaughter]

Why don't you use border properties for the bars across the top/bottom
and down the sides? It would be much simpler than using all those divs.
They're only pretending to be borders anyway.

Yes but it doesn't look as good. I went ahead and sorta hard coded the stuff
and the results are almost exactly what I want:

http://www.jonslaughter.com/MyPage.html



But I need to somehow shift the sub menu boxes up a few pixes to make them
look better. Every time I do something like top:-10px it absolutely offsets
it from the top of the browser. Its so damn annoying.



Thanks,

Jon

 

[Jon Slaughter]

Yes but it doesn't look as good. I went ahead and sorta hard coded the
stuff and the results are almost exactly what I want:

http://www.jonslaughter.com/MyPage.html



But I need to somehow shift the sub menu boxes up a few pixes to make them
look better. Every time I do something like top:-10px it absolutely
offsets it from the top of the browser. Its so damn annoying.

OK, nevermind. I got it. CSS is a fucking mess. I don't know why I have to
nest divs of different position types just to get a relative addressing in
absolute mode off the current content block.

To shift the things I had to encause the menu's in two divs, on in relative
positioning and the other in absolute. If I just did one or the other it
wouldn't work ;/


crap... in IE the shifting screws it up. IE seems to only shift 1/2 of what
firefox does ;/ guess I can solve it with a conditional shift.


Thanks,
Jon

 

[Jonathan N. Little]

****. I'm reading the css spec now. You seem to have to point out every time
someone wants some help(or just me specifically) to go somewhere else. If
you don't like me asking questions then thats just tough cause you can't do
a damn thing about it but bitch.

1) This is not a help desk but a discussion group.
2) I have been trying to direct you to where you might learn something
that could help you.
3) Just love your bubbly cheerful demeanor!

 

[Jon Slaughter]

1) This is not a help desk but a discussion group.
2) I have been trying to direct you to where you might learn something
that could help you.
3) Just love your bubbly cheerful demeanor!

Oh... then its my fault then. I thought I could post question for help here.

Sorry. I guess I'll try to find some place where people are willing to help
instead of just discuss.

 

[Ben C]

? You mean as a default or that I cannot change it?

You can't change it. If you specify absolute or fixed position for
something with a value of display of inline, run-in, table-row-group,
table-column, table-column-group, table-header-group,
table-footer-group, table-row, table-cell, table-caption or inline-block
what you get is display: block. See CSS 2.1 9.7.

position: relative is completely different though.

If I use display:inline it works and looks different, atleast in
FireFox, than display:block.

I'm surprised by that.

[...]

What I'm having trouble is, is how they inherit the positioning from there
parent containers.

Simple, they don't. position is never inherited.

I wasn't sure if it was inheriting or not before but my simple example
seems to work(See other post). The issue seems to be that I have to
specify the height because the user agent isn't calculating it for me
the way I thought it would. I can specify the height but I'd rather
not if possible.

See also section 10.6 of the spec.

 

[Bergamot]

Your test page has been removed, but I remember what it looked like.
http://www.bergamotus.ws/samples/4corners.html
So how does this not look "as good" as your attempt?

OK, nevermind. I got it. CSS is a fucking mess.

No doubt a lot of your problem relates to misconceptions about how
things are supposed to work. If you took the time to actually learn
about the properties and positioning methods you are attempting to use
instead of hacking away at things, you might be less frustrated.

CSS takes time, practice and patience to learn. It's unrealistic to
think you'll get it overnight, and just whining that it is a mess says
something about your willingness to put in the necessary effort. And it
does take effort.

I don't know why I have to
nest divs of different position types just to get a relative addressing in
absolute mode off the current content block.

Because that's what the specs say is supposed to happen. Get over it.

crap... in IE the shifting screws it up.

Welcome to the wonderful world of IE bugs.
http://www.positioniseverything.net/explorer.html

 

[Jon Slaughter]

Your test page has been removed, but I remember what it looked like.
http://www.bergamotus.ws/samples/4corners.html
So how does this not look "as good" as your attempt?

It does but that is not what I want for my home page.

No doubt a lot of your problem relates to misconceptions about how
things are supposed to work. If you took the time to actually learn
about the properties and positioning methods you are attempting to use
instead of hacking away at things, you might be less frustrated.

I've programming in assembly 15 years ago for about 5 years, C/C++ for last
15 years, and C# for last 2 years. I'm not the best programmer but I like
consistancy. CSS is not consistant. Its not made to do what it should.
Its markup and transformational abilities are amazing for what they do but
they are severly limited. I program on and off though and the last few years
I have not programming much except learning C# and .NET.

CSS takes time, practice and patience to learn. It's unrealistic to
think you'll get it overnight, and just whining that it is a mess says
something about your willingness to put in the necessary effort. And it
does take effort.

Sure. But thats not something I want to do. I have more important things to
do than learn every new super duper programming language that comes a long.
I want to get my web site done and be over with it. I'm not a web designer
or programming and I don't want to be. Sure I want to put together pages
when I need to do but its way to much trouble to do simple stuff(mainly the
browser differences).

What pisses me off about web design and turns me off from it is the total
lack of unification. This is a big deal when your developing cross system
compatibility. Its just a mess IMO. CSS was suppose to fix that and be
leveraged to increase the visual transformations of pre-existing html
without interfering with incapable browsers... but when you have 20
different browsers(including the same brower but different versions) and
they all implement the specs differentialy or partially and one is expected
to conform to them all then its total nuts.

Because that's what the specs say is supposed to happen. Get over it.

Well, I guess I haven't got that far in the spec(at the start of
positioning). I'm sure the semantics of positioning for css could have been
designed a bit better. .NET has an excellent methodology for positioning
that CSS could take a few lessons from.

Welcome to the wonderful world of IE bugs.
http://www.positioniseverything.net/explorer.html

Which is a complete turn off. I'm suppose to write code that is compatible
for some browser that is a piece of crap... and not only that, theres about
6 of them(IE 3 - IE7). IE7 looks pretty good for the most part and if thats
all I had to deal with then it wouldn't be so bad.

What I'm actually going to do is just use php to strip all the css code from
the html if its IE 6 or lower and be done with it. If the user really wants
to see the graphics then can upgrade to better browser.

Jon

 

[al jones]

Suggesting that you 'go somewhere else' might be the place you need to go
to see what they are talking about. What *I* see is someone taking a
scattergun approach ('Well, shit, this didn't work. What happens if I do
this instead ...???') and I've been there - and it's easier on my
frustration level to just sit back, read (or re-read) what they've
suggested and *then* see what I can make this thing called HTML/CSS do.

Oh... then its my fault then. I thought I could post question for help here.

You *can* post any type of mesage you choose. The type of response you're
going to get depends on your comments and responsive to the answers. As
Jonathan (I believe) said, this is not your (or anyones) private help desk.
There have been times I've come in here, denser than a rock and gotten
excellent help - it's then up to me to determine if it's *really* helpful
or not. Jukka can be the example of this groups 'tough love', and
sometimes he's so abrupt that one needs to ask for clarification and it
usually follows.

Sorry. I guess I'll try to find some place where people are willing to help
instead of just discuss.

Sorry you feel that way. You've instigated a couple of the longer threads
seen in the past few days - which means the regulars are reading and
responding to you. It's your choice if you decide that they aren't worth
listening to.

 

[Bergamot]

I've programming in assembly 15 years ago for about 5 years, C/C++ for last
15 years, and C# for last 2 years. I'm not the best programmer but I like
consistancy. CSS is not consistant.

Yawn. I programmed in multiple assembly languages for more than 20
years, plus a number of other languages. Sounds like you're just making
excuses.

Sure. But thats not something I want to do.
I'm not a web designer or programming and I don't want to be.

Then go find yourself a ready-made template and be done with it.

IE7 looks pretty good for the most part and if thats
all I had to deal with then it wouldn't be so bad.

IE7 is just IE6 with some bug fixes and a weird UI. It is "pretty good"
compared to IE6, but still falls rather short of other browsers.

What I'm actually going to do is just use php to strip all the css code from
the html if its IE 6 or lower

Are you using inline styles for the whole page? That's an awfully
inefficient way to do things.

 

[al jones]

It does but that is not what I want for my home page.


I've programming in assembly 15 years ago for about 5 years, C/C++ for last
15 years, and C# for last 2 years. I'm not the best programmer but I like
consistancy. CSS is not consistant. Its not made to do what it should.
Its markup and transformational abilities are amazing for what they do but
they are severly limited. I program on and off though and the last few years
I have not programming much except learning C# and .NET.


Sure. But thats not something I want to do. I have more important things to
do than learn every new super duper programming language that comes a long.
I want to get my web site done and be over with it. I'm not a web designer
or programming and I don't want to be. Sure I want to put together pages
when I need to do but its way to much trouble to do simple stuff(mainly the
browser differences).

What pisses me off about web design and turns me off from it is the total
lack of unification. This is a big deal when your developing cross system
compatibility. Its just a mess IMO. CSS was suppose to fix that and be
leveraged to increase the visual transformations of pre-existing html
without interfering with incapable browsers... but when you have 20
different browsers(including the same brower but different versions) and
they all implement the specs differentialy or partially and one is expected
to conform to them all then its total nuts.


Well, I guess I haven't got that far in the spec(at the start of
positioning). I'm sure the semantics of positioning for css could have been
designed a bit better. .NET has an excellent methodology for positioning
that CSS could take a few lessons from.


Which is a complete turn off. I'm suppose to write code that is compatible
for some browser that is a piece of crap... and not only that, theres about
6 of them(IE 3 - IE7). IE7 looks pretty good for the most part and if thats
all I had to deal with then it wouldn't be so bad.

What I'm actually going to do is just use php to strip all the css code from
the html if its IE 6 or lower and be done with it. If the user really wants
to see the graphics then can upgrade to better browser.

Jon

Jon me again. As an old programmer who's written so many different version
of COBOL *any* discusssion about standardization of languages us a real
joke. ((BTW, I also write in several version of BASIC, FORTRAN, C and have
had some very enjoyable eperiences copnverting from one to the other, but
that's an aside.))

First: and I really think this has been pointed out endlessly in this
newsgroup HTML / CSS are not languages - not in the sense that you and I
would think of a programming language at all. I'll get called down for my
loose terms, but they describe a web page and then suggest how the browser
is to implement it - *NO* language I know of reaches to this level of
'suggestion'. In any language it's easy enough to say 'turn on the pixel
at xx,yy and when intrpreted or compiled the result will be (if the
computer gods are willing) that the pixel at xx,yy is lit up in some
fashion. That, though, makes several assumptions that we cannot make on
the web - is the screen wide/long enough to have a pixel at that location,
is there a screen (remember we define for 'read' systems here as well), is
there a pixel to turn on?

Secondly, given that you can program - this is *NOT* programming! When I
write a business system I have *all* the constraints in place before I set
pen to coding pad (or at least hope I do) which is something no one can do
here - none of know definitively how our 'page' is going to be interpreted
because there are just way too many possible pieces of equipment on which
it can be displayed.

Lastly, I know the learning curve for almost any language can be extreme -
if you're not willing to extend that same intenseness to learning how to
'code' a web page then my suggestion would be to let someone else do it for
you.

 

[Jim Ford]

Jon me again. As an old programmer who's written so many different version
of COBOL *any* discusssion about standardization of languages us a real
joke. ((BTW, I also write in several version of BASIC, FORTRAN, C and have
had some very enjoyable eperiences copnverting from one to the other, but
that's an aside.))

Programming languages - luxury! When I were a lad, it were all switches
valves, relays and mercury delay lines. We used to _dream_ about doing
it with a keyboard!
;^)

Jim Ford

 

[Jon Slaughter]

Jon me again. As an old programmer who's written so many different
version
of COBOL *any* discusssion about standardization of languages us a real
joke. ((BTW, I also write in several version of BASIC, FORTRAN, C and
have
had some very enjoyable eperiences copnverting from one to the other, but
that's an aside.))

First: and I really think this has been pointed out endlessly in this
newsgroup HTML / CSS are not languages - not in the sense that you and I
would think of a programming language at all. I'll get called down for my
loose terms, but they describe a web page and then suggest how the browser
is to implement it - *NO* language I know of reaches to this level of
'suggestion'. In any language it's easy enough to say 'turn on the pixel
at xx,yy and when intrpreted or compiled the result will be (if the
computer gods are willing) that the pixel at xx,yy is lit up in some
fashion. That, though, makes several assumptions that we cannot make on
the web - is the screen wide/long enough to have a pixel at that location,
is there a screen (remember we define for 'read' systems here as well), is
there a pixel to turn on?

Well, the are not programming languages. They are languages. They have a
grammar, a syntax, and semantics. But they are a messy language.

Secondly, given that you can program - this is *NOT* programming! When I
write a business system I have *all* the constraints in place before I set
pen to coding pad (or at least hope I do) which is something no one can do
here - none of know definitively how our 'page' is going to be interpreted
because there are just way too many possible pieces of equipment on which
it can be displayed.

Yes, I see that it is not programming. This is what, I suppose, makes it so
difficult. I'm used to programming constructs such as variables,
evaulations, assignments, etc... css has none of this to any real extent.

Lastly, I know the learning curve for almost any language can be
extreme -
if you're not willing to extend that same intenseness to learning how to
'code' a web page then my suggestion would be to let someone else do it
for
you.

Well, My issue is not learning it so much but I guess I get pissed when I
run into trouble and they do it in such a contorted way. Languages are
suppose to be about making things easier and not more difficult.

As far as I'm concerned I'd rather use JS as atleast it is a programming
language. But ofcourse then it limits my user base. Why not just use a lite
version of JS that removes all the main issues with it that people don't
like instead of comming up with an entirely new way(and then another and
another). I'm tired of a new language comming out every 3.4 days just
because someone thinks they can do it better.

Instead of being productive one ends up spending there time learning the new
language. CSS looks good from the outside but not having basic programming
constructs severly limits its ability. I only use it because it is
standard. I'd rather use JS because atleast with that I know whats going on.
CSS seems fine for simple transformative applications but anything beyond
that seems to be hell and counterproductive. Maybe they will fix the issues
in later versions.

I'm just here to learn enough to get me through my site. Maybe I should do
less bitching though and just learn it. Just really peeves me off when I
have to deal with so many incongruities between implementations. It happens
with programming languages too but the difference is that ultimately in the
end that code gets translated in same thing(ok, maybe not exactly but
doesn't matter) and there is only one hardware set. Ok, thats not entirely
true but one could target one specific set of functionality(such as
protected mode, flat mode, Vesa, VGA, etc..) and not have to worry to much
about supporting every different combination. But with web browsing it
seems like you have to please everyone no matter what browser there using.
It gets ridiculous and someone just needs to say "UPGRADE YOUR FUCKING
BROWSER!!!!!!".


Thanks,
Jon

 

[Ben C]

Well, My issue is not learning it so much but I guess I get pissed when I
run into trouble and they do it in such a contorted way. Languages are
suppose to be about making things easier and not more difficult.

As far as I'm concerned I'd rather use JS as atleast it is a programming
language. But ofcourse then it limits my user base. Why not just use a lite
version of JS that removes all the main issues with it that people don't
like instead of comming up with an entirely new way(and then another and
another).

One of the issues with it people might not like is the very fact that it
is a programming language. I might not want to allow just any old
program written by anyone to run on my computer. But I mind less reading
their HTML documents or letting them make suggestions about how they
should be laid out in stylesheets.

I'm tired of a new language comming out every 3.4 days just because
someone thinks they can do it better.

Instead of being productive one ends up spending there time learning the new
language. CSS looks good from the outside but not having basic programming
constructs severly limits its ability. I only use it because it is
standard. I'd rather use JS because atleast with that I know whats going on.
CSS seems fine for simple transformative applications but anything beyond
that seems to be hell and counterproductive. Maybe they will fix the issues
in later versions.

I'm just here to learn enough to get me through my site. Maybe I should do
less bitching though and just learn it. Just really peeves me off when I
have to deal with so many incongruities between implementations.

It's only really IE that causes all those problems. The rest are largely
consistent on a large subset of the CSS 2.1 spec.