Netscape and divs

[ChrisRChamberlain]

Hi all,

Have a page with 3 divs following in succession down the page.

Rightly or wrongly, the last tag in each div, width:100%, is <p> to force a space between the divs.

IE renders the page as expected, NS ignores the <p>.

Any way of resolving the issue?

TIA

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[philote]

A <p> inside a div shouldn't make space between the divs. Can you post some of the actual html and stylesheet?

 

[ChrisRChamberlain]

philote

Thanks for your response - the page, with additional divs, is at:-

http://www.pdfcommander.net/tutorial1.html

Inside or following the div, <p> forces a break in IE but not in NS.

stylesheet for div is:-

.image_left{
[tab]left: 0px;
[tab]width: 100%;
}

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[ChrisHirst]

you can insert a spacer div between each div or simply set a bottom margin.




Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisRChamberlain]

On reflection, if you added a padding-bottom value to the div, would that resolve it?

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[ChrisHunt]

Rightly or wrongly, the last tag in each div, width:100%, is <p> to force a space between the divs

That'll be "wrongly".

if you added a padding-bottom value to the div, would that resolve it?

Almost, but that would put the space inside the <div>. What you need is some bottom margin:

div {
   margin-bottom: 1em;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisRChamberlain]

Thanks to all.

margin-bottom: 1em

in the divs resolves IE but still leaves NS as a mess.

Any further ideas?

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[ChrisHirst]

adding clear:right to the .image_left class should stop that

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisRChamberlain]

ChrisHirst

Thanks - unfortunately not.

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[ChrisHunt]

I think it should be [tt]clear:left[/tt] that you give to the image_left class.

Alternatively, you could use the technique shown in

http://www.positioniseverything.net/easyclearing.html

to prevent the floated images extending below their enclosing <div>s.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisHunt]

btw, do you think we should "red flag" philote from this thread for not being called "Chris"?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Genimuse]

LOL!

Oh, dang, now I'll get red-flagged, too. Let's just say my name is Chris. ;-)

 

[ChrisHirst]

yep clear:left it certainly should be.



either RF or a change of name



Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisRChamberlain]

Thanks to all the Chris's, real or honarary!

It is aligning correctly in NS now, excepting that NS does not seem to respect

margin-bottom: 1em

and closes up the space between the divs.

What thoughts?

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk

 

[philote]

As one of the Chris's pointed out (Chris Hunt to be precise), you can use a technique to prevent the images from dropping below the bottom of the divs. This is where your problem is, as you can see if you add a border around the divs. The link Chris gave describes a solution where you basically have to add:

.image_left:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

to your style sheet.

I believe IE is incorrect to add spacing between the bottom of the image and the top of the next div, but the above fix should make it display the same in NS and IE(perhaps not IE for Mac, look at Chris's link for details).

Hope that helps,
Chris
;-)

 

[ChrisRChamberlain]

philote

Thanks for the code - confused by the multiplicity of Chris's and hadn't picked up on that link as being the route to the solution.

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander^tm.com
PDFcommander^tm.co.uk