My first website! Need specific inputs and critique

iift_sam · Joined: 18 Nov 2009 Posts: 8

Hi all,

I recently finished (almost!) working on my first website.

I'm in the process of correcting the errors found through W3C. 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:(

2. Would appreciate if any other issue someone finds and suggestions to resolve.

Thanks!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4254 Location: MS

White bar at bottom seems to be this code:

sticks464 · Joined: 31 Dec 2006 Posts: 2625

I didn't go through all your css to see what default height divs were set at, but the white line is caused by these div's with no content

iift_sam · Joined: 18 Nov 2009 Posts: 8

Thanks for the replies. Pardon me, I'm financial analyst and too new to the web designing world...I tried these suggestions but couldn't work out the workable html/css code to correct these errors...I'm pasting my html & css code below and it would be great to have help with regard to specific places where I can make corrections and which code should I insert. I tried inserting Iframe tag inside the wrapper div, still it's not working. Also, I'm sure that in other codes there may be many errors, and I'm just in the process of correcting them.

------------

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>

</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;
}

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Just a few minor changes, mainly moving markup div's around.

Css

iift_sam · Joined: 18 Nov 2009 Posts: 8

Thanks Sticks and PayneLess....this has been helpful. I have to say that this forum is quite useful for beginners like me. I made those changes in html & css. Border white line is no longer there. However, now "timeanddate" iframe has shifted to content area. Is there any way this "timeanddate" comes parallel to row of "Disclaimer"?

Alternatively, if there is any html code, that can reflect current day and time without using Iframe tag and assists in placing the day and time parallel to "Disclaimer", that would also be helpful.

Thanks again!