Zymic Webmaster Forums > Help Needed With Table In Css

Full Version: Help Needed With Table In Css

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Musebo

Nov 25 2008, 03:26 PM

Hi all,

I am developing a website for LOST an American TV show.
While I was building the menu in CSS, I immediately faced a problem;

As you can see, the 'home' tab hasn't the same height as the others tabs,
and I can't figure out why.

My Index Page Code:

CODE

<HTML>

<HEAD>

<TITLE>NAME WEBSITE</TITLE>
<link href="STYLE.css" rel="stylesheet" type="text/css" />

</HEAD>

<BODY>
<!-- Begin Menu --!>
<div id="menu">
		<ul>
			<li class="active"><a href="#"><P1>Home</P></a></li>
			<li><a href="#"><P1>About</P></a></li>
			<li><a href="#"><P1>Het Eiland</P></a></li>
			<li><a href="#"><P1>Personages</P></a></li>
			<li><a href="#"><P1>Het verhaal</P></a></li>
			<li><a href="#"><P1>Community</P></a></li>
			<li><a href="Contact.html"><P1>Contact</P></a></li>
		</ul>
</div>
<!-- END menu -->

</BODY>

<HTML>

My Extern CSS script:

CODE

Body {
	background-color: black;
	background-image: url(\IMG01);
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-position: center;
}

p1 {
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

/* MENU */

#menu {
	width: 700px;
	height: 51px;
	margin: -35 auto;	
}

#menu ul {
	text-align: right;
	margin: 0;
	padding: 20px 0 0 20px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 22px;
	padding: 0px 20px 0 20px;
	border-right: 1px solid #2A2C2F;
	text-transform: lowercase;
	text-decoration: none;
	text-align: center;
	font-size: 11px;
	color: #DFE8F2;
}

#menu a:hover, #menu .active a {
	background-color: #000000;
}

I hope someone can help me with my problem, how to fix this!

Thanks all

Banjo

Nov 25 2008, 06:48 PM

Sorry this isn't to do with your problem but i was just scimming your code a noticed you have

CODE

#menu {
width: 700px;
height: 51px;
margin: -35 auto;
}

you need to put a unit after the number like px

also the background in yout Body { , the code can be shorterned as well. I would post how but i have to go out now

Andrew

Nov 25 2008, 09:59 PM

God that is horrible coding, no doctype, no character encoding type,. There is NO such thing as a <p1> tag, and also p tags don't go inside of <a> tags. USe this code, I don't know if it fixed what your problem is since I can't duplicate the problem.

HTML file

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>

<TITLE>NAME WEBSITE</TITLE>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link href="STYLE.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
<!-- Begin Menu -->
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Het Eiland</a></li>
<li><a href="#">Personages</a></li>
<li><a href="#">Het verhaal</a></li>
<li><a href="#">Community</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
<!-- END menu -->

</BODY>

</HTML>

CSS file

CODE

Body {
background-color: black;
background-image: url(\IMG01);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

/* MENU */

#menu {
width: 700px;
height: 16px;
}

#menu ul {
text-align: right;
margin: 0;
padding: 20px 0 0 20px;
list-style: none;
}

#menu li {
display: inline;
font: normal 14px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}

#menu a {
display: block;
float: left;
height: 22px;
padding: 0px 20px 0 20px;
border-right: 1px solid #2A2C2F;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 11px;
color: #DFE8F2;
}

#menu a:hover, #menu .active a {
background-color: #000000;
}

MrTouz

Nov 26 2008, 03:38 AM

Its more likely that the problem comes from the class="active" because the home page is the only a tag set as active and is the only a tag that has a problem.

I think setting #menu .active might not work... try setting #meny li .active with the same data as the un-active a tag.

Andrew

Nov 26 2008, 06:55 AM

I doubt it, when I saved the code to my computer it looked like all the other links when viewed in IE and looked like the home link when viewed in firefox. Didn't look anything like the screenshot.

Musebo

Nov 26 2008, 09:29 PM

Well my problem is solved, tnx for the help

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.