Zymic Webmaster Forums > Css Problems

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

trottski1990

Apr 8 2009, 04:58 PM

hi im working on a website for part of my uni course and i am having some problems with some glitches right now.
the first of which is that in firefox there is a gap between the banner and the header footer div, yet in IE this isn't a problem.

The other more annoying problem i have at the moment is that there is a white line that runs along the side of my content boxes in the middle of the page.

this is my website here
and this is my CSS code

CODE

@charset "utf-8";
/* CSS Document */
/* Set body style */
body{
font-family: Verdana, Arial, Helvetica, sans-serif; /* set font for website content */
font-size: 14px; /* set font size for website content*/
color: #d7d7d7;   /* set font colour for website content*/
background:#646464; /* set background colour for website */
margin:0px;         /* set margin for website */
text-align:left;   /* set default font alignment for website content */
}
img{ /* set set style for images */
border:0px; /* set border for images */
padding:0p 0px 0px 0px;
}
a{      /* set default link colour and size */
color:#d7d7d7;
font-size:14px;
}
a:link,a:active,a:visited{ /* set style properties of text hyperlinks 3 states. */
color:#d7d7d7;
font-size:14px;
text-decoration:none;
}
a:hover{			/* set propertes for hovering over links */
color:#ff9f00;
font-size:14px;
text-decoration:none;
}
ul li {				/* set properties for list tags */
          list-style: none;
          list-style-image:none;
		  margin: 0px;  
		  }
#wrapper{  /*set properties of website wrapper: will hold the entire page */
width:965px; 
height:inherit;
padding: 0px;
margin: 0 auto; 
}
#headerSection{  /*set properties of website header area: will hold the banner and navigation bar */
float: left;
width:965px; 
height: inherit;
}
#bannerContainer{      /*set properties of container for banner*/
  width:965px; height:168px;
  }
    #bannerHead{	/*set properties of banner header*/
	height:27px;
	}
	#bannerBody{	/*set properties of banner body*/
	height:130px;
	border:0px;
	padding:0px 0px 0px 0px;
	margin: 0px;
	}
	#bannerFoot{	/*set properties of banner footer*/
	height:11px;
	border:0px;
	padding:0px 0px 0px 0px;
	margin: 0px;
	}
  #naviContainer{	/*set properties of navigation bar container */
  width:965px; height:35px;
  margin: 0px;
  }
 #naviContainer_div{ /* set properties for navigation itself */
  float:left;
  padding:0px;
  }

.leftColumn{	/*set properties of left column container*/
float:left;
width:205px; height:400px;
}

#leftColumnHeader{	/*set properties of left column header*/
	width:205px; height:27px;
}

.leftColumnBody{	/*set properties of left column body*/
	 background:url(../img/ContentBoxBody.png) repeat-y top left;
	  width:205px; height:auto;
	  padding:2px 11px 2px 13px; 
	  border: 0px;
}
   .LeftColumnContent{	/*set properties of left column content*/
	    text-align:left;
	    padding:2px 11px 2px 13px; 
	    width:181px;
		height:auto;
		border: 0px;
	    }
.leftColumnFooter{	/*set properties of left column footer*/
	 background:url(../img/ContentBoxFoot.png) no-repeat top left;
	  width:205px; height:26px;
	  padding:5px 0 0 0;
	    border:0px;
}
.MiddleColumn{ /* set properties for the middle column container */
width:476px; height:auto;
float:left;
}
#MiddleColumnHeader { /* set properties for the middle column header */
	width:476px; height:27px;
}	
#MiddleColumnNewsHeader {   /* set properties for the middle column container */
	width:476px; height:27px;
}	
.MiddleColumnBody { /*set properties for middle column body container */
	background:url(../img/mainBody.png) repeat-y top left;
	width:476px; height:auto;	
	border: 0px;
}
.MiddleColumnContent{ /*set properties for middle column content container */
	  text-align:left;
	  padding:2px 6px 2px 8px; 
	  width:462px;
	  height:auto;
	  border: 0px;
}
.MiddleColumnFooter { /*set properties for middle column footer container */
	background:url(../img/mainFoot.png) no-repeat top left;
	width:476px; height:26px;
	 padding:0px 0px 0px 0px; 
	  border:1px;
}
#MiddleColumnPlus{ /* set properties for the middle column container */
width:676px; height:auto;
float:left;
}
#MiddleColumnHeaderPlus {   /* set properties for the middle column container */
	width:676px; height:27px;
}	
#MiddleColumnBodyPlus {
	background:url(../img/mainBody.png) repeat top left;
	width:676px; height:auto;	
	border: 0px;
}
.MiddleColumnContentPlus{
	  text-align:left;
	  padding:2px 6px 2px 8px; 
	  width:662px;
	  height:auto;
	  border: 0px;
}
#MiddleColumnFooterPlus {
	background:url(../img/mainFootplus.png) no-repeat top left;
	width:676px; height:26px;
	 padding:0px 0px 0px 0px; 
	  border:1px;
}
.RightColumn{
width:274px; height:auto;
float:right;
}
#RightColumnHeader {
	width:274px; height:15px;
}
.RightColumnBody {
	background:url(../img/RightContentBoxBody.png) repeat-y top left;
	width:274px; height:auto;
	padding:2px 11px 2px 13px; 
}
  .RightColumnContent{
	  text-align:center;
	  padding:2px 11px 2px 13px; 
	  width:250px;
	  }
.RightColumnFooter {
	background:url(../img/RightContentBoxFoot.png) no-repeat top left;
	width:274px; height:26px;
	 padding:5px 0 0 0;
	  border:0px;
}
#footer {
	width:965px;
}

thanks in advance.

k.digennaro

Apr 8 2009, 09:48 PM

Hey,
We'll get you squared away here, looking over code.

Kevin

Edit: Seems to be a lot of errors both in the css and html, I'm just going to recode it from scratch, easier than fixing all the mistakes.\

Edit again, if you could zip up files and send them to me would be a lot more accurate.

Edit: sorry kept getting distracted, any ways I recoded the layout of your site, there are a lot of things I didn't add, content etc. Reasoning being I didn't have images to work with so figured I'd just give you a basic structure seeing you're doing this for a course and you can ask the questions you need to ask to get the rest done.

Preview: http://www.kdiprovox.com/htmlhelp/thatguy/redo.html

CSS Code:

CODE

*{
  margin: 0 0;
  padding: 0 0;
}

body{
  background: #646464;
}

#wrap{
  width:955px;
  height:inherit;
  margin: 0 auto;
  margin-top: 5px;
}

#header{
  background: #2c2c2c url("images/headimage.png") no-repeat;
  width: 955px;
  height: 168px;
  background-position: center;
  border-bottom: 9px solid #252525;
}

#nav{
  margin-top: 5px;
  padding-left: 5px;
  background: url("images/navbg.png") repeat-x;
  width: 950px;
  height: 31px;
}

#nav li{
  list-style: none;
  float: left;
  padding: 5px;
  text-align: center;
}

#nav a{
  text-decoration: none;
  font: 12pt Tahoma, Arial, sans-serif;
  color: white;
}

#nav a:hover{
  text-decoration: none;
  text-decoration: none;
  font: 12pt Tahoma, Arial, sans-serif;
  color: #fbb007;
}

#left{
  float:left;
  height: 200px;
  width: 195px;
  background: #2c2c2c;
  margin: 10px;
}

#center{
  float:left;
  width: 476px;
  height: 200px;
  background: #2c2c2c;
  margin: 10px;
  margin-left: 28px;
}

#right{
  float: left;
  height: 200px;
  width: 195px;
  background: #2c2c2c;
  margin: 10px;
}

#footer{
  background: #252525;
  width: 955px;
  text-align: center;
  color: white;
  float: left;
}

HTML Code:

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">

<head>
  <title>Your Website Title</title>
  <link rel="stylesheet" href="redo.css" type="text/css" />
</head>
<body>
<div id="wrap">
    <div id="header"></div>

    <ul id="nav">
        <li><a href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Factions</a></li>
        <li><a href="">Gallery</a></li>
        <li><a href="">Contact</a></li>
    </ul>

    <div id="left">
         <!--Enter Content-->
    </div>

    <div id="center">
         <!--Enter Content-->
    </div>

    <div id="right">
         <!--Enter Content-->
    </div>

    <div id="footer">Copyright of YourSite.com</div>
</div>
</body>
</html>

*Notice I didn't use the <img> tag once, I could have used it in a couple places, but it wasn't necessary just adding extra code.

Please feel free to ask questions,
Kevin DiGennaro

Andrew

Apr 8 2009, 10:46 PM

I lied, ignore me.

k.digennaro

Apr 8 2009, 10:48 PM

not meaning to spam, but lied about wat? lol

trottski1990

Apr 9 2009, 03:06 PM

Thanks for all the help much appreciated.

One more question whats the proper way to set it up so the content boxes have images as their header and footer.
This is my first time with CSS hence the probably newbie mistakes lol.

k.digennaro

Apr 9 2009, 04:05 PM

Not a problem, can you post an image of what your talking about? I dont quite understand what you are trying to do.

Thanks,
Kevin

trottski1990

Apr 9 2009, 04:15 PM

basically have it so the content boxes are like this.

where there is an image as the header and an image as a footer.

k.digennaro

Apr 9 2009, 04:50 PM

o you can do that all in html/css except the header font would have to be an image, ill show, one sec

HTML:

CODE

    <div id="left">
        <ul class="border">
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Factions</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS:

CODE

#left{
  float:left;
  height: 200px;
  width: 195px;
  background: #2c2c2c;
  margin: 10px;
}

.border{
  background: red;
  width: 150px;
  height: 140px;
  border: 1px solid blue;
  margin-left: 5px;
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 30px;
}

.border li{
  list-style: none;
}

.border a{
  text-decoration: none;
}

.border a:hover{
  text-decoration: none;
  color: yellow;
}

trottski1990

Apr 9 2009, 04:59 PM

yeah i did it before using 3 separate div's like one for the header which contained the image a second div containing teh body and content and a 3rd div for the footer of the content box. I was just wondering if there was a better more efficient way to do it.

k.digennaro

Apr 9 2009, 05:03 PM

yes there is

try that method above

edit: i didnt add the header, but the html would go right above the <ul>and you would use a <h> tag

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