iift_sam
23 Nov 2009, 10:27 AM
Hi all,
I'm working on my first website and need inputs on the following:
1. Browser compatibility: In my computer (IE:7) it looks ok. But when I check on browswershots.org and browsercamp.com; it is looking different. A white horizontal line is coming at the end of each page (I would not like to have that line) and "Time and Date" tag position is shifting to about 150 px right (from what I want). Could not solve these:(
Pasting my html and CSS code for reference. Would appreciate the feedback to solve above problems:
-----------------------------------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>example</title>
<!--[if IE 7]>
<style>
p {
line-height:20px;
padding-bottom:0;
}
h1 {
font-size:20px;
font-weight:normal;
color:#fff;
padding-bottom:0;
}
h2 {
font-size:16px;
font-weight:nobold;
color:#999999;
padding-bottom:0;
}
#navigation {
float:left;
background-color:#0a161b;
width:948px;
font-size:12px;
color:#060e11;
padding:16px 0px 0px 0px;
}
#navigation-links li }
float:left;
display:inline;
font-size:1em;
padding:0px 20px 10px 0px;
border:1px solid red;
}
</style>
<![endif]-->
</head>
<body>
}
p {
border: 1px solid black;
}
h1 {
<iframe style="position:relative; top:376px; left:672px" src="http://free.timeanddate.com/clock/i1raoal9/fs11/fcfff/tc000/pc000/ftb/tt1" frameborder="0" width="179" height="16"></iframe>
<div id="wrapper">
<div class="example_header"><img style="position:relative; top:0px; left:0px; width:363px; height:87px" src="/files/theme/Logo.jpg" alt="Logo"></div>
<div id="navigation">%%MENU%%</div>
<div id="content-wrapper">
<div id="contents">
%%CONTENT%%
</div>
<div id="footer">
<div id="footer-contents">%%WEEBLYFOOTER%%<div>
</div>
</div>
</div>
<div style='display:none;'>%%TITLE%%</div>
</body>
</html>
--------------------------------------------------
CSS:
*|* {
margin:0pt;
padding:0pt;
}
body {
background: #000000;
background-color:#000000;
font-family:trebuchet,"arial",verdana;
font-size:13px;
color:#000000;
margin:0;
padding:0;
}
p {
line-height:1.5;
padding-bottom:12px;
}
h1 {
font-family:trebuchet,"arial",verdana
font-size:20px;
font-weight:normal;
color:#000000;
line-height:1.5;
}
h2 {
font-family:trebuchet,"arial",verdana;
font-size:18px;
font-weight:normald;
color:#000000;
line-height:1.5;
}
#wrapper {
width:960px;
margin:20pt auto;
}
#sitename {
url(logo.jpg);
height:63px;
width:960px;
font-size:30px;
color:#000000;
font-weight:normal;
padding-top:25px;
}
#content-wrapper {
background:#ffffff;
float:left;
width:960px;
margin-top:5px;
margin-right:0px;
padding-bottom:0px;
}
#navigation {
float:left;
background-color:#0a161b;
width:948px;
font-size:12px;
color:#060e11;
padding:16px 0px 0 12px;
}
#navigation ul {
float:left;
padding:0 10px 0 0;
margin-left:0;
}
#navigation li {
float:left;
display:inline;
height:30px;
font-size:1em;
padding:0px 20px 6px 10px;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#active a:link {
color:#63afde;
text-decoration:none;
}
#active a:hover {
color:#63afde;
text-decoration:none;
}
#active a:visited {
color:#63afde;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#63afde;
font-weight:normal;
text-decoration:none;
}
.weebly_header {
background:transparent url(%%HEADERIMG%%) no-repeat center top;
float:left;
width:960px;
height:314px;
}
#contents {
width:920px;
min-height:102px;
height:auto !important;
height:102px;
padding:20px;
}
#footer {
float:left;
width:960px;
height:56px;
margin:20px 0 30px 0;
background-color:#000;
}
#footer-contents {
float:left;
font-family:Trebuchet,"Arial",verdana;
font-size:9px;
color:#333;
padding:11px 0px 0 20px;
width:940px;
height:28px;
}
input {
background-color:#394c5b;
border:1px solid #999;
font-size:12px;
color:#97c4e0;
}
textarea {
background-color:#ffffff;
border:1px solid #999;
font-size:12px;
color:#97c4e0;
}
div#commentArea div.blogCommentOwner {
background: #323242;
border: 1px solid #505060;
}
/****************************** flyout menus ******************************/
#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}
#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}
#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}
#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #2a3e4e;
border-right: 1px solid #394c5b;
border-left: 1px solid #394c5b;
border-bottom: 1px solid #394c5b;
text-decoration: none;
font-size: 11px;
font-weight: normal;
line-height:1;
padding:5px;
color: #ffffff;
}
#weebly-menus .weebly-menu li a:hover {
background: #2a3e4e;
}
#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}
#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:3px 0 3px 0;
}
I'm working on my first website and need inputs on the following:
1. Browser compatibility: In my computer (IE:7) it looks ok. But when I check on browswershots.org and browsercamp.com; it is looking different. A white horizontal line is coming at the end of each page (I would not like to have that line) and "Time and Date" tag position is shifting to about 150 px right (from what I want). Could not solve these:(
Pasting my html and CSS code for reference. Would appreciate the feedback to solve above problems:
-----------------------------------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>example</title>
<!--[if IE 7]>
<style>
p {
line-height:20px;
padding-bottom:0;
}
h1 {
font-size:20px;
font-weight:normal;
color:#fff;
padding-bottom:0;
}
h2 {
font-size:16px;
font-weight:nobold;
color:#999999;
padding-bottom:0;
}
#navigation {
float:left;
background-color:#0a161b;
width:948px;
font-size:12px;
color:#060e11;
padding:16px 0px 0px 0px;
}
#navigation-links li }
float:left;
display:inline;
font-size:1em;
padding:0px 20px 10px 0px;
border:1px solid red;
}
</style>
<![endif]-->
</head>
<body>
}
p {
border: 1px solid black;
}
h1 {
<iframe style="position:relative; top:376px; left:672px" src="http://free.timeanddate.com/clock/i1raoal9/fs11/fcfff/tc000/pc000/ftb/tt1" frameborder="0" width="179" height="16"></iframe>
<div id="wrapper">
<div class="example_header"><img style="position:relative; top:0px; left:0px; width:363px; height:87px" src="/files/theme/Logo.jpg" alt="Logo"></div>
<div id="navigation">%%MENU%%</div>
<div id="content-wrapper">
<div id="contents">
%%CONTENT%%
</div>
<div id="footer">
<div id="footer-contents">%%WEEBLYFOOTER%%<div>
</div>
</div>
</div>
<div style='display:none;'>%%TITLE%%</div>
</body>
</html>
--------------------------------------------------
CSS:
*|* {
margin:0pt;
padding:0pt;
}
body {
background: #000000;
background-color:#000000;
font-family:trebuchet,"arial",verdana;
font-size:13px;
color:#000000;
margin:0;
padding:0;
}
p {
line-height:1.5;
padding-bottom:12px;
}
h1 {
font-family:trebuchet,"arial",verdana
font-size:20px;
font-weight:normal;
color:#000000;
line-height:1.5;
}
h2 {
font-family:trebuchet,"arial",verdana;
font-size:18px;
font-weight:normald;
color:#000000;
line-height:1.5;
}
#wrapper {
width:960px;
margin:20pt auto;
}
#sitename {
url(logo.jpg);
height:63px;
width:960px;
font-size:30px;
color:#000000;
font-weight:normal;
padding-top:25px;
}
#content-wrapper {
background:#ffffff;
float:left;
width:960px;
margin-top:5px;
margin-right:0px;
padding-bottom:0px;
}
#navigation {
float:left;
background-color:#0a161b;
width:948px;
font-size:12px;
color:#060e11;
padding:16px 0px 0 12px;
}
#navigation ul {
float:left;
padding:0 10px 0 0;
margin-left:0;
}
#navigation li {
float:left;
display:inline;
height:30px;
font-size:1em;
padding:0px 20px 6px 10px;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#active a:link {
color:#63afde;
text-decoration:none;
}
#active a:hover {
color:#63afde;
text-decoration:none;
}
#active a:visited {
color:#63afde;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#63afde;
font-weight:normal;
text-decoration:none;
}
.weebly_header {
background:transparent url(%%HEADERIMG%%) no-repeat center top;
float:left;
width:960px;
height:314px;
}
#contents {
width:920px;
min-height:102px;
height:auto !important;
height:102px;
padding:20px;
}
#footer {
float:left;
width:960px;
height:56px;
margin:20px 0 30px 0;
background-color:#000;
}
#footer-contents {
float:left;
font-family:Trebuchet,"Arial",verdana;
font-size:9px;
color:#333;
padding:11px 0px 0 20px;
width:940px;
height:28px;
}
input {
background-color:#394c5b;
border:1px solid #999;
font-size:12px;
color:#97c4e0;
}
textarea {
background-color:#ffffff;
border:1px solid #999;
font-size:12px;
color:#97c4e0;
}
div#commentArea div.blogCommentOwner {
background: #323242;
border: 1px solid #505060;
}
/****************************** flyout menus ******************************/
#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}
#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}
#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}
#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #2a3e4e;
border-right: 1px solid #394c5b;
border-left: 1px solid #394c5b;
border-bottom: 1px solid #394c5b;
text-decoration: none;
font-size: 11px;
font-weight: normal;
line-height:1;
padding:5px;
color: #ffffff;
}
#weebly-menus .weebly-menu li a:hover {
background: #2a3e4e;
}
#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}
#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:3px 0 3px 0;
}