Percentage displaying differently Bet. Firefox/IE 1

[ponderdj]

Hello all,

A page I'm working on,

http://www.asmc-lol.org,

has a php calendar in a div on the right side of the page. I had it displaying correctly in IE/Firefox down to an 800x600 resolution, but other people work on the page and something has changed. Now I'm having trouble getting it to work correctly. The IE page displays it narrower and with scrollbars, where the firefox browser displays it correctly. The part of the site i'm referring to uses this css/html. Cut from the css file:

#calbar{background-color:#19517F;
	color: white;
        width:100%;
	height: 100%;
        z-index: 2;
	border-top: 0px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
	margin-bottom: 10px;			
	}	

#cal{
     position:absolute;
     width:22%;
     border: 1px solid #000;
     top: 288px;
     right:15px;
     }

and this from the index:

<div id="cal"><div id= "calbar">Calendar of Events</div>
<iframe src="[URL unfurl="true"]http://asmc-lol.org/MyEventCal/myevent.php"[/URL] name="iframe" width="100%" height="360px" frameborder="0"></iframe></div>

Any help would be appreciated.

 

[Vragabond]

Looks as if IE thinks that 22% of the #cal width should be calculated from the parent element's width while FF takes into account the whole page. Can you simply use absolute values for width instead? Or you could also try and move the div outside other div elements -- since it is absolutely positioned according to the vieport, it should not matter where in the code appears.

 

[ponderdj]

Yep, that was it! It was nested in the #content div. Once I closed that div before declaring #cal, it fixed itself. But Firefox treated it like it was 22% of the page and IE like 22% of the #content div.

Seems like that could cause me some more problems in the future. I mean, what if I wanted it to be nested?

Thanks, Vragabond.

 

[tsdragon]

If you wanted it to be nested you probably would not have it absolutely positioned. I'd bet that is why FF used the whole page width - technically it wasn't part of the enclosing div.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[ponderdj]

Yeah, that makes sense.

Thanks, ts.