Height of Div within a Div

Hi,

Code is posted below.

I have a DIV that is placed within another div. The problem is on the
first div, (which is meant to be a header) I cant get rid of the extra
space that appears no matter what I change the settings to.
About 5 pixels worth of space appears which I am hoping someone can
tell me how to get rid off.
(Am viewing in IE6.)

Many Thanks
H

****StyleSheet Start****
#events_box {
width: 370px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
background-color: #B84900;
font-weight: bold;
text-transform: lowercase;
color: #FFFFFF;
float: none;
position: relative;
overflow: auto;
padding-left: 5px;
}
#events_text {
background-color: #FFFFFF;
color: #000000;
padding-left: 5px;
text-transform: none;
font-size: x-small;
}
****StyleSheet END****

<div id="events_box"><img src="assets/images/headings/events.gif"
width="61" height="20">
<div id="events_text">
<p>Date: Aug 13th<br>
Event: Mumbai Rouge presents - VIP Padlock Party<br>
Venue:
The Dunes Of Kensington<br>
Event Type: Singles Dating Party<br>
Price: &pound;15 / &pound;20<br>
Details</p>
<p>Date: Aug 14th<br>
Event: Mumbai Rouge presents - London Mela Launch Party<br>
Venue: Mumbai Rouge <br>
Event Type: Club Night <br>
Price: &pound;10 / &pound;20 <br>
Details</p>
<p>Date: Aug 15th<br>
Event: Mumbai Rouge presents - The London Mela Caberet Tent <br>
Venue: Ealing Mela, Gunnersbury Park <br>
Event Type: Summer Mela<br>
Price: FREE <br>
Details</p>
<p>Date: Aug 29th<br>
Event: Mumbai Rouge presents - VIP Holiday Special <br>
Venue: Dunes of Kensington <br>
Event Type: Club Night<br>
Price: &pound;10 / &pound;20 <br>
Details: Hosted by Radio 1;s Bobby and Nihal</p>
<p>Date: Aug 29th<br>
Event: Temptations 2004 Concert<br>
Venue: Confidential - Strictly by Invitation Only<br>
Event Type: After Party</p>
<p>&nbsp;</p>
</div>
</div>

On 9 Aug 2004 20:32:33 -0700, Harry <harrysingh1976 (AT) hotmail (DOT) com> wrote:

Hi,

Code is posted below.

I have a DIV that is placed within another div. The problem is on the
first div, (which is meant to be a header) I cant get rid of the extra
space that appears no matter what I change the settings to.
About 5 pixels worth of space appears which I am hoping someone can
tell me how to get rid off.
(Am viewing in IE6.)

I'm viewing in a newsreader. Not particularly illuminating.

Let me suggest that you put this up on a webpage and post the link. It's
going to be much easier for everyone to look at, as it stands we must
individually make your web page for you which isn't ideal for consistency
and avoiding extra errors. Also, there may be information you have not
included here which would affect the result.

In the meantime, I want to critique your code. There are a few common
problems here, and you can easily fix them.

#events_box {
width: 370px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
background-color: #B84900;
font-weight: bold;
text-transform: lowercase;
color: #FFFFFF;
float: none;
position: relative;
overflow: auto;
padding-left: 5px;
}

font-size: small - that's going to be smaller than people's default
setting. Reserve small sizes for stuff that isn't essential to read, like
legalese and such. Never reduce the size of text that you want to be read
- allow it to be 100% or 1em, or unstated.

#events_text {
background-color: #FFFFFF;
color: #000000;
padding-left: 5px;
text-transform: none;
font-size: x-small;
}

Same, even more so.

div id="events_box"><img src="assets/images/headings/events.gif"
width="61" height="20"

img requires the alt attribute. Perhaps alt="Events" ?

div id="events_text"
p>Date: Aug 13th<br
Event: Mumbai Rouge presents - VIP Padlock Party<br
Venue:
The Dunes Of Kensington<br
Event Type: Singles Dating Party<br
Price: &pound;15 / &pound;20<br
Details</p

Is this REALLY a paragraph? Looks like a list to me. I'd use ul markup,
and you can remove bullets with CSS.

p>&nbsp;</p
/div
/div

The empty paragraph - what purpose does it serve? If it's a spacer, use
CSS to create a padding on the div. The only time I ever do this (and when
I do it it's a div) is to have something there which can clear a float. As
you're not floating, I don't see why.

On Tue, 10 Aug 2004 11:24:37 -0400, Neal wrote:

(Am viewing in IE6.)

I'm viewing in a newsreader. Not particularly illuminating.

Let me suggest that you put this up on a webpage and post the link.

I am about to inentionally , and wantonly,
overstate what Neal just said...
<http://www.physci.org/codes/sscce.jsp>

Ahhh.. go on, sue me, for what it's worth.
(IE, almost, but not quite, nothing) :-P

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

Harry wrote:

I have a DIV that is placed within another div. The problem is on the
first div, (which is meant to be a header) I cant get rid of the extra
space that appears no matter what I change the settings to.
About 5 pixels worth of space appears which I am hoping someone can
tell me how to get rid off.
(Am viewing in IE6.)

I'm not quite sure where you see a problem.
Perhaps it's just below your image?
If so, and if you are in Standards Mode, then add:

img { display:block; }

--
Gus