popup with display

[Oliver]

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not working
at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

[DU]

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6
Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?

and in IE6.0 it's not working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

This is the top-right most image.
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
Why make the span display block? Please explain.
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.
font-weight: bold;
Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

Is your css file entirely valid? Because this declaration is invalid:
..leckerkochen {
position:absolute;
left: 240;

and will fall under error conditions for CSS. No unit declared.
I don't want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You need to answer a few questions first.

Btw, I can assure you taht this function is quite bad:

function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}

Window name can not start with an underscore "_": this is not recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case, btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.

DU

[DU]

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6
Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?

and in IE6.0 it's not working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

This is the top-right most image.
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
Why make the span display block? Please explain.
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.
font-weight: bold;
Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

Is your css file entirely valid? Because this declaration is invalid:
..leckerkochen {
position:absolute;
left: 240;

and will fall under error conditions for CSS. No unit declared.
I don't want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You need to answer a few questions first.

Btw, I can assure you taht this function is quite bad:

function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}

Window name can not start with an underscore "_": this is not recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case, btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.

DU

[DU]

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not working
at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First declare
a doctype declaration, preferably strict HTMl 4.01 for best and
consistent cross-browser layout results (this will trigger MSIE 6 into
standards compliant rendering mode) and then validate your markup code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children should
not need to be positioned further. This css rule seems over-constraining
and should be avoided IMO.

..themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

[DU]

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not working
at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First declare
a doctype declaration, preferably strict HTMl 4.01 for best and
consistent cross-browser layout results (this will trigger MSIE 6 into
standards compliant rendering mode) and then validate your markup code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children should
not need to be positioned further. This css rule seems over-constraining
and should be avoided IMO.

..themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

[Oliver]

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6

Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?

I want the popup to appear left from the other div. U might be able to
see it in mozilla. But i don't want the other images to drop downwards
when <span> pops up.

and in IE6.0 it's not working

at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

This is the top-right most image.

Yep! Just tried to take an example.

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;

Why make the span display block? Please explain.

I just used block as i got some of the code from a website
http://www.meyerweb.com/eric/css/edge/popups/demo.html
it doesn't matter if it's block or whatever to me.

position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;

Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?

See above! I could also have written z-index:2; i just used the 100, as
i got it from the other code, and it makes sense in that way, that it
makes sure nothing is anymore above this layer.

background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;

Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.

Will this not screw up then the entire layout, if they are scaleable?

font-weight: bold;

Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.

I'm pretty new to css. Lot of issues i have to deal with. But does
making the code slim help on this specific problem? I mean i'm not
having a problem with the writting. It's the positioning.

text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

Is your css file entirely valid? Because this declaration is invalid:
.leckerkochen {
position:absolute;
left: 240;

and will fall under error conditions for CSS. No unit declared.

Got that. I corrected it in the newer version.

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You need to answer a few questions first.

Btw, I can assure you taht this function is quite bad:

function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}

Window name can not start with an underscore "_": this is not
recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case,
btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.

DU

Ok, that makes sense. The function will be changed later on, when there
will be actual content for it.
Are u willing to explain me the nesting thing? It seems i just can't get
it to work. That's why i have this weird setup.
I think i tried everything now and i never get these nesting things to work.

Thanks Olli

[Oliver]

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6

Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?

I want the popup to appear left from the other div. U might be able to
see it in mozilla. But i don't want the other images to drop downwards
when <span> pops up.

and in IE6.0 it's not working

at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

This is the top-right most image.

Yep! Just tried to take an example.

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;

Why make the span display block? Please explain.

I just used block as i got some of the code from a website
http://www.meyerweb.com/eric/css/edge/popups/demo.html
it doesn't matter if it's block or whatever to me.

position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;

Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?

See above! I could also have written z-index:2; i just used the 100, as
i got it from the other code, and it makes sense in that way, that it
makes sure nothing is anymore above this layer.

background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;

Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.

Will this not screw up then the entire layout, if they are scaleable?

