Div not nested correctly

R

Remy

I have Header Panel with a starting image and then a background image
and some text.
I would like to have everything on one line inside the 28px block. The
background should start AFTER the image.
Depending on if I have the End text, I either have everything on 2
lines or the background does not fill up the panelHeader div. It also
looks different on IE and Firefox....
This is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled</title>
<style type="text/css">

..panelHeader
{
height:28px;
width:100%;
display: block;
}

..panelHeaderBgStartImg
{
position: relative;
display: inline;
float: left;
}

..panelHeaderContent
{
position: relative;
display: inline;
height:100%;
float: left;
padding-top:6px;
background-image: url(bg_panel_grey.png);
background-repeat:repeat-x;
}

</style>
</head>
<body>
<table>
<tr>
<td style="width:300px">
<div class="panelHeader">
<img width="10" height="28" alt=""
src="bg_panel_grey_start.png"
class="panelHeaderBgStartImg"/>
<div
class="panelHeaderContent">
<div style="float:left;display:
inline;">Start</div>
<div style="float:right;display: inline;">End</
div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
 
J

Jonathan N. Little

Remy said:
I have Header Panel with a starting image and then a background image
and some text.
I would like to have everything on one line inside the 28px block. The
background should start AFTER the image.
Depending on if I have the End text, I either have everything on 2
lines or the background does not fill up the panelHeader div. It also
looks different on IE and Firefox....
This is the code:
Click to expand...

<snip code>

"float:right;display: inline;"

Makes no sense, they are contradictory, if you float an element it
becomes a block.

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

BTW you are trying to layout your page using a table...do a little
searching on NG and you will get ample info on why this is a bad idea.
 
B

Ben C

I have Header Panel with a starting image and then a background image
and some text.
I would like to have everything on one line inside the 28px block. The
background should start AFTER the image.
Click to expand...

Put the img inside the <div class="panelHeaderContent">.

Starting a new non-floated normal-flow block box (like a div) always
starts a new line.

A few odd things in your markup, comments below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Click to expand...

Better to use HTML 4.01 strict doctype, search archives for
explanations.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled</title>
<style type="text/css">

.panelHeader
{
height:28px;
width:100%;
Click to expand...

width:100% is unnecessary-- normal flow block boxes fill the containing
width anyway. width:100% will cause problems if you give panelHeader
borders, padding or margin.
display: block;
}

