CSS boxing

Long · Jan 20, 2004

The following seems to work as planned on Mozilla, but has an
ugly gap between .bodyleft and .bodyright when viewing in IE.

What sort of IE hack can fix it for IE?

<HTML>
<HEAD>
<TITLE>CSS Box Test</TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<DIV CLASS="bodytop">
<P>bodytop section</P>
</DIV>
<DIV CLASS="bodyleft">
<P>bodyleft section</P>
</DIV>
<DIV CLASS="bodyright">
<P>bodyright section</P>
</DIV>
</BODY>
</HTML>

..long

Paul Furman · Jan 20, 2004

Long said:
The following seems to work as planned on Mozilla, but has an
ugly gap between .bodyleft and .bodyright when viewing in IE.

What sort of IE hack can fix it for IE?

body {
margin:0px;
}
.bodytop {
border: 1px solid #000;
height: 60px;
}
.bodyleft {
float: left;
border: 1px solid #000;
height: 120px;
width: 200px;
}
.bodyright {
border: 1px solid #000;
height: 120px;
margin-left: 200px;

I don't know but you've also got the borders doubling up which I was
able to fix (for tables) with border-collapse: collapse;

Sorry I can't be more help.

rf · Jan 20, 2004

Long said:
The following seems to work as planned on Mozilla, but has an
ugly gap between .bodyleft and .bodyright when viewing in IE.

IE has a badly broken box model, it breaks in many ways when you use float.
This is just one of them.

What sort of IE hack can fix it for IE?

Don't specify height for that right hand div.

Why do you use height anyway? Can you guarantee that your content will be
less than 200 pixels high?

Cheers
Richard.

Paul Furman · Jan 20, 2004

rf said:
Don't specify height for that right hand div.

So I get the following... with zero border to overcome the
border-collapse: collapse issue
http://www.edgehill.net/html/css/css-template.htm
(but it has a gap if I put longer text in the bodyleft)
I'm just learning this, thanks for the exercise!

PS this example doesn't have these issues, I can't tell why:
http://www.edgehill.net/html/css/css-template2.htm
(I stripped out as much as I could from the original)

Richard · Jan 20, 2004

rf wrote:

IE has a badly broken box model, it breaks in many ways when you use
float. This is just one of them.

Don't specify height for that right hand div.

Why do you use height anyway? Can you guarantee that your content will be
less than 200 pixels high?

Cheers
Richard.

I have found that if you put 2 or more divisions within a container element,
the divisions do not break within IE.
Specially when you define at least the width.

Richard · Jan 20, 2004

Long said:
The following seems to work as planned on Mozilla, but has an
ugly gap between .bodyleft and .bodyright when viewing in IE.

What sort of IE hack can fix it for IE?

http://1-large-world.com/samples/the-holy-grail.html

Your version cleaned up a bit.
Learn to use border: instead of border-left: if you are not going to be that
specific.
You do not need to name all four sides of the border as the demo shows.
The demo was showing various things you CAN include but are not necessary.
Voice-family is an option and should not be used at all.
Anything to do with "speech" is to be avoided.

The purpose of my "master" division is to define a working area for the
floating boxes.
This trick causes IE not to drop the boxes should the window be resized.

Position: absolute should not be used unless that is an absolute necessity.
Left: and Top: are also positioning elements which is one reason why you had
the gaps.

Border:solid 1px blue;
This statement says, define the box with 1 pixel wide blue solid border.
Much better than defining all four sides isn't it?

http://www.stoneware.dk/english/default.htm

Get this free editor. It has a library of all the tags and attributes for
html, javascript and even CSS.

rf · Jan 20, 2004

Richard said:
http://1-large-world.com/samples/the-holy-grail.html

Your version cleaned up a bit.

And destroyed, being fixed width.

Cheers
Richard.

Richard · Jan 20, 2004

rf wrote:

And destroyed, being fixed width.

What is it with you that nothing can have a fixed value?
If I want it to have a damn fixed value, it will.
"oh yeah and you'd be wrong and blah blah blah yada yada".
If you're so damn perfect, go tell it to w3c and bitch to them.

I can't have a fixed width, I'm not allowed to use height because I can't
guarantee height.
Then why do we have them?

rf · Jan 20, 2004

Richard said:
rf wrote:

What is it with you that nothing can have a fixed value?

Richard, it is not just me. It is just about all the regulars that frequent
this newsgrroup. We all agree that a web page should adjust itself to the
size of the viewers canvas.

If I want it to have a damn fixed value, it will.

Ok You can do that on your own site but please do not bastardize the OP's
design by applying your stupid width restrictions on his/her design. The
OP's example flowed quite nicely with the canvas size. Your example does
not.

"oh yeah and you'd be wrong and blah blah blah yada yada".

? I'm not saying you are wrong. You can do anything you want, just don't
tell other people to do that.

If you're so damn perfect, go tell it to w3c and bitch to them.

? What has the W3C to do with this?

I can't have a fixed width,

You can if you want. Just do not suggest this as a thing to do to the
newbies here.

I'm not allowed to use height because I can't
guarantee height.

That is correct. You can not gaurantee the hieght of a div (unless the only
thing in that div is an image). Put any text in that div and you totally
lose control over the divs height.

Then why do we have them?

Because the specs were originally written from what the browsers did at that
time. Because height sometimes has a use.

Now please go away and read the HTML and the CSS specs. Then read them
again. Once you understand what they say, and what they don't say, and what
they imply, come back here with a proper opinion.

Cheers
Richard.

Long · Jan 20, 2004

: rf wrote:
:
: > "Long" wrote:
: >
: >>What sort of IE hack can fix it for IE?
: >
: >
: > Don't specify height for that right hand div.
:
Tried as suggested. The gap (left right) goes away, but a bigger gap
open at top because of the <P> tag.

:
: So I get the following... with zero border to overcome the
: border-collapse: collapse issue
: http://www.edgehill.net/html/css/css-template.htm
: (but it has a gap if I put longer text in the bodyleft)
: I'm just learning this, thanks for the exercise!
:
This almost worked, but I noticed you've taken out the <P> in the divs.
If you put the P's back it looks worse.

: PS this example doesn't have these issues, I can't tell why:
: http://www.edgehill.net/html/css/css-template2.htm
: (I stripped out as much as I could from the original)
:
I am not sure about this. It looks strange under IE 5.

Long

Long · Jan 20, 2004

: Long wrote:
:
: > The following seems to work as planned on Mozilla, but has an
: > ugly gap between .bodyleft and .bodyright when viewing in IE.
:
: > What sort of IE hack can fix it for IE?
:
: http://1-large-world.com/samples/the-holy-grail.html
:
: Your version cleaned up a bit.
:
??? when viewed with IE 5, somehow the rightcontent box is placed below the
leftcontent box starting at the centercontent height.

: Learn to use border: instead of border-left: if you are not going to be that
: specific.
: You do not need to name all four sides of the border as the demo shows.
: The demo was showing various things you CAN include but are not necessary.
:
Yes it is a test case.

: Voice-family is an option and should not be used at all.
: Anything to do with "speech" is to be avoided.
:
I don't recall having that in the original code.

:
: Border:solid 1px blue;
: This statement says, define the box with 1 pixel wide blue solid border.
: Much better than defining all four sides isn't it?
:
I like to be specific. I don't know if all browsers know 'blue".

Long

Paul Furman · Jan 20, 2004

Long said:
: PS this example doesn't have these issues, I can't tell why:
: http://www.edgehill.net/html/css/css-template2.htm
: (I stripped out as much as I could from the original)
:
I am not sure about this. It looks strange under IE 5.

Long

I stripped out a lot. There were settings for <p> & <h1> etc. See the
original in the link... lots of hacks I guess. I really have to wonder
why people say CSS is so great for layout when this seems easy with
tables.... still studying...

Long · Jan 20, 2004

: Long wrote:
:
: >
: > : PS this example doesn't have these issues, I can't tell why:
: > : http://www.edgehill.net/html/css/css-template2.htm
: > : (I stripped out as much as I could from the original)
: > :
: > I am not sure about this. It looks strange under IE 5.
: >
: > Long
:
: I stripped out a lot. There were settings for <p> & <h1> etc. See the
: original in the link... lots of hacks I guess. I really have to wonder
: why people say CSS is so great for layout when this seems easy with
: tables.... still studying...
:
Yes, CSS is over-rated. Browser compatibility is a big issue.

I did missed the "holy grail" link. Here is the final version for IE 5. I have yet
to test on Mozilla. Would be interesting to view it under other browsers as well.

.bodytop {
border: 1px solid #000;
height: 1px; /* IE 5 - removes top gap */
}

.bodyleft {
position: absolute;
left: 0px;
border: 1px solid #000;
border-top: 0px;
width: 201px; /* overlap right-left borders to 1px */
}

.bodyright {
border: 1px solid #000;
border-top: 0px;
height: 1px; /* IE 5 - removes top gap */
margin-left: 200px;

Cheers,

Long

Help with Visual Lightbox: Scripts	2	May 3, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Need help with code on website (noob)	2	Jul 18, 2022
Positioning CSS components	1	Nov 16, 2023
Please Help?	0	Jul 23, 2022
Flip-Cards with Local Images	1	Mar 27, 2023
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Is it possible an iframe can overlapp another?	3	Apr 20, 2022

CSS boxing

Long

Paul Furman

rf

Paul Furman

Richard

Richard

rf

Richard

rf

Long

Long

Paul Furman

Long

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads