3 replies [Last post]
velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 35 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

Having some odd issues with IE7 with a new site I am building. Not having a lot of luck figuring out IE7's seemingly, at least in my experience, quirkiness with margins.

On this page- http://caprice.websitewelcome.com/~gmca/?content=portfolio&showJobsFor=1

Two separate issues are cropping up. First, notice the left border of the blue divs for each job/pics. It overruns its parent container on the left side. I've tried setting margin-left, both in the standard .css fie and a conditional one just for IE7, and the margins don't move at all for me.

Second, when I put in a clearer div in between the larger thumb (floated right) and the smaller ones (also floated right) so that they appear below the primary thumb, it almost appears that the background is "doubling up"....which I don't get at all as the background is declared in the css and not in any code that would display it a second time.

Scratching my head mumbling, "wtf.....?"

HTML-

<div class="jobDiv">
Blodgett Dream Center<br />Syracuse, NY
<img src="makeThumb.php?pic=blodgett.jpg" class="thumb" onClick="showPic('blodgett.jpg');">
<div class="clearer"></div>
<img src="makeThumb.php?pic=marcyPath.jpg" class="smallThumb" onClick="showPic('marcyPath.jpg');">
<img src="makeThumb.php?pic=Marcy_plaque.jpg" class="smallThumb" onClick="showPic('Marcy_plaque.jpg');">
<img src="makeThumb.php?pic=Lake_Tear_of_the_Clouds.jpg" class="smallThumb" onClick="showPic('Lake_Tear_of_the_Clouds.jpg');">
<div class="clearer"></div>
</div>

CSS-

	.jobDiv{
	border:1px solid #366696;
	background:url("images/opaque.png");
	margin-top:3px;
	font-weight:bold;
	padding:2px;
	margin-left:25px;
	margin-right:25px;
	overflow:visible;
	}

	/*div to clear floats in parent divs */
	div.clearer {
	clear:both;
	height:1px;
	}

	img.thumb, img.smallThumb{
	border:1px solid #fff;
	float:right;
	}
	
	img.smallThumb{
	width:75px;
	height:75px;
	}

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 35 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

anyone have a thought on

anyone have a thought on this............?

grazie...

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 28 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try to set hasLayout by

Try to set hasLayout by adding min-height:1%; in .jobDiv

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 35 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

son of

son of a........?!?!?!?!

Dan, thanks, that worked....but why? What did the min-height do? Shouldn't jobDiv already have height due to it's contents and the addition of the clearing divs?

Thanks again, surprising how simple that was!

[EDIT] looked up the hasLayout quirk in IE. Thanks for the tip. Been using CSS for quite a while now and not heard of it before, oddly enough. Cheers.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.