CSS problems

[flareback]

I have a site and the spacing just isn't coming out right. I want the spacing between the horizontal lines to be around 260, but the top one is around 100px and the bottom one around 275px. For some reason the min-height isn't coming out right on the pressWrap div. I have the following code snippets.

 

css

.info{margin-top:100px;}
.pressWrap{
margin:20px 0px 20px 0px;
width:600px;
min-height:220px;
}

.pressImg{
width:260px;
height:100%;
float:left;}
.pressText{width:340px;float:right;}
.pressCont{margin:0px;padding:0px;float:right;}
.presshr{position:relative;top:-3px;}

.pageNav{margin-top:60px;font-size:110%;font-weight:bold;}
#pagePrev{float:left;}
#pageNext{float:right;}

 

php

/* - CBS 11 - */
echo '<div class="pressWrap"><a name="cbs11"></a>' . "\n";
echo '<div class="pressImg"><img src="./images/press/pdfCBS.png" alt="CBS" /></div>' . "\n";
echo '<div class="pressText">' . "\n";
echo '<p><span class="pstart1">CBS 11 Video</span></p>' . "\n";
echo '<p><br /><br />"Native Texan Leaves Corporate World To Pursue His Passion For Art"<br />October 18, 2005</p>' . "\n";
echo '</div>' . "\n";	// end div - pressText
echo '<div class="clear"></div>' . "\n";
echo '<hr class="presshr" />' . "\n";
echo '</div>' . "\n";		// end div - pressWrap
echo '<div class="clear"></div>' . "\n";
/* - Red Magazine - */
echo '<div class="pressWrap"><a name="red"></a>' . "\n";
echo '<div class="pressImg"><img src="./images/press/pdfRED.png" alt="Red Magazine" /></div>' . "\n";
echo '<div class="pressText">' . "\n";
echo '<p><span class="pstart1">Red Magazine Online</span><br />Chris Judy Paints The Town</p>' . "\n";
echo '</div>' . "\n";	// end div - pressText
echo '<div class="clear"></div>' . "\n";
echo '<div class="pressCont"><a href="./files/red_style-ChrisJudy.pdf" target="_blank"><img src="./images/continue.png" alt="Continue Reading" /></a></div>' . "\n";
echo '<div class="clear"></div>' . "\n";
echo '<hr class="presshr" />' . "\n";
echo '</div>' . "\n";		// end div - pressWrap
echo '<div class="clear"></div>' . "\n";

all that is producing the following image

Any hints as to what is wrong?

[ClayMeow]

Can you post the HTML? Sorry, but the PHP is making it hard to follow.

[flareback]

here is the html

<div class="pressWrap"><a name="cbs11"></a>
				<div class="pressImg"><img src="./images/press/pdfCBS.png" alt="CBS" /></div>
				<div class="pressText">
					<p><span class="pstart1">CBS 11 Video</span></p>
					<p><br /><br />"Native Texan Leaves Corporate World To Pursue His Passion For Art"<br />October 18, 2005</p>
				</div>

				<div class="clear"></div>
				<hr class="presshr" />
			</div>
			<div class="clear"></div>
			<div class="pressWrap"><a name="red"></a>
				<div class="pressImg"><img src="./images/press/pdfRED.png" alt="Red Magazine" /></div>
				<div class="pressText">
					<p><span class="pstart1">Red Magazine Online</span><br />Chris Judy Paints The Town</p>

				</div>
				<div class="clear"></div>
				<div class="pressCont"><a href="./files/red_style-ChrisJudy.pdf" target="_blank"><img src="./images/continue.png" alt="Continue Reading" /></a></div>
				<div class="clear"></div>
				<hr class="presshr" />
			</div>
			<div class="clear"></div>

[flareback]

got it. The internal divs weren't getting a height attribute so they were smaller than I thought. The hr went off the internal divs so it was showing in the wrong place.

 

side note: ie7 sucks. (Thankfully I don't have to code for 6)

[ClayMeow]

Congrats on figuring it out. Sorry I couldn't help, I had bowling last night. lol

 

BTW, if you're coding for IE7 and don't want to worry about IE8, put the following in your header:

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

 

or add it thru IIS if you have access to the server.

[flareback]

Congrats on figuring it out. Sorry I couldn't help, I had bowling last night. lol

 

BTW, if you're coding for IE7 and don't want to worry about IE8, put the following in your header:

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

 

or add it thru IIS if you have access to the server.

Thanks. that could come in handy.

[Zertz]

BTW, if you're coding for IE7 and don't want to worry about IE8, put the following in your header:

The proper DOCTYPE and

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Will trigger IE8 standards mode which is on par with every other browser minus CSS3

[flareback]

The proper DOCTYPE and

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Will trigger IE8 standards mode which is on par with every other browser minus CSS3

I haven't noticed many issues between ie8 and firefox and safari. There may be small differences but nothing major that I've come across. Has anybody had problems with ie8?

[Union Of V]

Just a little recommendation, try Firebug. Sure it only works for firefox but it's great for visualising where your divs start and end!

[Zertz]

I haven't noticed many issues between ie8 and firefox and safari. There may be small differences but nothing major that I've come across. Has anybody had problems with ie8?

Yeah, IE8 is perfectly fine, but if you don't specify that meta tag, it falls back to compatibility or IE7 mode. It may also depend on your doctype...

[gnack]

Congrats on figuring it out. Sorry I couldn't help, I had bowling last night. lol

 

BTW, if you're coding for IE7 and don't want to worry about IE8, put the following in your header:

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

 

or add it thru IIS if you have access to the server.

 

Yeah this is bad advice, you should be coding for IE8 and fixing backwards compatibility with IE7, not the other way around.