font-weight: bold;

Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.

I'm pretty new to css. Lot of issues i have to deal with. But does
making the code slim help on this specific problem? I mean i'm not
having a problem with the writting. It's the positioning.

text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

Is your css file entirely valid? Because this declaration is invalid:
.leckerkochen {
position:absolute;
left: 240;

and will fall under error conditions for CSS. No unit declared.

Got that. I corrected it in the newer version.

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You need to answer a few questions first.

Btw, I can assure you taht this function is quite bad:

function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}

Window name can not start with an underscore "_": this is not
recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case,
btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.

DU

Ok, that makes sense. The function will be changed later on, when there
will be actual content for it.
Are u willing to explain me the nesting thing? It seems i just can't get
it to work. That's why i have this weird setup.
I think i tried everything now and i never get these nesting things to work.

Thanks Olli

[Oliver]

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not
working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First declare
a doctype declaration, preferably strict HTMl 4.01 for best and
consistent cross-browser layout results (this will trigger MSIE 6 into
standards compliant rendering mode) and then validate your markup code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children should
not need to be positioned further. This css rule seems over-constraining
and should be avoided IMO.

.themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

I'm sure u are right, but i just don't get it.

What would be logical to me is that the top div is parent of following
div's and that they would act as childs, but when i try it it's nothing
like that at all.

Thanks Olli

[Oliver]

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not
working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First declare
a doctype declaration, preferably strict HTMl 4.01 for best and
consistent cross-browser layout results (this will trigger MSIE 6 into
standards compliant rendering mode) and then validate your markup code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children should
not need to be positioned further. This css rule seems over-constraining
and should be avoided IMO.

.themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

I'm sure u are right, but i just don't get it.

What would be logical to me is that the top div is parent of following
div's and that they would act as childs, but when i try it it's nothing
like that at all.

Thanks Olli

[Oliver]

Oliver schrieb:

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not
working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First
declare a doctype declaration, preferably strict HTMl 4.01 for best
and consistent cross-browser layout results (this will trigger MSIE 6
into standards compliant rendering mode) and then validate your markup
code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children
should not need to be positioned further. This css rule seems
over-constraining and should be avoided IMO.

.themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

I'm sure u are right, but i just don't get it.

What would be logical to me is that the top div is parent of following
div's and that they would act as childs, but when i try it it's nothing
like that at all.

Thanks Olli

I did upload the newest versions.
Only little things have changed.
But i added a doctype, don't know what this does though.

[Oliver]

Oliver schrieb:

DU schrieb:

Oliver wrote:

Hello,
i'm having trouble with a css type popup.
It's not doing what i want in Mozilla 1.6 and in IE6.0 it's not
working at all.

The html code looks like this:

<div class="themenkueche" id="tk">
<h1>Themenk&uuml;chen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits f&uuml;r Kids<br>Leckere Sachen</span>
</a>
</p>
</div>

And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}

you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css

I don't want the other parts of the on the side located links jump
down when i go over the images with a mouse. And i want the popup
appear in the IE. Where am i wrong with my code? Any ideas?

Thank you for helping.
Cheers
Olli

You have improper nesting everywhere in your markup code. First
declare a doctype declaration, preferably strict HTMl 4.01 for best
and consistent cross-browser layout results (this will trigger MSIE 6
into standards compliant rendering mode) and then validate your markup
code

W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

W3C validator:
http://validator.w3.org/

You absolutely need to fix the incorrect nestings issues first.

Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children
should not need to be positioned further. This css rule seems
over-constraining and should be avoided IMO.

.themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}

There is for sure other ways, much more simpler and cross-browser to
achieve what you want.

DU

I'm sure u are right, but i just don't get it.

What would be logical to me is that the top div is parent of following
div's and that they would act as childs, but when i try it it's nothing
like that at all.

Thanks Olli

I did upload the newest versions.
Only little things have changed.
But i added a doctype, don't know what this does though.