HTML and CSS

rendering problems in IE7

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2004

Posts: 91

Reputation: Antonbomb22 is on a distinguished road

Solved Threads: 0

Antonbomb22 Antonbomb22 is offline

Offline

Junior Poster in Training

rendering problems in IE7

Aug 12th, 2007

IE7 seems to be incorrectly rendering this filler for rounded corners on this content box in my layout. Safari 3(Windows) and FF 2 render it correctly. I am unsure if it is because I am absolute positioning this content or not. The filler is not expanding to 100% in IE7.

The CSS:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
	#messagebox {
		background: #cfcb3b url(gradient_msgbox.gif) repeat-x top left;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		border: 1px solid #999999;
		border-top: 0;
		border-bottom: 0;
		padding: 10px 6px 6px 10px;
	}
	#messagebox_container {
		position: absolute;
		left: 350px;
		top: 0px;
	}
	#messagebox_rdbtm {
		background-image: url(msgbox_lbtm.gif);
		background-position: bottom left;
		background-repeat: no-repeat;
		height:10px;
		width:auto;
		padding-right: 20px;
	}
	#messagebox_rdbtm > img {
		width:10px;
		height:10px;
		position:absolute;
		bottom:0;
		right:0;
	}
	#messagebox_rdborder {
		background: #cfcb3b;
		margin:0px 10px 0px 10px;
		border-bottom:1px solid #999999;
		height: 9px;
		min-height: 9px;
		width:100%;
		display: block;
	}
	#messagebox {
		background: #cfcb3b url(gradient_msgbox.gif) repeat-x top left;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		border: 1px solid #999999;
		border-top: 0;
		border-bottom: 0;
		padding: 10px 6px 6px 10px;
	}
	#messagebox_container {
		position: absolute;
		left: 350px;
		top: 0px;
	}
	#messagebox_rdbtm {
		background-image: url(msgbox_lbtm.gif);
		background-position: bottom left;
		background-repeat: no-repeat;
		height:10px;
		width:auto;
		padding-right: 20px;
	}
	#messagebox_rdbtm > img {
		width:10px;
		height:10px;
		position:absolute;
		bottom:0;
		right:0;
	}
	#messagebox_rdborder {
		background: #cfcb3b;
		margin:0px 10px 0px 10px;
		border-bottom:1px solid #999999;
		height: 9px;
		min-height: 9px;
		width:100%;
		display: block;
	}

The XHTML:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
	<div id="messagebox_container">
		<div id="messagebox">
			<img src="newpmicon.gif" alt="New Private Message" />
			1 New private message.
			<div style="font-size: 10px;font-weight:normal;">Close</div>
		</div>
		<div id="messagebox_rdbtm">
			<div id="messagebox_rdborder"></div>
			<img src="msgbox_rbtm.gif" alt="Rounded Corner" />
		</div>
	</div>
	<div id="messagebox_container">
		<div id="messagebox">
			<img src="newpmicon.gif" alt="New Private Message" />
			1 New private message.
			<div style="font-size: 10px;font-weight:normal;">Close</div>
		</div>
		<div id="messagebox_rdbtm">
			<div id="messagebox_rdborder"></div>
			<img src="msgbox_rbtm.gif" alt="Rounded Corner" />
		</div>
	</div>

I have also attached a screen shot highlighting the problem.

Attached Thumbnails

My Site: Animation Talk is the best place to discuss animation.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: rendering problems in IE7

Aug 13th, 2007

Maybe the difference between Mozilla and IE is messing up your positioning:

- Mozilla browsers (NS and FF) put the margin, border, and padding outside the box-object's defined position and size.

- IE crams them all inside the box-object's defined position and size.

- This includes the body tag.

So you can't do both of these on the same box object if you want all browsers to render your page correctly:

1. Define the size or position of the box object.

2. Put margins, borders, or padding on the box object.

To make this work, you need to nest several box objects. Some of the box objects have defined positions or sizes, while others have margins, borders, and padding.

Also be aware that a browser using a different screen resolution is going to render your page strangely.

Last edited by MidiMagic; Aug 13th, 2007 at 12:47 am.

Daylight-saving time uses more gasoline