CSS float in Firefox and IE

I'm having a minor, but extremely annoying, issue with a div box. The code is below

#footerimg{
	display: block;
	width: 748px;
	height: 100px;
	padding: 67px 0px 0px 33px;
	color: #fff;
	background: url(images/footer.gif) no-repeat left top;
}

Code (markup):

So this is basically a block that has an image as the background, and I write my "Copyright. All rights reserved." line inside this div.

The problem is, even when the height and width are defined, Firefox will show only the one line of text that is written and no background image, nothing else.

To solve this, I have to add float: left and suddenly the background appears for Firefox. But the float: left screws up IE somehow so that there's another line below the whole box with the text of the last several characters.

Here is the IE screenshot:


Can anyone help???

 

sounds like you have not cleared your floats..


>>wth is this??
the IE Duplicate Characters Bug, usually caused by comments outside of floated divs

both suggest floats are being used but as there's not enough information to be specific..

put

<br style="clear: both">

Code (markup):

just after both/all your floated divs/columns

remove any comments inside the div they belong to.. e.g.

</div><!-- end some div -->

Code (markup):

changes to

<!-- end some div --></div>

Code (markup):

 

Thanks for the reply! I've looked at the code and it's probably not the comments but some hidden elements that's messing up the appearance in IE.

 

I'm guessing that Suzy is right about your not clearing your float, and about the duplicate character bug. We'd have to see your source to be able to do more than guess.

See Enclosing Float Elements for the various methods of doing just that. Note that in the Aslett clearfix method, I replace the Holly Hack with the very elegant Campbell Tripswitch Hack.

cheers,

gary

 

Here's an explanation of the bug itself: http://www.positioniseverything.net/explorer/dup-characters.html

I had never seen this before a month or two ago. Freaky.

 

yes it's likely them.. any hidden element that's NOT supposed to create white space can cause it, the more "hidden" elements there is the more characters are duplicated, IIRC?

anyway I'm not allowed to post links yet as I'm too young (I like that hehe)

but I'd thought there was an easier solution which I think covers all hidden elements:

that'll maybe help rather than moving them all or adding Conditional Comments as a PIE contributor noticed would work too

 

Or you can move the comment inside...

<float>
stuff
< ! --comments -- ></float>

instead of </float>< ! -- comments -- >

 

DEFINATELY the double render bug - NO, display:inline will NOT fix it.

Suzy hit it on the head (though it's hard to understrand engrish moist goodry), reverse your comments. Put them inside the floats instead of between them, the error goes away. Comments between floats is what triggers this IE rendering bug - moving or deleting the comments fixes that.

Though as others have said, no code - we're guessing in the dark. URL? Code Sample? Anyone? Bueller?

 

ha deathshadow

Don't be so sure, that it's comments and only comments that cause this - gummybear has already said he thinks it's hidden elements, and sure enough in the duplicating characters bug it is any "hidden" element e.g: - <script>, <input>, <!-- -->, an element with the style display: none; - which can cause it

It's not always easy to move all items, that might fall into those categories, in the HTML, and besides why we should we have to for an IE foible!

The tests I ran with hidden inputs, hidden divs and comments does indeed show that display: inline; set on the float (the one before the hidden stuff) fixes it! also triggering hasLayout to true on the element following all the floats fixes it too

however as you say those were only test cases and perhaps doesn't deal with the whole picture

 

Well I checked the codes and deleted all of the comments between the divs. I'm also currently using a free web host and it's inserting hidden code below the body so there's nothing I can do about that.

As for clearing floats, how would do I do this? If I were to use br class=clear, could I use that for the footer? It's the last thing on my page and I don't want another blank line below the footer because it would mess up the layout just like the duplicate text would. Or does br class=clear not create another line?

Here's the general code for the body with the css reference:

<body>
<div id="container">

	<div id="header">
	<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
	</div>
	<div id="menu">
<ul>
	<li><a href="<?php echo get_permalink(2); ?>" title="<?php _e('About'); ?>"><?php _e('About'); ?></a></li>
</ul>
	</div>

	<div id="pagewrapper"><div id="page">



<div class="maincolumn">

	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">

		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<div class="entry">

			<?php the_content(); ?>

			<p class="postinfo">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('on'); ?> <?php the_time('F jS, Y') ?> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
			</p>

			<!-- 
			<?php trackback_rdf(); ?>
			 -->

		</div>
	</div>

	<?php endwhile; ?>

<?php include (TEMPLATEPATH . '/browse.php'); ?>

	<?php else : ?>

	<div class="post">

		<h2><?php _e('Not Found'); ?></h2>
		<div class="entry">
<p class="notfound"><?php _e('Sorry, but you are looking for something that isn't here.'); ?></p>
		</div>

	</div>

	<?php endif; ?>

</div>

<div id="sidebar"></div>

	</div></div>

<?php wp_footer(); ?>

<div id="footerimg"></div>

</div>
</body>
this is what the host adds below /body:
</noscript>
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">
<!--FREE HOSTING-->
</div></div>
end host adds
</html>

STYLE.CSS
#container{
	margin: 0 auto;
	width: 748px;
}
#header{
	float: left;
	width: 748px;
	height: 97px;
	color: #fff;
	background: url(images/banner.jpg) no-repeat left top;
}
#menu{
	float: left;
	font-family: Georgia, sans-seriff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	width: 748px;
	height: 32px;
	background: url(images/menu.gif) no-repeat left top;
}
#pagewrapper{
	float: left;
	width: 748px;
	background: url(images/bg_page.gif) repeat-y left top;
}
#page{
	padding: 0 23px;
}
.maincolumn{
	float: left;
	width: 500px;
}
.post{
	margin: 10px 0 0;
	padding: 10px;
}
.entry{
	line-height: 24px;
}
#sidebar{
	float: left;
	margin: 10px 0 0 10px;
	width: 192px;
	background: url(images/bg_sidebar.gif) no-repeat left top;
}
#footerimg{
	float: left;
	width: 748px;
	height: 100px;
	padding: 67px 0px 0px 33px;
	color: #fff;
	background: url(images/footer.gif) no-repeat left top;
}

