SitePoint.com

redhillccwebmas · Aug 13, 2006, 10:00

Hi there,

Two questions really that I am stuck on regarding my CSS layout.

Firstly, the ul.nav element that I am using as my main navigation row at the top of the page (in red). You will notice in Firefox that it vertically centres fine, however in IE, the text is sitting towards the top of the ul.nav navigation row - I have tried altering both the margin and padding, but they do nothing in this instance - any ideas how I can get IE to display it properly?

Secondly, this is a Firefox issue not an IE issue this time.
For the ul.footer (highlighted in red) positioned towards the bottom of the page, I want to adjust the top margin of the element, so that it creates a small gap in between the ul.footer bar and the .sidecolumn (like how it renders in IE). Again, I have tried experimenting with padding and margin, but these aren't working for some reason - anyone know how to create the gap in Firefox that I want?

HTML:-

Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div id="container">
<a href="index.html"><img src="images/website-header.jpg" alt="header"/></a>

<ul class="nav">
<li class="navs"><a href="leader.html"><b>Waging leading</b></a></li>
<li class="navs"><a href="become-a leader.html"><b>Become a leader</b></a></li>
<li class="navs"><a href="-for-your-business.html"><b> for your business</b></a></li>
<li class="navs"><a href="services.html"><b>Services</b></a></li>
</ul>

<div class="sidecolumn">
<div class="sideboxes">
<img class="right" src="images/letter150p.jpg" alt="Letter" width="60" height="40"/><p>Subscribe to our mailing list and be kept informed of our news and campaigns.
<a href="mailing-list.html">» more</a></p>
</div>

<a href="leader-ambassodor.html"><img src="images/donate.gif" alt="Donate" width="140" height="50"/></a>

<div class="sideboxes">
<img class="right" src="images/mug.jpg" alt="Letter" width="80" height="90"/><p>Buy our branded items to help raise funds for our cause
<a href="services.html">» more</a></p>
</div>
</div>

<div id="centercolumn">
<p>. We wish to continue and expand this work and call upon you to help us make this possible.</p>

<p><strong>Become a</strong><img class="right" src="images/leader.jpg" alt="" width="143" height="106"/><br/>
Join the club for a small monthly membership fee. Your sponsorship helps our work. As a leader you have the opportunity participate in nominating a worthy individual of th, or you may stay as a silent member supporting our cause through your membership. Members have an option to join initiatives from time to time.</p>

<p><strong>Support Us</strong><br/>
There are other ways you can support us - either by becoming a leader, by making a direct donation, or by playing our games, in which you could win up to £25,000 cash.</p>

<p><strong>Sign our online petition</strong><br/>
Editorial in here about a petition that people will be asked to sign. When they sign the petition we capture their names and addresses and they forward it onto other people.</p>

</div>
<div class="sidecolumn">


<div class="sideboxes">
<p>Find out more about our trips - <br/>
&raquo; more</p>
</div>

<div class="sideboxes">
<p>may apply for the badge to display on website and marketing materials<br/>
<a href="us-for-your-business.html">&raquo; more</a></p>
</div>
</div>


<ul class="footer">
<li class="footers"><a href="index.html">Home</a></li>
<li class="footers"><a href="about-us.html">About Us</a></li>
<li class="footers"><a href="contact-us.html">Contact Us</a></li>
</ul>

<div id="copyright">&copy; 2003-2006</div>
</div>
</body>

</html>

CSS:-

Code:

body{text-align:center;padding:0px;margin:0px;}

#container {
	    margin: 0px auto;   /* align for good browsers */
		width: 750px;text-align:left;}

#container p a{color:#3473ff;text-decoration:none;}
#container p a:hover{text-decoration:underline;}

a img{border:none;}

#container ul.nav{
list-style: none;
padding: 0;
margin: 0;
width:750px;
background:url(images/navbar.jpg);background-color:#ff0000;
text-align:center;
height:20px;
margin-bottom:5px;padding-top:0px;margin-top:0px;
}

#container li.navs{
display:inline;
margin:0 12px 0 12px;
font-family:Verdana;
font-size:11px;
font-weight:normal;
color:#ffffff;
}

#container li.navs a{
color:#ffffff;
text-decoration:none;
}

#container li.navs a:hover{
text-decoration:underline;}

img#header {
margin-bottom:3px;
}

img.right{float:right;}
img.left{float:left;}


#footer{
width:750px;
background:url(images/navbar.jpg);

position:relative;clear:both;
}

#copyright{
width:750px;
text-align:right;
font-family:Arial;
font-size:10px;
color:#adadad;
}

