Problem: IE & CSS Background images

Breezer

Hi,

I'm new to designing websites using CSS layers rather than tables; I've got the hang of the basic concepts at this stage but IE is doing my head in bigtime :mad:

The biggest problem I'm having is with background images on the <div> tags; IE is rendering them completely differently to Firefox and Opera (it's working fine in these, which suggests to me that it's an IE bug rather than a problem with my CSS). I don't really know how to describe the problem so I'll just attach screenshots.

If anyone can help it'd be very much appreciated. Thanks

Goodshape

Looks like a padding/margin problem. IE and Firefox handle these differently.

You're going to need an IE conditional stylesheet (google for it), that is an extra stylesheet that only loads when the user is using IE. It's quite unlikely (although not at all imposable) that you'll get one set of CSS rules to work in both IE and Firefox for something like this.

If you post up the CSS and HTML code you'll get help faster.

Breezer

Oops, forgot the CSS, sorry Goodshape

#menu {
	position: relative;
	top: 10px;
	background-image: url('gfx/menu/bg.gif');
	width: 775px;
	height: 39px;
	color: #fff;
	font-family: verdana;
	font-size: 14px;
	font-weight: bold;
	}

And my HTML:

<div id="menu">
  	<img src="gfx/menu/left.gif" alt="" class="left" />
  	<img src="gfx/menu/right.gif" alt="" class="right" /> 
  	<span style="vertical-align: middle;">Menu 1 | Menu 2 | Menu 3</span>
  </div>

left.gif and right.gif are the images at the very ends of the orange menu bar thing.

If I set padding and margin to zero on #menu I still get the same result.

Goodshape

hmm.. strange.

What's the CSS for 'left' and 'right'? Maybe try and specify margin=0; padding=0; on left, right and menu.

Also, vertical-align: middle; only works in tables IIRC. A good way to get the same effect is line-height : 39px; (where 39px is the full height of the menu). This will put your text in the middle of 39px.

Breezer

Sorry again! CSS for "left" and "right" is just float: left/right (respectively). I'll try put padding and margin=0 on all of them and see.

Also thanks for the tip on vertical-align, that was annoying me too, although not so much as this

EDIT: No luck

Goodshape

Here's the code I use for a similar effect on my site :

html :

<div class="login">
	<div class="login-content">CONTENT HERE</div>
	<div class="login-right"></div>
</div>

CSS :

.login {
	background-image : url('../images/top/top_login_left.png');
	background-position : top left;
	background-repeat : no-repeat;
	height : 28px;
}

.login-content {
	float : left;
	margin-left : 14px;
	height : 28px;
	background-image : url('../images/top/top_login_bg.png');	
	line-height : 26px;
	padding-left : 3px;
	padding-right : 3px;
	word-spacing : 6px;
	font-weight : bold;
	font-size : 12px;
}

.login-right {
	background-image : url('../images/top/top_login_right.png');
	background-position : top right;
	background-repeat : no-repeat;
	height : 28px;
	width : 13px;
	float : left;
}

and IE conditional CSS :

.login {
	margin-right : 0px;
}

.login-content {
	margin-left : 7px;
}

If you can adapt that to suit your needs, feel free.

Breezer

Thanks for that code Goodshape, I didn't use it in the end but appreciate the gesture anyway In the end I put in an IE-specific negative margin and it seems to have sorted things out. Weird, but at least it works

Goodshape

Whatever works