...

View Full Version : CSS problem with Internet Explorer



samuri_tux
07-03-2007, 08:54 PM
I've (started) making a site that looks fine in firefox, safari and opera but is a complete mess in internet explorer. I think it may have to do with EI not allowing <dev> overlaps? I'm not quite sure.
I made a page with screen shots of the error at http://www.freewebs.com/sapphworks/eibug.htm
The page itself is at http://www.freewebs.com/sapphworks/mamapg.htm
And this is the code: (bold stuff is probably important to the problem)

<html>
<head>
<title>Welcome to SWC online!</title>

<script language="javascript">
function showMe(tehid){
document.getElementById(tehid).style.visibility="visible";
}

function hideMe(tehid){
document.getElementById(tehid).style.visibility="hidden";
}
</script>

<style type="text/css">

<!--login table--!>
table.loggy{color:e09800;font-family:"georgia"}

<!--drop down menus--!>
div.menu1{background-color:000000;position:fixed;left:400;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
div.menu2{background-color:000000;position:fixed;left:420;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
div.menu3{background-color:000000;position:fixed;left:440;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
div.menu4{background-color:000000;position:fixed;left:460;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
div.menu5{background-color:000000;position:fixed;left:480;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}

<!--parchment background--!>
div.back{background-image:url("parchmentbase.jpg");position:fixed;left:100;top:120;width:800;height:400;}

<!--scrolling text--!>
div.text{background-image:none;position:relative;left:100;top:120;margin-left:120;width:650;height:390;overflow:auto;font-family:"georgia"}

<!--login box--!>
div.zippy{background-image:url("church.jpg");background-repeat:no-repeat;color:e09800; height:249px;width:200px;position:fixed;left:10px;top:150px;font-family:"georgia"}

<!--golden header--!>
div.header{background-color:e09800;height:75px;width:800;position:fixed;left:100px;top:10px;}

<!--non-dropping part of the drop down menu--!>
div.menu{background-color:0090e6; background-image:url(bluerib.jpg);background-repeat:no-repeat;height:25px;width:800px;position:fixed;left:100px;top:85px;}

</style>
</head>
<body bgcolor=000080>

<div class="back">
<BR>
</div>

<div class="text">
blah blah blah .........
</div>

<div class="zippy">
<table height=249 class="loggy" cellpadding=0 border=0 cellspacing=0>
<tr><td>
Control Panel<BR>
</td></tr>
<tr><td valign=bottom>
<u>Please Login.</u><BR>
User Name: <BR>
<input type="text" value="" size=10><BR>
Password: <BR>
<input type="password" value="" size=10><BR>
<input type="button" value="Submit">
</td></tr>
</table>
</div>

<div class="header">
<center>

<img src="goodgold.jpg"></img>
</center>
</div>

<div class="menu">
<center>
<a href="">Home</A>
<a href="" onMouseOver="showMe('m1');" onMouseOut="hideMe('m1');">The School</A>
<a href="" onMouseOver="showMe('m2');" onMouseOut="hideMe('m2');">The Events</A>
<a href="" onMouseOver="showMe('m3');" onMouseOut="hideMe('m3');">The Sports</A>
<a href="" onMouseOver="showMe('m4');" onMouseOut="hideMe('m4');">The Clubs/Activites</A>
<a href="" onMouseOver="showMe('m5');" onMouseOut="hideMe('m5');">The Achidemics</A>

<a href="">The Staff</A>
<a href="">Other Resources</A>
</center>
</div>

<div class="menu1" id="m1">
School Home<BR>
History<BR>
Present<BR>
Principal's Letter<BR>
Virtual Tour<BR>
Rules<BR>
Contact Info
</div>

<div class="menu2" id="m2">
Events Home<BR>
Announcement History<BR>
SWC CalanAder<BR>
DSBN Calander<BR>
</div>

<div class="menu3" id="m3">
Sports Home<BR>
Sports....<BR>
</div>

<div class="menu4" id="m4">
Clubs/Activities Home<BR>
Clubs/Activites....<BR>
</div>

<div class="menu5" id="m5">
Achidemics Home<BR>
Achidemics....<BR>
</div>
</body>
</html>

Any Clue what could be going wrong?
Thanks so much!
Arthan Khwelnul

croatiankid
07-03-2007, 09:16 PM
You have some errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Fsapphworks%2Fmamapg.htm) in your HTML. I would try adding a doctype.

koyama
07-03-2007, 11:16 PM
Besides what croatiankid has already said: Are you aware that your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html).

Before you continue doing anything you need to specify a document type. Put this on the first line:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

samuri_tux
07-04-2007, 04:35 AM
thanks guys, i figured it out :thumbsup: i just threw in <!--[if IE]> <![EndIf]--> tags and rewrote my formatting for IE because it's screwy.
Just incase somebody who's reading this is having the same problems, do this:

<style>
put your code for normal not stupid browsers here
</style>
<!--[if IE]>
<style>
put your adapted-for-ie css code here
</style>
<![EndIf]-->

Thanks though! :D
Arthan Khwelnul

croatiankid
07-04-2007, 10:27 AM
You're going to have problems with future sites if you don't use a valid doctype at the start of your page, since IE6 will start rendering as IE5.5 without one.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum