troubleshooting Question

CSS/HTML working in IE7, not in Firefox & Safari

Avatar of HarpuaFSB
HarpuaFSBFlag for United States of America asked on
CSSHTMLWeb Browsers
3 Comments1 Solution2739 ViewsLast Modified:
I have some CSS and HTML written and it formats perfectly in IE7 but not in Firefox and Safari.   This is really bugging me that I can't figure out why because usually it's the other way around.

Basically, all the CSS is being applied for IE7 but only some of it for FF & Safari.  Like hr's, padding, and some div breaks aren't being applied for the two.

Anyway, code snippets below and I've also attached the two GIF place holders used in the header.
CSS
/* global styles */
*
{
	margin:0;
	padding:0;
}
html, body, table
{
	font-size:100%;
}
body
{
	color:#000000;
	text-align:center;
	font-family:tahoma,arial,helvetica,sans-serif;
	font-size:12px;
	padding:0 0 0 0;
}
hr
{
	color:#000000;
	height:1px;
}
input, select, textarea
{
	font-size:1em;
	vertical-align:middle;
}
a img
{
	border:none;
}
.clear
{
	clear:both;
	height:1px;
	font-size:1px;
}
#container
{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
/* header */
#development
{
	text-align:center;
	font-family:courier new;
	font-weight:bold;
	font-size:14px;
	padding-top:10px;
}
#development .highlight 
{
	color:#ffffff;
	background-color:#000000;
}
#header
{
	padding:10px 0 10px 0;
}
#header .logo
{
	float:left;
}
#header .randomPics
{
	float:right;
}
/* content area and its main styles */
#content
{
	width:800px;
	margin:0 auto 0 auto;
	position:relative;
}
#content a:link, #content a:visited
{
	color:#000000;
}
#content a:hover
{
	color:#ee1920;
}
#content .center
{
	display:block;
	text-align:center;
}
#content p.buttons
{
	height:auto;
}
#content p.buttons .right
{
	float:right;
}
#content p.buttons .left
{
	float:left;
}
#content p.buttons input
{
	width:75px;
	height:22px;
	font-size:11px;
	font-family:tahoma,arial,helvetica,sans-serif;
}
#content p.buttons .spinner
{
	display:none;
	float:right;
}
#content .login input
{
	font-family:tahoma,arial,helvetica,sans-serif;
	font-size:12px;
	width:150px;
}
/* tables */
#content table
{
	border-collapse:collapse;
	margin:0 auto 0.8em auto;
	width:100%;
	position:relative;
}
#content th
{
	text-align:right;
	font-weight:bold;
}
#content td
{
	margin-right:auto;
}
#content tr.alt th, #content tr.alt td
{
	background-color:#ffcc00;
}
#content table.login
{
	width:auto;
	margin:0 auto 0.8em auto;
	border:none;
}
#content table.login th, #content table.login td
{
	background:none;
	border:none;
	font-size:12px;
}
#content table.login td
{
	padding:5px 0 5px 11px;
}
#content table.login th
{
	text-align:right;
	padding:6px 12px 4px 0;
	border-right:1px solid #505050;
}
#content table.login tr.error th
{
	color:#ee1920;
}
/* menu */
#menu
{
	padding-top:10px;
}
#menu .nav
{
	float:left;
}
#menu .icons
{
	float:right;
}
/* error/warning/info alerts */
#content ul#alerts
{
	list-style:none;
	list-style-type:none;
	margin:0 0 0 0;
}
#content ul#alerts li
{
	margin:0;
	padding:2px 0 8px 0;
	text-align:center;
	font-weight:bold;
}
#content ul#alerts li.error
{
	color:#ee1920;
}
#content ul#alerts li.confirmation
{
	color:#029930;
}
#content ul#alerts li.warning
{
	color:#ff9922;
}
#content ul#alerts li.information
{
	color:#0546a8;
}
 
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>Login</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	<!--[if gte IE 6]><!-->
		<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,print" />
    <!--<![endif]-->
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
	function submitform()
	{
	if (validateform())
		{
		document.getElementById("spinner").style.display = "block";
		document.postform.btnLogin.style.visibility = "hidden";
		document.getElementById("spinner").innerHTML = "<img src='images/spinner.gif'>"; 
		}
	else
		{ return false; }
	}
	function validateform()
	{
	document.postform.login.disabled = true;
	var isformcomplete = true;
	message = "The following tasks need to be completed     \nbefore logging in:\n\n";
	if (document.postform.userid.value == '')
	   	{ 
	   	message += "* Enter your user ID\n";
		isformcomplete = false;
	   	}
	if (document.postform.password.value == '')
	   	{ 
	   	message += "* Enter your password\n";
		isformcomplete = false; 
	   	}
	if (isformcomplete == false)
	  	{
	   	alert(message);
	   	document.postform.login.disabled = false;
	  	}
	return isformcomplete
	}
//-->
</script>
<div id="container">
    <div id="development">
        WEB SERVER:&nbsp;
        <span class="highlight">&nbsp;DEV&nbsp;</span>	
        &nbsp;SQL SERVER:&nbsp;
        <span class="highlight">&nbsp;DEV&nbsp;</span>
        <hr />
    </div>
    <div id="header">
        <span class="logo"><img src="logo.gif" /></span>
        <span class="randomPics"><img src="header.gif" /></span>
    </div>
	<div id="content">
        <div id="menu">
        	<span class="nav">
            	<a href="/">Start</a>&nbsp;&gt;
                Login
           	</span>
           	<span class="icons"><strong>System v1.0</strong></span>
            <br />
            <hr />
       	</div>
        <form name="postform" method="post" onSubmit="return submitform();">
        <input type="hidden" name="fromsubmit" value="true" />
        <span class="center">
            <table class="login">
                <tr >
                    <th>User ID</th>
                    <td><input type="text" name="userid" value="ttorrillo" /></td>
                </tr>
                <tr >
                    <th>Password</th>
                    <td><input type="password" name="password" /></td>
                </tr>
            </table>
        </span>
        <hr />
        <p class="buttons">
            <span class="spinner" id="spinner"><img src="/vp_new/_assets/img/spinner.gif"></span>     
            <span class="right"><input type="submit" name="login" value="LOGIN" /></span>
        </p>
       	<div class="clear"></div>
        <hr />
      	</form>
	</div>
</div>
</body>
</html>
logo.gif
header.gif
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros