Jump to content
Sign in to follow this  
flareback

CSS problems

Recommended Posts

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

post-12630-1265330401_thumb.png

Any hints as to what is wrong?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×