There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
XHTML page not displaying correctly in IE6


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
Gibbs's Avatar
Senior Member with 638 posts.
 
Join Date: Feb 2005
Location: England
Experience: Intermediate
20-Feb-2007, 05:35 PM #1
XHTML page not displaying correctly in IE6
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
Attached Thumbnails
xhtml-page-not-displaying-correctly-ie6.jpg  xhtml-page-not-displaying-correctly-ff.jpg  
MMJ's Avatar
MMJ MMJ is offline
Distinguished Member with 3,208 posts.
 
Join Date: Oct 2006
21-Feb-2007, 04:30 AM #2
Question2: text-align:center; padding: 0 0 3px 0

however I would use a border not a table.
Gibbs's Avatar
Senior Member with 638 posts.
 
Join Date: Feb 2005
Location: England
Experience: Intermediate
21-Feb-2007, 08:04 AM #3
Quote:
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?

Last edited by Gibbs : 21-Feb-2007 08:28 AM.
MMJ's Avatar
MMJ MMJ is offline
Distinguished Member with 3,208 posts.
 
Join Date: Oct 2006
21-Feb-2007, 08:39 AM #4
Quote:
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?
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 11:55 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.