Code (markup):

 

I end up adding overflow: hidden on footers with floats for that very reason (they're the last in my source) plus if I've got the footer placed funny, position: relative. It wraps floats, which is the best you can do with a footer.

 

Well... first off code should NEVER be below /body or /HTML - though yes, a LOT of (retarded) hosts add code there. There should NEVER be anything between or after </body> and </html> (which is why my own style guide says put them on one line)

Though the problem remains we aren't seeing the whole deal - you're issue lies in the footer - so we need to see the output of wp_footer();

and being my experience with WP is to try it for a week and go "there's too much garbage HTML hardcoded into it" I don't recall it's standard output.

My advice - look at the output of wp_footer by doing a view source on the page...

Though I'd also clean up that code so it's not switching parsing/execution modes on nearly every line. Opening and closing php like that is just overcomplicating the code... though with turdpress's functions not always handling their returns properly lord knows if you can actually do that.

Theoretically that code should be simplified down to:

<?php
echo '
<body>
<div id="container">

	<div id="header">
		<h1>
			<a 
				href="',bloginfo('url'),'" 
				title="',bloginfo('name'),'"
			>
				',bloginfo('name'),'
			</a>
		</h1>
	</div>
	
	<div id="menu">
		<ul>
			<li>
				<a 
					href="',get_permalink(2),'" 
					title="',_e('About'),'"
				>
					',_e('About'),'
				</a>
			</li>
		</ul>
	</div>

	<div id="pagewrapper"><div id="page">
		
		<div class="maincolumn">
';

if have_posts() {
	do {
		echo '
			<div class="post" id="post-',the_ID(),'">

				<h2>
					<a 
						href="',the_permalink(),'" 
						rel="bookmark" 
						title="',the_title,'"
					>',the_title(),'</a>
				</h2>
		
				<div class="entry">

					',the_content(),'

					<p class="postinfo">
						',_e('Filed under:'),'
						',the_category(', '),'
						',_e('on');,'
						',the_time('F jS, Y'),' | 
						',comments_popup_link('No Comments »','1 Comment »','% Comments »'),'
					</p>

					<!-- ',trackback_rdf(),'-->
				<!-- .entry --></div>
		
			<!-- .post --></div>
		';
	while have_posts();

	<?php include (TEMPLATEPATH . '/browse.php'); ?>

} else {
	echo '
			<div class="post">

				<h2>',_e('Not Found'),'</h2>
					
				<div class="entry">
					<p class="notfound">
						',_e('Sorry, but you are looking for something that isn't here.');,'
					</p>
				</div>

			<!-- .post --></div>
	';
}

echo '
		<!-- .maincolumn --></div>

		<div id="sidebar"></div>

	<!-- .page, .pagewrapper --></div></div>

	',wp_footer(),'

	<div id="footerimg"></div>

<!-- #container --></div>

</body></html>
';

?>

Code (markup):

but that hinges on WP's functions actually being written with a degree of common sense (which they are not)