Link to home
Start Free TrialLog in
Avatar of HarpuaFSB
HarpuaFSBFlag for United States of America

asked on

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

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>

Open in new window

logo.gif
header.gif
ASKER CERTIFIED SOLUTION
Avatar of mandrew182
mandrew182

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of HarpuaFSB

ASKER

That works, thanks...can you see any reason why the <hr /> formatting isn't being applied?
Nevermind, I figured it out.