5 replies [Last post]
James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 51 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Hi all,

I'm having an issue on some floated divs in IE6. I've added the double margin bug fix of: display:inline but that's not solved the issue. Am I missing something very obvious here?

http://www.zoost.ie/work

The HTML:

		<div id="portfolio">
			<!-- Post Starts -->
			<div class="post block fl Web">
				<p>
					<strong>Project</strong>
				</p>
				<h5 class="title">
					<a href="http://www.zoost.ie/work/european-freight-systems">European Freight Systems</a>
				</h5><a rel="prettyPhoto" href="http://www.zoost.ie/wp-content/uploads/2010/05/web-screen-large-thumb-shot1.jpg" class="thumb"><img src="http://www.zoost.ie/wp-content/uploads/2010/05/efs-thumbnail1.jpg" alt="European Freight Systems" width="250" height="210" class="portfolio-img woo-image"></a>
				<div class="entry">
					<div class="left-work-box">
						<p>
							<strong>Description</strong>
						</p>
						<p>
							EFS are a Dublin based freight distribution company that have been in business since 1990 offering complete END to END supply…
						</p>
						<p>
							<a href="http://www.zoost.ie/work-detail.html"><img src="wp-content/themes/zoost/images/more-details.png" alt="more details"></a><a href="http://www.zoost.ie/work/european-freight-systems">View more details</a>
						</p>
					</div>
					<div class="right-work-box">
						<p>
							<strong>Roles</strong>
						</p>
						<p>
							<em>User Interface Design, HTML &amp; CSS, Flash Animation</em>
						</p>
					</div>
				</div><!-- /.entry -->
			</div><!-- /.post -->
			<!-- Post Starts -->
			<div class="post block fl Web">
 
etc...

And the CSS:

#portfolio .block {  width:260px; min-height: 407px; margin:0 20px 20px 0px; padding:20px 20px 0 20px; display:inline; background: #101010 url(images/work-box-bg.png) top left no-repeat; }
#portfolio .block a.thumb { background: url(images/portfolio-hover.png) no-repeat; border:1px solid #ddd; padding:4px; margin:0 0 10px 0; display:block;}
#portfolio .block img.portfolio-img {   }
#portfolio .block h2 { font-size:18px; margin-bottom:15px; }

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 51 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Here's what's happening in

Here's what's happening in IE6:

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 51 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Anyone got any ideas?

Anyone got any ideas? Puzzled

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What's the issue!? The

What's the issue!?

The screengrab looks ok to me?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Whats the small height on

Whats the small height on #container for? remove it!

Somewhere you have a 100% wide element with padding or margin or something forcing an unnatural width on the layout as you have horizontal viewport scroll bars which shouldn't be there

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 51 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Thanks Hugo you're a

Thanks Hugo you're a gent,

Removed that height on the container, should have never been there. Went searching through the HTML and CSS until I stumbled across an old style applied to a post entry class:

.entry  { width: 593px;  }

It's been removed and the layout is as it should be.

Thanks again,
James