My love-hate relationship with CSS and IE6

ony_gosshamer

a.k.a. dundee
Ok
here is the website: hippopocampe.org
here is the css: hippopocampe.org/styles-site.css

here is my problem: in IE6 in Windows, the bottom border of the main image header (the rotate.php) is off 5 pixels like if the image had a 5 pixel bottom-padding. But it hasn't. That affects the header but also the 'main' section, as it too is 5 pixels off. Any suggestions for a workaround? Everything in OS X is clean.

Also, if anybody could also check it out under Mozilla (or other browsers) for Windows that would be cool. I haven't had a chance yet.

thanks
 
I've had a quick play with the files, and the only thing I can think of at present is that the rotate.php code is adding whitespace. This is actually a known bug in IE6.

Either show us the code for rotate.php or try and compress all the code within it (remove any line breaks, these are the likely cause of the whitespace).

Let us know how you fair. :)
 
I don't think it's just the php, but the image itself. I tried a static image in it's place and had the same issue. Tried a few different things on a #banner img style, no result. Even tried a box model hack to see if IE was causing issues with the height and double 5px borders, a long shot but worth a try. No luck there.

When I removed the width & height from the img tag, the menu div crawled up. I'm wondering if it isn't causing some kind of issue. After doing that Safari experienced the same problem.

You could try this:
Use an absolute position with the main id, like you did with menu. You'll need to figure out the problem with the box id and the smallprint class, but that shouldn't be too hard. Just use a small image repeated on the vertical axis as the body background and move the smallprint within the maid id div.

Another thing to try in combo with everything above or alone, remove the 5px borders top & bottom from the CSS and apply them directly to the image in Photoshop.

Good luck.
 
Or style a <hr /> (horizontal rule) in it's place. Removing the margin from it and styling it to the way you want the border to look should be fine.
 
Thnaks for the feedback guys.

Now, things i don't understand:

Uoba: What do i replace by a <hr /> (horizontal rule)? Do you mean placing the image between two <hr />?

mdnky:I don't want to photoshop anything (that's the whole point of using CSS). What does the main and smallprint have to do with the banner border?

I'll try a few things you said.
 
I've tried using a <hr /> but didn't work. I wouldn't mind seeing the image php code... it may be causing the problem (I know mdnky said it probably isn't this, but worth a try).

Otherwise, I reckon you've stumbled on another IE6 CSS bug. You'll have to do a search on Google I'm afraid (there's so many... try something like IE6 CSS image bug)
 
My <hr> didn't work in Safari.... ?

I didn't try it yet. But what if i just make a 586 x 5 pixels black image and just place it before and after the rotate.php, would that work or would there still be space?

Here is the integral php code:

PHP:
<?php

/*

	HIVEWARE IMAGE ROTATOR
	Version 2.1 - October 22, 2003
	Copyright (c) 2002-2003 Dan P. Benjamin, Hiveware Corp.
	All Rights Reserved.

	[url]http://www.hiveware.com/imagerotator.php[/url]
	
	
	DISCLAIMER
	Hiveware makes no representations or warranties about
	the suitability of the software, either express or
	implied, including but not limited to the implied
	warranties of merchantability, fitness for a particular
	purpose, or non-infringement. Dan P. Benjamin and Hiveware
	shall not be liable for any damages suffered by licensee
	as a result of using, modifying or distributing this
	software or its derivatives.
	
	
	ABOUT
	This PHP script will randomly select an image file from a
	folder of images on your webserver.  You can then link to it
	as you would any standard image file and you'll see a random
	image each time you reload.
	
	When you want to add or remove images from the rotation-pool,
	just add or remove them from the image rotation folder.


	VERSION CHANGES
	Version 1.0
		- Release version
	
	Version 1.5
		- Tweaked a few boring bugs
	
	Version 2.0
		- Complete rewrite from the ground-up
		- Made it clearer where to make modifications
		- Made it easier to specify/change the rotation-folder
		- Made it easier to specify/change supported image types
		- Wrote better instructions and info (you're them reading now)
		- Significant speed improvements
		- More error checking
		- Cleaner code (albeit more PHP-specific)
		- Better/faster random number generation and file-type parsing
		- Added a feature where the image to display can be specified
		- Added a cool feature where, if an error occurs (such as no
		  images being found in the specified folder) *and* you're
		  lucky enough to have the GD libraries compiled into PHP on
		  your webserver, we generate a replacement "error image" on
		  the fly.
		  
    Version 2.1
        - Updated a potential security flaw when value-matching
          filenames


	INSTRUCTIONS
	1. Modify the $folder setting in the configuration section below.
	2. Add image types if needed (most users can ignore that part).
	3. Upload this file (rotate.php) to your webserver.  I recommend
	   uploading it to the same folder as your images.
	4. Link to the file as you would any normal image file, like this:

			<img src="http://example.com/rotate.php">

	5. You can also specify the image to display like this:

			<img src="http://example.com/rotate.php?img=gorilla.jpg">
		
		This would specify that an image named "gorilla.jpg" located
		in the image-rotation folder should be displayed.
	
	That's it, you're done.

*/




/* ------------------------- CONFIGURATION -----------------------


	Set $folder to the full path to the location of your images.
	For example: $folder = '/user/me/example.com/images/';
	If the rotate.php file will be in the same folder as your
	images then you should leave it set to $folder = '.';

*/


	$folder = '.';


/*	

    If you'd like to enable additional image types other than
	gif, jpg, and png, add a duplicate line to the section below
	for the new image type.
	Most users can safely ignore this part.

*/

    $extList = array();

	$extList[] = 'gif';
	$extList[] = 'jpg';
	$extList[] = 'png';
	$extList[] = 'jpeg';
	

// You don't need to edit anything after this point.


