Css layout problems

Discussion in 'CSS' started by Bosus, May 16, 2007.

0
  1. #1
    Hello!
    I'm quite new to CSS but i decided to try and change a site into using CSS instead of tables (heard that was the right thing to do).

    So here's my 2 problems.
    1. I have 3 columns and a header. But underneath the header I'd like to put a horizontal menu. I found a menu called "Tomek Garbiak's list" at Listamatic and tried to add it to my page but it's not showing up. I'm guessing it's hiding behind my header image but I don't know how to get it where I want.

    My css-code is as follows:
    body
{
	font-family: Verdana, Geneva, Arial, Helvetica, Tahoma, sans-serif;
	font-size: small;
	background-color: #FFFFFF;
	text-align: center;
}

#huvud {
	background:#fff;
	text-align: left;
	position: absolute;
	left:10px;
	top:10px;
	width:100%;
	border-top:0px solid #000;
	border-right:0px solid #000;
	border-left:0px solid #000;
}

#navcontainer {
	width:100%;
	padding: 0;
	height: 22px;
	font: 11px Verdana, sans-serif;
	width: 100%;
	border-bottom: 1px solid #bbb;
	list-style-type: none;
	background: #fff;
}

#navlist li {
	float: left;
	margin: 0;
	padding: 0;
	width: auto;
	display: block;
}

#navlist li a, #navlist li a:link {
	background: #fff;
	color: #555;
	text-decoration: none;
	padding: 3px 5px 3px 5px;
	display: block;
}

#navlist li a:hover {
	color: #039;
	border-bottom: 3px solid #bbb;
	cursor: pointer;
	background: #eee;
}

#navlist li a#current, #navlist li a#current:link {
	color: #000;
	cursor: default;
	font-weight: bold;
	border-bottom: 3px solid #999;
}

#navlist li a#current:hover {
	border-bottom: 3px solid #254ac2;
	background: #eee;
}


#leftcontent {
	margin-left: 10px;
	text-align: left;
	position: absolute;
	left:10px;
	top:230px;
	width:190px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	margin-top:196px;
	text-align: left;
	padding-left:10px;
	background:#fff;
	margin-left: 209px;
	margin-right:209px;
	border:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin-left: 201px;
	margin-right:201px;
}
html>body #centercontent {
	margin-left: 211px;
	margin-right:211px;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:230px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}


#navcontainer2 ul {
	list-style-type: none;
	text-align: left;
}

#navcontainer2 ul li a {
	background: transparent url(bilder/list-off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	text-decoration: none;
	color: #999;
}

#navcontainer2 ul li a:hover {
	background: transparent url(bilder/list-on.gif) left center no-repeat;
	color: black;
}

#navcontainer2 ul li a#current {
	background: transparent url(bilder/list-active.gif) left center no-repeat;
	color: #666;
}
    Code (markup):
    The menu not showing is #navcontainer, not #navcontainer2

    My HTML-code is as follows
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>
<div id="huvud">
	<img src="bilder/top2_3.jpg" alt="www.rhemacenter.se">
</div>

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Hem</a></li>
		<li><a href="#">Undervisning</a></li>
		<li><a href="#">Internationellt</a></li>
		<li><a href="#">Webshop</a></li>
		<li><a href="#">Kontakt</a></li>
	</ul>
</div>

<div id="leftcontent">
	<div id="navcontainer2">
		<ul id="navlist2">
			<li id="active"><a href="#" id="current">Vision</a></li>
			<li><a href="#">Församlingen</a></li>
			<li><a href="#">Pastorer</a></li>
			<li><a href="#">Vägbeskrivning</a></li>
			<li><a href="#">Förlaget</a></li>
		</ul>
	</div>
</div>
<div id="centercontent">
	<h1>truru</h1>
	blablablabalbalblablalbalbalb
</div>

<div id="rightcontent">Advertisment</div>
</body>
</html>
    Code (markup):
    2. My second problem is that in Firefox the three columns appear aligned but in IE the center column is a bit further down than it should. How can i solve that? And the header (H1)font is totally different in the two browsers, why and how can I fix that?

    Thankful for any help
    /Bosus
     
    Bosus, May 16, 2007 IP
  2. vvm

    vvm Peon

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Replace CSS:
    
body
{
	font-family: Verdana, Geneva, Arial, Helvetica, Tahoma, sans-serif;
	font-size: small;
	background-color: #FFFFFF;
	text-align: center;
}

#huvud {
	background:#fff;
	text-align: left;
/*	position: absolute;
	left:10px;
	top:10px;*/
	width:100%;
	border-top:0px solid #000;
	border-right:0px solid #000;
	border-left:0px solid #000;
}

#navcontainer {
	width:100%;
	padding: 0;
	height: 22px;
	font: 11px Verdana, sans-serif;
	width: 100%;
	border-bottom: 1px solid #bbb;
	list-style-type: none;
	background: #fff;
	margin-bottom:21px;
}

#navlist li {
	float: left;
	margin: 0;
	padding: 0;
	width: auto;
	display: block;
}

#navlist li a, #navlist li a:link {
	background: #fff;
	color: #555;
	text-decoration: none;
	padding: 3px 5px 3px 5px;
	display: block;
}

#navlist li a:hover {
	color: #039;
	border-bottom: 3px solid #bbb;
	cursor: pointer;
	background: #eee;
}

#navlist li a#current, #navlist li a#current:link {
	color: #000;
	cursor: default;
	font-weight: bold;
	border-bottom: 3px solid #999;
}

#navlist li a#current:hover {
	border-bottom: 3px solid #254ac2;
	background: #eee;
}


#leftcontent {
	margin-left: 10px;
	text-align: left;
	position: absolute;
	left:10px;
	top:80px;
	width:190px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
/*	margin-top:12px;*/
	text-align: left;
	padding-left:10px;
	background:#fff;
	margin-left: 209px;
	margin-right:209px;
	border:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;


}
html>body #centercontent {
	margin-left: 211px;
	margin-right:211px;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:80px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}


#navcontainer2 ul {
	list-style-type: none;
	text-align: left;
}

#navcontainer2 ul li a {
	background: transparent url(bilder/list-off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	text-decoration: none;
	color: #999;
}

#navcontainer2 ul li a:hover {
	background: transparent url(bilder/list-on.gif) left center no-repeat;
	color: black;
}

#navcontainer2 ul li a#current {
	background: transparent url(bilder/list-active.gif) left center no-repeat;
	color: #666;
}

h1{font-size:26px}
    Code (markup):
     
    vvm, May 16, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    @Bosus: You posted this identical question on another forum just three minutes before posting here. You received an answer about forty minutes before getting answered here, too. X-posting like like that is poor netiquette. You have disparate groups working to try to help you. Show your potential helpers some respect, and don't waste their time duplicating each other's work. Are there other groups out there, wasting their time, too?

    gary
     
    kk5st, May 16, 2007 IP