Any Idea for IE and Opera - Its working with Firefox ...

K

Knut Krueger

Hi to all,
http://www.briefwexl.at/index.php
The short examples are left of the head with firefox.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.

To use a background for the H1 text for the pictures is a little tricky,
but the images are displayed like overflow hidden at the right boarder
(to the head).

First question?
does anybody understand what I would like to get ;-)

second question?
if yes any Idea to solve the problem without more space for the images?

Regards Knut
 
E

Els

Knut said:
http://www.briefwexl.at/index.php
The short examples are left of the head with firefox.

Yup, that's what I see.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.

Yup, that's what I see in IE7.
To use a background for the H1 text for the pictures is a little tricky,
but the images are displayed like overflow hidden at the right boarder
(to the head).

Now you lost me...
First question?
does anybody understand what I would like to get ;-)

It would help if you would say which is the desired end result - what
Firefox does, or what IE does? (Guessing Firefox)
second question?
if yes any Idea to solve the problem without more space for the images?

I would not have the 'head' as a series of floated images. I'd make it
one background image, and then make the combination of head and texts
a fixed width div and float the texts left inside of it.

Disadvantage could be that the text will cover the tip of the nose of
the man, but if you want to avoid that, you have only one option: make
sure there is enough space. Or do you really want the head to go over
the texts, like it does now in Firefox?

I have no idea what the rest of your page is gonna be like, but
currently, in Firefox, if you make the window narrower, the texts
disappear off the left side of the canvas...
 
B

Beauregard T. Shagnasty

Knut said:
Hi to all,
http://www.briefwexl.at/index.php
The short examples are left of the head with firefox.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.

Possibly because you have a *comment* above the doctype. Known to fark
up Internet Exploder. Then you have an *incomplete* doctype in use.

See: http://www.w3.org/QA/2002/04/valid-dtd-list.html

and select HTML 4.01 Strict. Transitional is for legacy pages, not new
ones.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
K

Knut Krueger

Els said:
Yup, that's what I see.


Yup, that's what I see in IE7.


Now you lost me...


It would help if you would say which is the desired end result - what
Firefox does, or what IE does? (Guessing Firefox)

Yes firefox
I would not have the 'head' as a series of floated images. I'd make it
one background image, and then make the combination of head and texts
a fixed width div and float the texts left inside of it.

But then there is a small place for all images not only for those near
the nose. And I would like to use the place for a floating text from
other pages.
Disadvantage could be that the text will cover the tip of the nose of
the man, but if you want to avoid that, you have only one option: make
sure there is enough space. Or do you really want the head to go over
the texts, like it does now in Firefox?

No, the text comes from a Database and will be changed at every reload,
build with gd library with php. So I will choose a short texts or and a
smaller font from the database for the nose in the future.

I have no idea what the rest of your page is gonna be like, but
currently, in Firefox, if you make the window narrower, the texts
disappear off the left side of the canvas...

The suggestion from the illustrator:
(it is only a static image)
http://localhost/briefwexl


Knut
 
E

Els

Knut said:
But then there is a small place for all images not only for those near
the nose. And I would like to use the place for a floating text from
other pages.

No, I did not say "fixed width as wide as it has room to the left of
the nose" :)

Fixed width div, as wide as you need for the face *and* the texts.
Then use the face as a background image to that div, and float the
texts left inside the same div. If you have the texts too wide then,
they will fall in front of the nose.
No, the text comes from a Database and will be changed at every reload,
build with gd library with php. So I will choose a short texts or and a
smaller font from the database for the nose in the future.

Sounds complicated.
The suggestion from the illustrator:
(it is only a static image)
http://localhost/briefwexl

As Jonathan said - we can't see that from here.
 
G

GTalbot

Hi to all,
http://www.briefwexl.at/index.php

The short examples are left of the head with firefox.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.

To use a background for the H1 text for the pictures is a little tricky,
but the images are displayed like overflow hidden at the right boarder
(to the head).

First question?
does anybody understand what I would like to get ;-)

Yes I do.
second question?
if yes any Idea to solve the problem without more space for the images?

Yes I have.

First, understand that your design is over-constrained. You over-code
somewhat to control pixel-precise layout.

Second, it is always best to use default values instead of declaring
them.

.briefwexl {
display: block;
...
}

and

#text1 h1 {
background: transparent url(../png1.png) no-repeat top left;
display: block;
...
}

Here, you can safely remove display: block; from both css rules since
<div> and <h1> elements are block-level elements: that's by
definition.

3rd:
Use inheritance and inherited properties instead of redeclaring and
redefining CSS declarations over and over.

color and font-family are good examples of inheritable properties.
Just declare once on the body element and then you have no need to
repeat it later. In other words

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family:Arial,sans-serif,tahoma,Myriad,Optima; }

