Hi all,
I haven't web designed seriously in a long time, I'm talking years. Back then HTML validation wasn't a big thing. <div> tags were hardly used and CSS was just was only used for convenience.
I've started to design a site and though I would follow the new guidelines, maybe learn a thing or two. My page is XHTML strict according to W3.org and my CSS has no errors. Firefox displays my page how I want it to (with one exception in question 2). I'm really confused. Can anybody help me in finding what the problem is?
Question 2: As you will be able to see in the screenshots I've made a border around "Network Home". This is because I wanted to make sure my table was aligned correctly, which it is. However the text in the link stays at the bottom, in all browsers. I would like it to go in the middle (vertically) of the cell.
Any help appreciated. The first attachment is a screenshot in IE6, the second in FF (how it should be displayed).
CSS:
Code:
/* ci.xenweb.net */
html
{
background-color: #101010;
color: #d0d0d0;
font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size: 0.90em;
line-height: 1.75em;
}
body
{
margin: 0;
padding: 0;
}
#mastwrap
{
background: url(img/header.png) bottom left repeat-x #9a9a9a;
}
#masthead
{
position:relative;
background: url('../img/header.jpg') bottom left no-repeat transparent;
border-bottom: 0px solid white;
height: 90px;
color: #000;
}
#mastnav
{
height:26px;
background-color:#ccc;
border-top:0px;
border-bottom:0px;
background: url('../img/navbg_n.jpg');
}
#navigation
{
position:absolute;
height:20px;
top:90px;
margin-left:4em;
border:1px solid #fff;
}
#content
{
margin-top: 2em;
margin-left: 4em;
margin-right: 4em;
}
#mastloginuser
{
position:absolute;
border: 0px solid white;
height: 20px;
width: 100px;
top: 20px;
right: 100px;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:10px;
color:#000;
}
#mastloginpass
{
position:absolute;
border: 0px solid white;
height: 20px;
width: 100px;
top: 45px;
right: 96px;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:10px;
color:#000;
}
#mastfieldpos
{
position:absolute;
border: 0px solid white;
height: 40px;
width: 100px;
top: 20px;
right: 4em;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:10px;
color:#000;
}
#loginbutton
{
position:absolute;
height: 24px;
width: 24px;
top: 33px;
right: 18px;
}
#searchbutton
{
position:absolute;
height: 24px;
width: 24px;
top: 90px;
right: 18px;
}
#searchfield
{
position:absolute;
border: 0px solid white;
height: 16px;
width: 100px;
top: 87px;
right: 4em;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:10px;
color:#000;
}
.loginfield
{
width: 90px;
height: 16px;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight:bold;
color: #ff9900;
background-color: #494949;
border:1px solid #000;
}
.searchfield
{
width: 90px;
height: 14px;
font-family:"Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size: 9px;
color: #fff;
background-image:url('../img/search_bg.jpg');
border:1px solid #000;
}
.inlinemediaobject
{
display: block;
text-align: center;
}
a:link.navc, a:active.navc, a:visited.navc
{
font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:9px;
color:#ccc;
text-decoration:none;
}
a:hover.navc
{
font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
font-size:9px;
color:#ff9900;
text-decoration:none;
}
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
color: #fff;
line-height: 1.2em;
text-decoration:underline;
}
h1
{
font-size: 1.6em; border-bottom: 2px solid #ff9900;
text-decoration:none;
}
h2
{
font-size: 1.4em; border-bottom: 1px solid #ff9900;
text-decoration:none;
}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5, h6 {font-size: 1em;}
strong
{
margin: 1.5em 0 0 0;
font-weight: normal;
color: #6ecc5a;
font-size: 1.3em;
} HTML:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CI :: Welcome</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <style type="text/css" media="all"> @import "ci/style/central.css"; </style> </head> <body> <div id="navigation"> <table width="300px" cellpadding="0px" cellspacing="0px"> <tr> <td><a href="#" class="navc">NETWORK HOME</a></td> </tr> </table> </div> <div id="mastlogin"></div> <div id="mastwrap"> <div id="masthead"> </div> </div> <div id="mastnav"></div> <div id="content"> <h1>Welcome</h1> <p>Website under construction. Testing and playing around.</p> <div id="mastloginuser">Username:</div> <div id="mastloginpass">Password:</div> <div id="loginbutton"><input name="Submit" type="image" src="ci/img/login.jpg" value="Login"></input></div> <div id="searchfield"><input type="text" name="search" class="searchfield"></input></div> <div id="searchbutton"><input name="Submit" type="image" src="ci/img/search.jpg" value="Search"></input></div> <div id="mastfieldpos"> <input type="text" name="user" class="loginfield"></input> <br /> <input type="password" name="pass" class="loginfield"></input> </div> <h1>Blah blah blah</h1> <p>fjdsahfjkdshjgfdhsjfhkdsjhfjkgjsdhkgfd</p> <img src="http://one.fsphost.com/gibbs/lin/img/x_04.jpg" alt="nano edit of xorg.conf in shell terminal"></img> </div> </body> </html>
I know theres quite a bit of HTML posted and I apologise for that. I really would appreciate the help though.
Thanks
Login 
Web Design & Development 
