tableless going crazy

Discussion in 'HTML & Website Design' started by dcole07, Jul 26, 2006.

0
  1. #1
    so how do I get the bottom nav bar to have the space inbetween the Updated: 06-25-2006 and About Us fill in the area with the gray? and how do I have it look like the FF verson of it in IE and Opera. Also the left nav bar looks different in IE and Opera and I want it to look like how FF has it. What should be changed so it look correct in all browsers?

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>The DCole Server @ http://dcole.ath.cx</title>

<style type='text/css'>
body {
	font-size: 12px;
  	font-family: Verdana,Tahoma, Arial,sans-serif;
}

#title {
background-color: #FFFFFF;
color:#990000;
float: left;
width: 400px;
height: 100px;
margin: 0px 0px 0px 50px;
padding: 0px;
font-size:40px;
}

#info {
background-color: #FFFFFF;
color:#990000;
padding: 0px;
margin-left: 400px;
margin-right: 50px;
padding: 0px 0px 0px 0px;
height: 100px;
text-align: right
}

div.left {
float: left;
width: 200px;
margin: 0px 0px 0px 50px;
padding: 0px;
background-color: #FFFFFF;
color: #323232;
}

div.left ul {
list-style: none;
padding-left: 0px;
font-weight: bold;
}

div.left li a {
display: block;
border-left: solid 0.5em #EAEAEA;
border-top: solid 1px #C8C8C8;
border-bottom: solid 1px #EAEAEA;
background-color: #EBEBEB;
text-decoration: none;
color: #990000;
height: 1.3em;
}	
	
div.left a:hover {
border-left: solid 0.5em #AFAFAF;
border-bottom: solid 1px #990000;
background-color: #DCDCDC;
color: #990000;
}

div.left .selected {
display: block;
border-left: solid 0.5em #990000;
border-top: solid 0.1em rgb(200,200,200);
background-color: #DCDCDC;
color: #000000;
}

div.right {
background-color: #FF00FF;
padding: 0px;
margin-left: 50px;
margin-right: 50px;
}

div.footer {
margin: 0px 50px 0px 50px;
clear: both;
color: #323232;
}

div.footer ul {
list-style: none;
font-weight: bold;
padding-left: 0px;
}

div.footer li {
white-space: nowrap;
}

div.footer li a {
display: block;
background-color: #EBEBEB;
border-left: solid 0.5em #EAEAEA;
border-right: solid 1px #AFAFAF;	
text-decoration: none;
color: #323232;
font-weight: bold;
color: #323232;
height: 1.3em;
}

div.footer li a:hover {
border-left: solid 0.5em #AFAFAF;
border-right: solid 1px #AFAFAF;
background-color: #DCDCDC;
text-decoration: none;
color: #323232;
}

div.footer li .selected {
padding: 0em 0.5em 0em 0.5em;
border-right: solid 1px #AFAFAF;		
background-color: #DCDCDC;
color: #323232;
}

li.fleft {
float: left;
width: 200px;
border-left: solid 1px #AFAFAF;
}

li.mid {
float: left;
width: auto;
background-color: #EBEBEB;
border-left: solid 0.5em #EAEAEA;
border-right: solid 1px #AFAFAF;
}

li.fright {
float: right;
width: 110px;
}

div.logio {
text-align: center;
}

</style>

</head>
<body>

	<div id='header'>
		<div id='title'>
			The DCole Server
		</div>
		<div id='info'>
			<form id='search' method='get' action='http://dcole.ath.cx/'><div><input name='DCT' id='dcse_DCTEx' /><input type='submit' value='Search' /></div></form><br />
			Welcome Guest | Login | Help<br /><br />
			Sunday, July 9, 2006
		</div>
	</div>
		<div class='left'>
			<ul>
				<li class='selected'>Home</li>
        			<li><a href='#'>Settings</a></li>
        			<li><a href='#'>Blog</a></li>
        			<li><a href='#'>Wiki DCole</a></li>
        			<li><a href='#'>Search Engine</a></li>
        			<li><a href='#'>Message Board</a></li>
        			<li><a href='#'>File Manager</a></li>
        			<li><a href='#'>Scripts</a></li>
        			<li><a href='#'>Support Us</a></li>
        			<li><a href='#'>Communities</a><br /></li>
			</ul>
			<div class='logio'>
			<ul>
				<li><b> Account&nbsp;Login!</b></li>
				<li>
					<form action='/ffm/login.php' method='post'>
					<div>
						Website:<br />
						<input size='20' name='website' type='text' /><br />
						Password:<br />
						<input size='20' name='password' type='password' /><br />
						<input value='Login' type='submit' />
					</div>
					</form>
				</li>	
     			 </ul>
			</div>
		</div>
	<div class='right'>
		body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />

	</div>
		<div class='footer'>
			<ul>
				<li class='fleft'><a href='#'>Updated: 06-25-2006</a></li>
				<li class='mid'>&nbsp;</li>
				<li class='fright'><a href='#'>About Us</a></li>
        			<li class='fright'><a href='#'>Site Map</a></li>
        			<li class='fright'><a href='#'>Terms of Use</a></li>
        			<li class='fright'><a href='#'>Accessibility</a></li>
        			<li class='fright'><a href='#'>Send Feedback</a></li>  
				<li class='fright'><a href='#'>Contact Us</a></li>
			</ul>
		</div>
<br />
</body>
</html>
    Code (markup):

     
    dcole07, Jul 26, 2006 IP
  2. Pensacola_Website_Design

    Pensacola_Website_Design Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    to add the gray do 2 things: 1) add this just after your </ul> : <div style="clear:both;"></div> 2) add this to your div.footer style: background:#EBEBEB;

    As far as your menu question, I am not sure as I have checked and the menus look identical on my FF and IE browsers
     
    Pensacola_Website_Design, Apr 28, 2010 IP