h4 { font-size:100%; font-weight:normal; color:black;}
h5 { font-size:90%; font-weight:bold; color:black;}

can be replaced (and better, correctly replaced) entirely with

body
{
background-color: rgb(254, 213, 1);
color: black;
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}

Writing Efficient CSS
Rely on Inheritance
http://developer.mozilla.org/en/docs/Writing_Efficient_CSS#Rely_on_inheritance.21

4th:
When you try to debug a webpage, one strategy is to surround each
major blocks with a border so that you can see what may be happening
in the rendering. Here, the .kopf block is too narrow to be holding
the images of the face and the 5 empty <h1> <span>s on its left (with
the pngX.png background images): you have an over-constrained layout,
not enough space... So, the 5 #textN h1 are pushed below in IE 7. I
wouldn't say this is a bug... but just that IE 7 float model is more
sensitive to constraints, pixel-precise layouts.

Solution:
just give your .kopf block a width of 40em instead of 35em.

.kopf
{
border: 2px solid blue;
clear: right;
float: right;
margin: 0em 0em 0em 1em;
width: 40em;
}

Another solution (strange) is to avoid, to remove

div {font-size: 92%;}

Anything under font-size: 100%;
is suspicious and is to be avoided except for fine-print.
Understand that now several browsers (Firefox 1+, Opera 8+, Safari 3,
K-meleon, Konqueror 3+, Icab 3+, Hv3 TKHTML alpha 16, etc) all offer
the users to set a minimum font-size for the rendering of webpage. So,
setting under 100% might not be rendered in the users' browsers.

Truth or consequences in web design:
Font-Size (excellent reading):
http://pages.prodigy.net/chris_beall/TC/Font size.html

"1em (or 100%) is equivalent to setting the font size to the user's
preference. Use this as a basis for your font sizes, and avoid setting
a smaller base font size.
Avoid sizes in em smaller than 1em for text body, except maybe for
copyright statements or other kinds of 'fine print.'"
W3C Quality Assurance tip for webmasters:
Care Font Size
http://www.w3.org/QA/Tips/font-size


"For this year's list of worst design mistakes, (...) I asked readers
of my newsletter to nominate the usability problems they found the
most irritating. (...)
1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many
votes as the #2 mistake. About two-thirds of the voters complained
about small font sizes or frozen font sizes;"
Top Ten Web Design Mistakes of 2005: 1. Legibility Problems
http://www.useit.com/alertbox/designmistakes.html

Regards, Gérard
 
G

GTalbot



An even more compact, simplified, clarified, more optimized solution
is to replace all this:

#text1 h1
{
background: transparent url("png1.png") no-repeat top left;
}

#text2 h1
{
background: transparent url("png2.png") no-repeat top left;
}

#text3 h1
{
background: transparent url("png3.png") no-repeat top left;
}

#text4 h1
{
background: transparent url("png4.png") no-repeat top left;
}

#text5 h1
{
background: transparent url("png5.png") no-repeat top left;
}

<div id="text1"> <h1><span> </span></h1></div>

<div id="text2"> <h1><span> </span></h1></div>

<div id="text3"> <h1><span> </span></h1></div>

<div id="text4"> <h1><span> </span></h1></div>



with this:


<div id="text1"><img src="png1.png" alt=""></div>

<div id="text2"><img src="png2.png" alt=""></div>

<div id="text3"><img src="png3.png" alt=""></div>

<div id="text4"><img src="png4.png" alt=""></div>

I tested it with Firefox 2.0.0.12, Opera 9.26, Safari 3.0.4, IE 7 and
everything was laid out correctly, accordingly.

See for yourself:

http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl.html

http://www.gtalbot.org/BrowserBugsSection/Briefwexl/Briefwexl2.html

Regards, Gérard
 
K

Knut Krueger

GTalbot said:

Just a question:

Why is the border yround the body in IE complete earound the body and in
Mozilla only around the text "Hauptfenster -- TestText --" if I change
in your example:
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}

to
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
border: 2px solid black;
}

Regards Knut
 
B

Ben C

Just a question:

Why is the border yround the body in IE complete earound the body and in
Mozilla only around the text "Hauptfenster -- TestText --" if I change
in your example:
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}

to
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
border: 2px solid black;
}

The height of the body element is auto by default, which means it should
be the height of its contents and no higher.

Funny things happen with body backgrounds-- they spread all over the
entire document extent under certain circumstances.

But for the purposes of the border, Firefox, like most browsers (other
than IE) sizes the body like any other block.
 
K

Knut Krueger

