[Gibbs]

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:

/* 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:

<!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

[MMJ]

Question2: text-align:center; padding: 0 0 3px 0

however I would use a border not a table.

[Gibbs]

Originally Posted by MMJ

Question2: text-align:center; padding: 0 0 3px 0

however I would use a border not a table.

Thanks for your reply MMJ

text-align doesn't centre text vertically. I think i'll ditch the tables too.

For some reason IE doesn't like absolute. Placing the div for the text fields inside the div that displays the header seems to work.

Edit: For some reason when using "top:#px" text fields don't want to work?

[MMJ]

Originally Posted by Gibbs

Thanks for your reply MMJ

text-align doesn't centre text vertically. I think i'll ditch the tables too.

For some reason IE doesn't like absolute. Placing the div for the text fields inside the div that displays the header seems to work.

Edit: For some reason when using "top:#px" text fields don't want to work?

Once again I read too fast.

Although my code should put the text in the exact middle of the box, did you try it?