#footer p{
font-family:Arial;
font-size:11px;
color:#ffffff;}


.sidecolumn{
width:140px;
background-color:#999999;
float:left;
}

.sideboxes{
width:138px;
border-left:1px dotted #3473ff;
border-bottom:1px dotted #3473ff;padding-top:3px;
margin-top:8px;
}

.sideboxes p{
font-family:Verdana;
font-size:11px;
color:#000000;margin:6px;
}


#centercolumn{
width:440px;
background-color:#ffffff;
float:left;
margin:0 15px 0 15px;margin-top:0px;padding-top:0px;
}

#centercolumn ul{
font-family:Verdana;
font-size:10px;
color:#5b5b5b;}

#centercolumn li{
margin-bottom:5px;
}

#centercolumn p{
color: #5b5b5b;
margin-top: 8px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin 0 0 7px 0;}

#centercolumn p.article{
color: #5b5b5b;
margin-top: 8px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin 0 0 7px 0;}

#centercolumn h3{
font-family:Verdana;
font-size:15px;
color:#3473ff;
font-weight:bold;}

#centercolumn h4{
font-family:Verdana;
font-size:11px;
font-weight:bold;
color:#3473ff;}

#centercolumn h5{
font-family:Verdana;
font-size:12px;
font-weight:bold;
color:#3473ff;
margin-bottom:0px;
}

strong {
font-size: 12px;
font-weight:bold;
font-family:Verdana;
color: #5b5b5b;
margin-top:-5px;}

form label{
font-family:Arial;
font-size:11px;
color:#3473ff;
}

/* FOOTER */

#container ul.footer{
list-style: none;
padding: 0;
margin: 0;
width:750px;
background:url(images/navbar.jpg);
text-align:center;
height:20px;
margin-bottom:5px;padding-top:0px;margin-top:5px;clear:both;background-color:#ff0000;
}

#container li.footers{
display:inline;
margin:0 12px 0 12px;
font-family:Verdana;
font-size:11px;
font-weight:normal;
color:#ffffff;
}

#container li.footers a{
color:#ffffff;
text-decoration:none;
}

#container li.footers a:hover{
text-decoration:underline;}

Any help is greatly appreciated

Kind Regards

James

Paul O'B · Aug 13, 2006, 10:59

Hi,

For issue 1 just simply set the line-height to the same as the height and that will automatically vertically center text ona single line.

Code:

#container ul.nav{
list-style: none;
padding: 0;
margin: 0;
width:750px;
background:url(images/navbar.jpg);background-color:#ff0000;
text-align:center;
height:20px;line-height:20px;
margin-bottom:5px;padding-top:0px;margin-top:0px;
}

Paul O'B · Aug 13, 2006, 11:12

For the footer you should understand that margins on static elements should not take account of floats in the way. Therefore you have 2 options.

You can apply a 5px bottom margin to your side column and your center column or you can simply float the footer and then its margins will react to other elements as margins on floated elements do not collapse.

Code:

#container ul.footer{
list-style: none;
padding: 0;
margin: 0;
width:750px;
background:url(images/navbar.jpg);
text-align:center;
height:20px;
margin-bottom:5px;padding-top:0px;margin-top:5px;clear:both;background-color:#ff0000;
float:left;
}

redhillccwebmas · Aug 13, 2006, 11:49

Cheers Paul, excellent advice as per usual

Aug 13, 2006, 10:59	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	Hi, For issue 1 just simply set the line-height to the same as the height and that will automatically vertically center text ona single line. Code: #container ul.nav{ list-style: none; padding: 0; margin: 0; width:750px; background:url(images/navbar.jpg);background-color:#ff0000; text-align:center; height:20px;line-height:20px; margin-bottom:5px;padding-top:0px;margin-top:0px; }

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Aug 13, 2006, 11:12	#3
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	For the footer you should understand that margins on static elements should not take account of floats in the way. Therefore you have 2 options. You can apply a 5px bottom margin to your side column and your center column or you can simply float the footer and then its margins will react to other elements as margins on floated elements do not collapse. Code: #container ul.footer{ list-style: none; padding: 0; margin: 0; width:750px; background:url(images/navbar.jpg); text-align:center; height:20px; margin-bottom:5px;padding-top:0px;margin-top:5px;clear:both;background-color:#ff0000; float:left; }

Aug 13, 2006, 11:49	#4
redhillccwebmas SitePoint Guru Join Date: Jun 2005 Posts: 990	Cheers Paul, excellent advice as per usual