The height of the body element is auto by default, which means it should
be the height of its contents and no higher.
and min-height: 1024px is working but min-height:100%; not :-(

and its the same if i use another container.


......
.container
{
background-color: rgb(154, 213, 1);
border: 2px solid magenta;
min-height:100%;
}
</style>

</head>

<body>
<div class="container">
............
</div>
</body>


Is there any possibility to get the containter or body to 100% size,
means as big as the background?

Regards Knut
 
B

Ben C

and min-height: 1024px is working but min-height:100%; not :-(

and its the same if i use another container.


.....
.container
{
background-color: rgb(154, 213, 1);
border: 2px solid magenta;
min-height:100%;
}
</style>

</head>

<body>
<div class="container">
...........
</div>
</body>


Is there any possibility to get the containter or body to 100% size,
means as big as the background?

You need to make sure everything all the way up to the top has a height
for the percentage to work. Remember percentage heights of auto heights
are (or should be) ignored.

html, body { height: 100% } usually does the trick.
 
K

Knut Krueger

Ben said:
html, body { height: 100% } usually does the trick.


ok the trick is working :)
but
I tired to set the head
position:absolute;
bottom:0px;
right:0px;

The head is bottom/right with IE
A big bottom margin with Opera http://localhost/briefwexl/test.php :


html, body {
background-color: rgb(254, 213, 1);
height:100%;
margin:0px;
padding:0px;

}

A 1px margin with all browsers:
http://www.briefwexl.at/
html, body {
background-color: rgb(254, 213, 1);
height:100%;
margin:0px;
padding:0px;
border: 1px solid rgb(254, 213, 1);
}

Do you hav other hints for that, may some mistake from me ...

Regards Knut
 
B

Ben C

ok the trick is working :)
but
I tired to set the head
position:absolute;
bottom:0px;
right:0px;

The head is bottom/right with IE
A big bottom margin with Opera http://localhost/briefwexl/test.php :

I was about to say why are you trying to position the <head> element,
but it is literally a head!

If you want the head 0px from the bottom edge of body, you need to make
body position: relative so it is the containing block for <div
class="kopf">. Otherwise the kopf goes at the bottom of the viewport.
 
D

dorayme

Knut Krueger said:
Just a question:

Why is the border yround the body in IE complete earound the body and in
Mozilla only around the text "Hauptfenster -- TestText --" if I change
in your example:
body{background-color: yellow;}

to
body{background-color: yellow;border: 2px solid black;}


You will get a much better idea of things if you put in at the
top of you css for a moment:

html {background:red;}

And now you will begin to see that (as Ben says) "Firefox, like
most browsers (other than IE) sizes the body like any other
block".

Try removing *all* the html markup but leave the css in and
especially the border on the body. You will see in Firefox a
black thick (4px) line. This is the border of a body element that
has no content.

A container does not grow height for its floated children. If you
remove the float instructions from the css, you will see how the
container, the body in this case grows.

Pardon me if you do understand these things. But in case you want
more on this, you might try:

<http://netweaver.com.au/floatHouse>

Now to matters more curious to me:

The matter of the relation of the body to the html element is an
odd one. It may come as a bit of a surprise to see that saying
nothing about the html element (as often we do not) in the css
sheet nevertheless does not prevent it from assuming the colour
specified for the body.

Even when there is no colour in the body because there is no
height to the body, the html takes its cue on colour from its
child in this case:

<http://netweaver.com.au/alt/knut/knut.html>
<http://netweaver.com.au/alt/knut/knut2.html>
<http://netweaver.com.au/alt/knut/knut3.html>

It *looks* like we have here a case of the parent inheriting the
child's property values!
 
B

Ben C

On 2008-03-11 said:
Now to matters more curious to me:

The matter of the relation of the body to the html element is an
odd one. It may come as a bit of a surprise to see that saying
nothing about the html element (as often we do not) in the css
sheet nevertheless does not prevent it from assuming the colour
specified for the body.

Even when there is no colour in the body because there is no
height to the body, the html takes its cue on colour from its
child in this case:

<http://netweaver.com.au/alt/knut/knut.html>
<http://netweaver.com.au/alt/knut/knut2.html>
<http://netweaver.com.au/alt/knut/knut3.html>

It *looks* like we have here a case of the parent inheriting the
child's property values!

There are special rules for all this, and they're also different for
HTML and XHTML.

If the html element's actual background is transparent, then it nicks
body's background instead. But not in XHTML.

It's all in CSS 2.1 14.2.

I guess the point of it all is to make setting background on body have
the same effect that using attributes like bgcolor on it used to.
 
D

dorayme

Ben C said:
There are special rules for all this, and they're also different for
HTML and XHTML.

And there was I musing about backwards causation...
If the html element's actual background is transparent,

Will you excuse me if I muse aloud some more? I am not opposing
anything you say, I am just thinking through a few issues here.

If it is transparent, what can you see through it? The canvas!
Which is "the space where the formatting structure is rendered."

