Forum Moderators: not2easy
I am building a simple site... but there are some cross browser inconsistencies. With the code I have now, it looks great in Firefox 3.0.11 and its 1px off in IE as well as Safari.
Here is a link: <snip>
The specific spot that I am having difficulties is in the upper-right hand side where the "home" - "about" - "privacy" links are. The header image is an h1 with top border... and you can see how I want the links to hit it, with the nonactive ones a different color.
Can't figure out why there are so many browser issues though.
Also, in IE, the submit button doesn't recognize position:relative? I just scooched it over a bit, but it doesn't work in IE.
Can you guys look over the code and tell me if there are any obvious mistakes as to why this isn't cooperating with me. Thanks.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Default XHTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body><div id="wrapper">
<div id="right">
<a href="#">Home</a>
<a class="notactive" href="#">About</a>
<a class="notactive" href="#">Contact</a>
<a class="notactive" href="#">Privacy</a>
</div><!-- end #right -->
<div id="header">
<h1>specifics removed</h1>
</div><!-- end #header -->
<div id="container">
<div class="floatleft">
<div id="opt">
<p class="head">You're About to Discover…</p>
<ul>
<li>specifics removed</li>
<li>specifics removed</li>
<li>specifics removed</li>
<li><em>…and much, much more!</em></li>
</ul>
<img src="images/blue-arrow-2-trans.png" alt="blue-arrow-2" width="150" height="134" style="position:relative;left:120px;" />
</div><!-- end opt -->
</div><!-- end .floatleft -->
<div class="floatleft2">
<div id="calc">
<p>specifics removed</p>
<p>secifics<em>removed</em></p>
<form action="results.php" method="get">
<table>
<tr>
<td><span>Sex</span></td>
<td>
<select name="specifics">
<option value="1">removed</option>
<option value="0">removed</option>
</select>
</td>
</tr>
<tr>
<td><span>specifics removed</span></td>
<td><input type="text" name="weight" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px; margin-top:4px;font-weight:bold;" /></td>
</tr>
<tr>
<td><span>specifics removed</span></td>
<td><input type="text" name="height" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px;font-weight:bold;" /></td>
</tr>
<tr>
<td><span>specifics removedspan></td>
<td><input type="text" name="age" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px;font-weight:bold;"/></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="specifics removed ?" style="margin-top:4px;position:relative;right:40px;" /></td>
</tr>
</table>
</form>
</div><!-- end calc -->
</div><!-- end .floatleft2 -->
</div><!-- end container -->
</div><!-- end wrapper -->
</body>
</html>
CSS
/* Eric Meyer's Reset Reloaded */html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
/**************************************************************/
body{
width:780px;
margin:0 auto;
font-family: Arial, Helvetica; sans-serif;
font-size:16px;
}
a{
text-decoration:none;
}
a:hover{
cursor:hand;
}
#wrapper{
margin-top:30px;
}
h1{
background:url(images/header.jpg) no-repeat;
width:780px;
height:216px;
text-indent:-9999px;
border-bottom: 5px solid #828282;
}
#right{
text-align: right;
border-bottom: 6px solid #828282;
padding-bottom:7px;
width:780px;
}
#right a{
margin-left: 2px;
background: #828282;
padding:5px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
color:#fff;
border-bottom:1px solid #828282;
}
#right a.notactive{
background:#ccc;
color:#5c5c5c;
}
#right a.notactive:hover{
background:#828282;
color:#fff;
}
.floatleft{
float:left;
width:387px;
}
.floatleft2{
float:left;
width:390px;
}
.floatleft p, floatleft ul li, .floatleft2 p, .floatleft2 form{
padding: 10px;
}
ul li{
list-style-position: inside;
padding:10px;
}
p.head{
text-align:center;
font-family: Tahoma, sans-serif;
color:#5b86ef;
font-weight:bold;
font-size:18px;
}
[edited by: swa66 at 8:22 am (utc) on July 3, 2009]
[edit reason] Removed links and specifics, please see ToS and forum charter [/edit]