.panelHeaderBgStartImg
{
position: relative;
Click to expand...

Why relative?
display: inline;
float: left;
Click to expand...

display:inline meaningless since float:left as Jonathan N. Little
already commented.

Sometimes display:inline is used in conjunction with float to get rid of
list-item bullets in browsers that don't support list-style-type:none.
But this isn't a list item.
.panelHeaderContent
{
position: relative;
display: inline;
height:100%;
float: left;
Click to expand...

No need for display:inline or position:relative here.
 
R

Remy

Thanks a lot for the hints.
I'm aware that tables are not the best solution, but that is part of
the page as it is now. Working on changing that.

Now, I cannot add the image to the <div class="panelHeaderContent">
part, because the idea of the image is that it has a little corner
that is transparent. If it is in the div, the background shines
through and the intended effect is gone.

I've changes everything according to your suggestions, but it still
looks off in firefox and in IE too if I don't have the End text.
I copied it to my test server:

206.196.24.4/supertext/util/test.htm (just add the http://)

You can see that in Firefox the first one is on two lines, and in the
second one, the background does not go all the way.
What else am I missing?

Cheers

Remy
 
B

Ben C

Thanks a lot for the hints.
I'm aware that tables are not the best solution, but that is part of
the page as it is now. Working on changing that.

Now, I cannot add the image to the <div class="panelHeaderContent">
part, because the idea of the image is that it has a little corner
that is transparent. If it is in the div, the background shines
through and the intended effect is gone.

I've changes everything according to your suggestions, but it still
looks off in firefox and in IE too if I don't have the End text.
I copied it to my test server:

206.196.24.4/supertext/util/test.htm (just add the http://)

You can see that in Firefox the first one is on two lines, and in the
second one, the background does not go all the way.
What else am I missing?
Click to expand...

This is an interesting case, and I think Firefox is wrong.

My earlier reply was mistaken, because I failed to observe that
..panelHeaderContent was floated.

The question is the width of .panelHeaderContent. It's an auto-width
left float containing a left float and a right float. Its computed width
should be the sum of the widths of its contents, much less than 290px in
most default fonts, so there should be plenty of room for
..panelHeaderContent on the same line as .panelHeader.

Anyway, FF seems to float the right float in .panelHeaderContent all the
way to the right of the 300px container (the <td>), making the computed
width of .panelHeaderContent 300px. I can see no justification for that.
Opera and Konqueror both get it right. But "right" isn't the effect you
want, since you want "End" at the right of the <td> presumably.

Your problem is easily fixed though if you just add width:290px to the
selector for .panelHeaderContent. The container is 300px and the image
is 10px, so you know that width needs to be 290px.
 
J

Jonathan N. Little

Ben C wrote:
Anyway, FF seems to float the right float in .panelHeaderContent all the
way to the right of the 300px container (the <td>), making the computed
width of .panelHeaderContent 300px. I can see no justification for that.
Opera and Konqueror both get it right. But "right" isn't the effect you
want, since you want "End" at the right of the <td> presumably.

Your problem is easily fixed though if you just add width:290px to the
selector for .panelHeaderContent. The container is 300px and the image
is 10px, so you know that width needs to be 290px.
Click to expand...

..panelHeaderContent
{
width: 290px; ...
,
Yep, explicit width needed. Usually IE borks if you do not specify a
width on floated blocks.

Which Opera? Because Opera 8.51 computes DIV 'panelHeaderContent' much
less than 290 pixels but as the min width of both contained DIVs which I
do not believe the OP wishes.

But I must say all the nested floating DIVs with a TABLE? Looks like
some need to clean up their 'design'.
 
B

Ben C

Ben C wrote:


.panelHeaderContent
{
width: 290px; ...
,
Yep, explicit width needed. Usually IE borks if you do not specify a
width on floated blocks.
Click to expand...

In this case it was FF not doing what the OP wanted. FF was wrong, but
correct behaviour in this case is also not what he wanted. No idea what
IE was doing, perhaps on this occasion a fortuitous concatenation of
bugs resulting in what he did want.
Which Opera? Because Opera 8.51 computes DIV 'panelHeaderContent' much
less than 290 pixels but as the min width of both contained DIVs which I
do not believe the OP wishes.
Click to expand...

Opera 8.02, also does what you describe-- width of panelHeaderContent is
the width of the two floats in it. I believe this to be correct.

As you say, not what the OP wants, but what FF was doing was not what he
wanted either since making panelHeaderContent 300px wide put it below
the floated img instead of to the right of it.
 
R

Remy

Thanks for the hints.
Above was just a simplified example. Idea was to have control with a
header panel that could be placed anywhere and then would
automatically adjust the width.
Looks like I have to use tables nevertheless :-(
 
J

Jonathan N. Little

Remy said:
Thanks for the hints.
Above was just a simplified example. Idea was to have control with a
header panel that could be placed anywhere and then would
automatically adjust the width.
Looks like I have to use tables nevertheless :-(
Click to expand...
No, you just have to

1) supply a URL so we can see what you are *really* trying to accomplish
2) be receptive when you will be shown how to approach the design
differently (and most likely there is a better way then what you are now
attempting)
 
R

Remy

Guys,
Sorry for the slow response. I decided to rewrite the whole thing with
CSS. So this might take some time and hopefully will solve the above
problem too.

I really appreciate the help.

Cheers

Remy
 

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

Similar Threads

Text does not display correctly to glow 2
Clickable Div Block 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help , Having problem with Drag n Drop ? 9
Help with my responsive home page 2
Slideshow not working properly 2
Positioning CSS components 1
Need help , Having problem with Drag n Drop... 1

Members online

No members online now.
Total: 36 (members: 1, guests: 35)
Robots: 439

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top