Does this canvas have a default colour, white? When you specify
the background of body to any different to white, what exactly is
happening? It is somehow "painting the canvas"? What? It paints
the thing behind the html element? If you specify the background
of the html element, it also paints the canvas. The canvas is
sort of multi-coloured in this picture, abstractly so,
considering elements like body can have different sizes even
within a browsing session.

It looks like a crazy picture to me involving a pretence of
giving a background colour to elements to make them different to
transparent whereas the picture is one of all elements really
being transparent all along. Specifying backgrounds "to" them is
really just a way of telling the browser to make this rather
magical thing, "the canvas" coloured in a particular way in just
those areas that can shine through.

I have had in mind for quite some time a simpler model. There is
no canvas - a least for visual rendering considerations, it is an
unnecessary fiction. The elements are glass layers. You can paint
them or not. There are rules for what shines through what if you
don't.
 
B

Ben C

And there was I musing about backwards causation...


Will you excuse me if I muse aloud some more? I am not opposing
anything you say, I am just thinking through a few issues here.

If it is transparent, what can you see through it? The canvas!
Which is "the space where the formatting structure is rendered."

Does this canvas have a default colour, white?

Usually white, but it depends on the browser. If you set html and body's
background to transparent, you will see the colour of the canvas.
When you specify
the background of body to any different to white, what exactly is
happening? It is somehow "painting the canvas"? What? It paints
the thing behind the html element?

That's the idea. If the html element's background is transparent then
the body's background is applied to the canvas instead.
If you specify the background of the html element, it also paints the
canvas. The canvas is sort of multi-coloured in this picture,
abstractly so, considering elements like body can have different
sizes even within a browsing session.

No you get one or other. If html has a non-transparent background, then
that paints the canvas, html gets a transparent background, and body's
background is just body's background.

In that case, body is just a block that's on top of html (also just a
block), that's on top of the canvas. So you'll see the canvas colour
around the edges of body.

But they recommend for some reason that in HTML documents you leave
html's background alone and set your desired canvas background on body.
It looks like a crazy picture to me involving a pretence of
giving a background colour to elements to make them different to
transparent whereas the picture is one of all elements really
being transparent all along.

Most elements are transparent (background-color's initial value is
transparent).
Specifying backgrounds "to" them is really just a way of telling the
browser to make this rather magical thing, "the canvas" coloured in a
particular way in just those areas that can shine through.

I have had in mind for quite some time a simpler model. There is
no canvas - a least for visual rendering considerations, it is an
unnecessary fiction. The elements are glass layers. You can paint
them or not. There are rules for what shines through what if you
don't.

The point of the canvas is this.

Consider this example:

<div style="width: 200px; height: 200px; overflow: scroll;
background-color: pink">
<div style="width: 300px; height: 100px; background-color: gray;
border: 10px solid green">
</div>
</div>

You can scroll the outer div to find your way to the right edge of the
inner one, and you are apparently accompanied by pink background all the
way. This is the effect everyone wants.

But the truth is the pink square is exactly 200px x 200px and no
bigger. It doesn't move: you're moving the grey div across it.

Now try this:

<div style="width: 200px; height: 200px; overflow: scroll">
<div style="width: 200px; height: 200px; background-color: pink">
<div style="width: 300px; height: 100px; background-color: gray;
border: 10px solid green">
</div>
</div>
</div>

Scroll to the right and you lose the pink background, it moves to the
left along with the other contents of the scrolling container.

This second case is analogous to a browser. The outermost div is the
viewport, and the next div down is the html (root) element. If you set a
background on the html element, you would lose it when you scrolled the
viewport. This would be a problem.

They might have said that the root element's background is applied to
the _viewport itself_, making the second case like the first one, and
meaning you never lost the background when you scrolled. But instead
they said it stays on the root element, but extends infinitely in all
directions, which is another (slightly different) way of ensuring that
you don't lose the background. Hence the concept of the canvas.

The difference is when you use a background image instead of a solid
colour: with a canvas, the image moves with the root element when you
scroll. If the background were put on the viewport, it would always stay
where it was. Effectively background-attachment would always be fixed.
 
D

dorayme

Ben C said:
Ben C said:
[...]
Now to matters more curious to me:
The point of the canvas is this.

I am still looking at your explanation, Ben. Take the delay as a
compliment. The martian brain is a bit different to the earthling
one and so please be patient.

I am resisting impudently suggesting models I have had in mind
until I see a bit more what the models have to account for.

Obviously in my practice, I have been able to get by on very
simple models with the html element as not different to the
viewport much (at least the bit of it that is not holding the
head). I have operated on a sort of "Headless Chook" model (body
being the important bit) to date and it has served me well. But I
have tastes in the non-practical areas of life and to these I
will turn my attention as I get time. <g>
 

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,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top