Problem positioning text over an centered image

[Matt Silberstein]

I am trying to make a page that will be 800px wide. That is, I have an
800px image. I want the content of the page centered. I can do that
fine. On the top, I want an image logo with a text menu placed on top.
Right now I have that working just fine in Mozilla and horrible in IE.
The page validates just fine for both CSS and HTML. This should be
easy, but somehow I just don't get positioning.

Here is the link to the page: http://www.nyccure.com/test/ptest.html

Any suggestions, assuming they are anatomically possible, are
appreciated.
TIA.
--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Leif K-Brooks]

Matt Silberstein wrote:

I am trying to make a page that will be 800px wide.

<http://allmyfaqs.com/faq.pl?AnySizeDesign>

[Matt Silberstein]

On Thu, 22 Sep 2005 22:18:21 GMT, in
comp.infosystems.www.authoring.html , Leif K-Brooks
<eu*****@ecritters.biz> in <N4*******************@monger.newsread.com>
wrote:

Matt Silberstein wrote:

I am trying to make a page that will be 800px wide.

<http://allmyfaqs.com/faq.pl?AnySizeDesign>

Not the question I had, but fine. So how do I deal with an image logo?
Let me rephrase that part of the issue. I want to display the logo, an
image, I want it centered, and I want to overlay a text menu on the
right side of the image.
--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Alan J. Flavell]

On Thu, 22 Sep 2005, Matt Silberstein wrote:

On Thu, 22 Sep 2005 22:18:21 GMT, in
comp.infosystems.www.authoring.html , Leif K-Brooks
wrote:

Matt Silberstein wrote:

I am trying to make a page that will be 800px wide.
<http://allmyfaqs.com/faq.pl?AnySizeDesign>

Which was pretty much my reaction too...
Not the question I had, but fine. So how do I deal with an image
logo?

Don't make it 800px wide.

If you have an image that has to be, in and of itself, let's say
2,000px wide, then I won't argue with you about anysizedesign. For
example if you're giving a course on radiography, the images simply
/have/ to contain enough detail to make their clinical point. Those
who don't happen to have a display 2,000px wide will have to scroll as
best they can. That's the reality of the problem domain. So to say:
"it's the exception that proves the rule".

*But* for a common or garden web page, different considerations apply,
and if you insist on displaying your company logo at 800px in my
chosen browser window (which might be about 650px wide, or whatever I
last chose it to be), then you're unlikely to appeal to this
particular customer.

You haven't really been too definite (the URL of a draft might have
helped to get a more concrete idea of your requirement), but ISTM that
you might cause less harm if you defined your logo as a CSS
background, rather than trying to cramp it in as HTML content.

good luck

[Matt Silberstein]

On Thu, 22 Sep 2005 23:41:24 +0100, in
comp.infosystems.www.authoring.html , "Alan J. Flavell"
<fl*****@ph.gla.ac.uk> in
<Pi******************************@ppepc56.ph.gla.a c.uk> wrote:

On Thu, 22 Sep 2005, Matt Silberstein wrote:

On Thu, 22 Sep 2005 22:18:21 GMT, in
comp.infosystems.www.authoring.html , Leif K-Brooks
wrote:

>Matt Silberstein wrote:
>> I am trying to make a page that will be 800px wide.
>
><http://allmyfaqs.com/faq.pl?AnySizeDesign>
Which was pretty much my reaction too...
Working on it now.
Not the question I had, but fine. So how do I deal with an image
logo?

Don't make it 800px wide.

If you have an image that has to be, in and of itself, let's say
2,000px wide, then I won't argue with you about anysizedesign. For
example if you're giving a course on radiography, the images simply
/have/ to contain enough detail to make their clinical point. Those
who don't happen to have a display 2,000px wide will have to scroll as
best they can. That's the reality of the problem domain. So to say:
"it's the exception that proves the rule".

*But* for a common or garden web page, different considerations apply,
and if you insist on displaying your company logo at 800px in my
chosen browser window (which might be about 650px wide, or whatever I
last chose it to be), then you're unlikely to appeal to this
particular customer.

You haven't really been too definite (the URL of a draft might have
helped to get a more concrete idea of your requirement), but ISTM that
you might cause less harm if you defined your logo as a CSS
background, rather than trying to cramp it in as HTML content.