// --------------------- END CONFIGURATION -----------------------


function valueMatch($haystack, $needle) {
    $ext = substr( strrchr($needle, '.'), 1, strlen($needle) );
    foreach($haystack as $value) {
        if ($ext==$value) {
            return true;
        }
    }
    return false;
}

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if ( isset($_GET['img']) && valueMatch($extList, $_GET['img']) ) {
	$tmp = $folder . $_GET['img'];
	if (file_exists($tmp)) {
		$img = $tmp;
	}
} else {
	$handle = opendir($folder); 
	while ( false !== ( $file = readdir($handle) ) ) {
		foreach ($extList as $e) {
			if ( preg_match('/'.$e.'$/i', $file) ) {
				$fileList[] = $file;
			}
		}
	}
	closedir($handle);
		mt_srand( (double) microtime ()* 1000000 );
		$tmp = $folder.$fileList[ mt_rand( 0, sizeOf($fileList)-1 ) ];
		if (file_exists($tmp)) {
			$img = $tmp;
		}
	}
if ($img!=null) {
	$ext = strrchr($img,'.');
	if ($ext==".jpg") $ext = ".jpeg";
	$contentType = 'Content-type: image/' . substr( $ext, 1, (strlen($ext)) );
	header ($contentType);
	readfile($img);
} else {
	if (function_exists(imagecreate) ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100) or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

?>
 
I just put a message out on WSG about this, I'll let you know what the guys come up with.
 
Here's a reply on the WSG list to the issue courtesy of Russ Weakley:

Haven't looked but it may be a simple Win/IE6 carriage return bug. It seems that Win/IE is the only browser that renders carriage returns or line feeds as whitespace directly before a closing containing element:

http://www.maxdesign.com.au/presentation/mystery/


Code:
Two things to try if this is the case.

1. move the end div up onto the same line as the image
... width="586" height="183" border="0" /></div>

2. add a single CSS declaration to the banner rule set
 #Banner {
    width: 586px;
    height: 183px;
    padding: 0px;
    border-left-style: none;
    border-right-style: none;
    border: 5px solid black;
    margin: 0px 0px 12px 0px;
    border-right-width: 0px;
    border-left-width: 0px;
}

Add a new declaration:
     font-size: 1px;

My weird theory is that this makes the carriage return small enough that it
cannot be seen.
 
Doh... I'm laughing like an idiot! I've just replied to your post on WSG mdnky!!!! ::ha::

It's taken 2 separate macosx.com members to go away and resolve this issue and meet up in a totally different place for a fix! Here's my fix:


Hi

I've actually had a crack at fixing this problem for the guy, over at macosx.com. I originally thought that it may have been the 'ol IE whitespace bug (I asked him to try, but didn't get round to it myself). I then tried to use horizontal rules (which worked great on every browser except IE6 still).

Anyway, just had another go, and have fixed it. Very simple really... here's my remake (if you don't mind, just wanted to test... I'll remove it from my server by Monday (or if you let me know earlier)):

http://dev.c-o2.net/hippop.htm


Here's the only CSS rules I've changed (have added only one extra, the img#bannerImage):
Code:
/*     -------------------   */
img {
    border: none;
    }
div#Banner {
	width: 586px;
	height: 193px;
	padding: 0px;
	border: none;
     margin: 0 0 7px 0;
    }
img#bannerImage {
    border-top: 5px solid #000;
    border-bottom: 5px solid #000;
    }
/*     -------------------   */

div#Main {
	padding-top: 25px;
	border-color: #d8d8d8;
	border-style: solid;
	width: 406px;
	margin: 0 0 0 178px;
	background-color: #F1F1F1;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-right-style: solid;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-width: 1px;
}

/*     -------------------   */


#Menu {
	border-color: #d8d8d8;
	border-width: 1px;
	border-style: solid;
	background-color: #f1f1f1;
	text-align: center;
	width: 138px;
	padding: 12px;
	border-top: 5px solid #d8d8d8;
	top: 215px;
	position: absolute;
	padding-bottom: 25px;
}


And he also needs to add the id attribute to the image within the HTML:
Code:
<img id="bannerImage" height="183" alt="Pifpaf" src="http://www.hippopocampe.org/images/headers/rotate.php" width="586" />

And that's it. I've also moved the #Menu position up slightly, it was mis-aligned with the #Main div (however, whichever position it is in, it's either wrong in Safari, or wrong in IE, ever so slightly. He could tighten up on his us of CSS a bit more (and could look into laying-out the page with floats rather than using absolute positioning), but all that comes with the more you use it. Nice site.
 
uoba said:
Doh... I'm laughing like an idiot! I've just replied to your post on WSG mdnky!!!! ::ha::

It's taken 2 separate macosx.com members to go away and resolve this issue and meet up in a totally different place for a fix!

Now that's funny... :))

I've played with it some more, and not had much luck getting both to play well with the code. Still a bit off in IE6, but not too bad. Screencap is attached.
 

Attachments

  • xp.jpg
    xp.jpg
    95 KB · Views: 3
Wow, you guys sure like to solve problems! Thanks a lot for the help. I'm currently learning the basics of CSS and am glad of the great help i've been having in this forum. I would be glad to change my layout to floats. The problem I had with floating elements, the "box" background wouldn't cover the whole page... Anyways, i'll get you back on that.

I changed the code on the page to the one submitted by uoba. I think i'll be spacing the menu a bit more from the top. I'll do that when i get home in a week. Thanks again.
 
Glad we could help ony! :) Will be glad to help with the floats when you're ready... they're tricky to start with, but once you grasp the way they operate, they are great to use (and seemingly very kind to Internet Explorer 5/5.5/6, Mozilla, Safari etc. etc.).
 
Back
Top