rendering problems in IE7

Expand Post »

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:

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:

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

Click image for larger version

Name: style2_problem.jpg
Views: 38
Size: 44.3 KB
ID: 3893

Similar Threads

Slowness in replying to threads? in DaniWeb Community Feedback
RAM timing in Motherboards, CPUs and RAM
Site design problem in HTML and CSS
Background question in JavaScript / DHTML / AJAX
Shuffled DaniWeb Home in DaniWeb Community Feedback

Antonbomb22

Reputation Points: 46

Solved Threads: 0

Junior Poster in Training

Offline

91 posts
since Jun 2004

Permalink

Aug 13th, 2007

Re: rendering problems in IE7

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Faux Column

Next Thread in HTML and CSS Forum Timeline: Image didnt not appear

DaniWeb Message

Cancel Changes

User Name
Password