Ok, if I have to think I will. I will go and read the page in detail
and think on it. And I even promise that if I can make it work that
way I will (and I have lots of freedom here).

That said, can someone help with the problem that I thought I had? Why
does the page look just fine (by my old view) in Mozilla and so
totally wrong in IE?
good luck

Thanks.
--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Jim Moe]

Matt Silberstein wrote:

[...] This should be
easy, but somehow I just don't get positioning.

Here is the link to the page: http://www.nyccure.com/test/ptest.html

You cannot use margin or padding to position position:absolute (or
:fixed); the name gives you a hint. Use left, right, top, bottom:

#tagline {
position: absolute;
top: 75px;
left: 300px;
}

..buttonscontainer {
border: 5px;
width: 100px;
position: absolute;
right: 0;
}

Why are you using HTML 4.01 Transitional? Transitional is for *legacy*
pages. Use Strict.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Matt Silberstein]

On Thu, 22 Sep 2005 23:18:19 -0700, in
comp.infosystems.www.authoring.html , Jim Moe
<jm***************@sohnen-moe.com> in
<kr********************@giganews.com> wrote:

Matt Silberstein wrote:

[...] This should be
easy, but somehow I just don't get positioning.

Here is the link to the page: http://www.nyccure.com/test/ptest.html
You cannot use margin or padding to position position:absolute (or
:fixed); the name gives you a hint.

The problem with such hints is that I as likely to be misled as shown
the right direction. I am just not getting my head around CSS
positioning. It will click eventually, but not yet.
Use left, right, top, bottom:

#tagline {
position: absolute;
top: 75px;
left: 300px;
}

.buttonscontainer {
border: 5px;
width: 100px;
position: absolute;
right: 0;
}
Thanks, that works and seems simple. I would swear I tried that, so I
will try to look back at other versions to see if I can figure out
what I had done wrong. The padding/margin was used because the
top/left/right stuff was not working before.
Why are you using HTML 4.01 Transitional? Transitional is for *legacy*
pages. Use Strict.

Because I grabbed a template from somewhere and have been modifying it
since. I will keep an eye on that in the future.

Thanks for the help.

--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Stan Brown]

On Fri, 23 Sep 2005 04:03:28 GMT in
comp.infosystems.www.authoring.html, Matt Silberstein favored us
with...

That said, can someone help with the problem that I thought I had? Why
does the page look just fine (by my old view) in Mozilla and so
totally wrong in IE?

Upthread someone suggested you provide a URL. Without that, we'd
only be guessing at an answer to your question.

See "Why we won't help you" in my sig.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:

http://diveintomark.org/archives/200..._wont_help_you

[Jim Moe]

Matt Silberstein wrote:

Thanks, that works and seems simple. I would swear I tried that, so I
will try to look back at other versions to see if I can figure out
what I had done wrong. The padding/margin was used because the
top/left/right stuff was not working before.

IIRC, top/right/bottom/left only work for :absolute and :fixed.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Matt Silberstein]

On Fri, 23 Sep 2005 13:12:15 -0700, in
comp.infosystems.www.authoring.html , Jim Moe
<jm***************@sohnen-moe.com> in
<PO******************************@giganews.com> wrote:

Matt Silberstein wrote:

Thanks, that works and seems simple. I would swear I tried that, so I
will try to look back at other versions to see if I can figure out
what I had done wrong. The padding/margin was used because the
top/left/right stuff was not working before.

IIRC, top/right/bottom/left only work for :absolute and :fixed.

And I would swear that I tried that. That does not me I did try it, I
probably didn't since it works now. But I was sure I had. Anyway,
thanks for the help and I am now rethinking the design for other
screen sizes.

--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Matt Silberstein]

On Fri, 23 Sep 2005 13:08:44 -0400, in
comp.infosystems.www.authoring.html , Stan Brown
<th************@fastmail.fm> in
<MP************************@news.individual.net> wrote:

On Fri, 23 Sep 2005 04:03:28 GMT in
comp.infosystems.www.authoring.html, Matt Silberstein favored us
with...

That said, can someone help with the problem that I thought I had? Why
does the page look just fine (by my old view) in Mozilla and so
totally wrong in IE?
Upthread someone suggested you provide a URL. Without that, we'd
only be guessing at an answer to your question.

I provided one in my first post. I suppose I should have added it
again.
See "Why we won't help you" in my sig.

I did, it makes sense to me.
--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/