Welcome to the North American Subaru Impreza Owners Club Tuesday March 19, 2024
Home Forums Images WikiNASIOC Products Store Modifications Upgrade Garage
NASIOC
Go Back   NASIOC > NASIOC Miscellaneous > Off-Topic

Welcome to NASIOC - The world's largest online community for Subaru enthusiasts!
Welcome to the NASIOC.com Subaru forum.

You are currently viewing our forum as a guest, which gives you limited access to view most discussions and access our other features. By joining our community, free of charge, you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is free, fast and simple, so please join our community today!

If you have any problems with the registration process or your account login, please contact us.







* As an Amazon Associate I earn from qualifying purchases. 
* Registered users of the site do not see these ads. 
Reply
 
Thread Tools Display Modes
Old 01-15-2008, 07:25 PM   #1
Acejam2k
Scooby Specialist
 
Member#: 42645
Join Date: Sep 2003
Chapter/Region: NESIC
Location: MA
Vehicle:
2014 Audi S4
Brilliant Black

Default HTML/CSS Help

Hey OT,

I'm in the process of working on a website. I've been using Dreamweaver 8, and have created most of my images using Photoshop.

Basically I'm going for a solid color background, with a rounded edge rectangle box in the middle. Therefore I've created the body, header, and footer images for this.

I'm using CSS, and I've created 4 DIV's so far, all with classes.

Basically I have the folllowing:
-header DIV
-body/content DIV
-footer DIV
-wrap DIV, which contains all other DIV's inside

The problem I'm having is the following:

Basically the middle portion, or 'box' on my site has a white background with graphically applied borders. The background for each DIV is set to the respective image that I created for it. So the header has the header one with no repeat, body with body image, and set to repeat, and footer set to it's own with no repeat.

The header and body DIV's seem to "come together" fine, without any space between the two. Although the body and footer DIV's, there is a space.

This space does not appear in the WYSIWYG editor, nor does it appear in IE. It only shows up in firefox.

I've tried moving the DIV up in the editor, and it appears to be snug right up next to the body DIV. But the gap still appears when previewed in Firefox, and firefox only.

I have tried to describe this problem to the best of my knowledge.

I have included a screenshot which should basically say everything.



Any ideas on how to fix this gap?

Thanks!
* Registered users of the site do not see these ads.
Acejam2k is offline   Reply With Quote
Sponsored Links
* Registered users of the site do not see these ads.
Old 01-15-2008, 07:27 PM   #2
sonomaxj
Scooby Newbie
 
Member#: 80916
Join Date: Feb 2005
Chapter/Region: BAIC
Vehicle:
My name isn't Max.
Sonoma. XJ.

Default

Put this as the first argument in your stylesheet:

* { margin: 0; padding: 0; }


Also, use div id's for things that appear once, like headers, wrappers, footers, etc. Use classes when things appear more than once, like list items.
sonomaxj is offline   Reply With Quote
Old 01-15-2008, 07:27 PM   #3
Acejam2k
Scooby Specialist
 
Member#: 42645
Join Date: Sep 2003
Chapter/Region: NESIC
Location: MA
Vehicle:
2014 Audi S4
Brilliant Black

Default

And before I forget, code:

HTML Page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="cb.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #034DA4;
}
-->
</style></head>

<body>
<div class="#wrap" id="wrap"> <br />
<div class="header-class" id="header"></div>
  <div class="main-content" id="main-block">
      <div id="navbar">
        <ul>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="services.html">services</a></li>
             
          <li><a href="rates.html"> rates</a></li>
              
          <li><a href="contact.html"> contact us </a></li>
              
          <li><a href="about.html">about us</a></li>  
        </ul>
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
  
  <div class="footer-bottom" id="footer"></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div></body>
</html>

CSS Code

Code:
#wrap {
	width: 790px;
	margin: 0 auto;
}
#header {
	width: 790px;
	position: relative;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 102px;
	padding: 0px;
}
#main-block {
	background-image: url(images/body.jpg);
	background-repeat: repeat;
	background-position: center top;
	width: 790px;
	position: relative;
	padding: 0px;
	clear: both;
}
#footer {
	width: 790px;
	height: 68px;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
	padding: 0px;
}
#table-main {
	background-position: center center;
	display: inline;
}
.table-main {
	background-position: center center;
	display: inline;
	text-decoration: none;
	text-align: left;
}
#navbar ul li a:hover {
	color: #034DA4;
}

#navbar {
	height: 20px;
	width: 790px;
	text-decoration: none;
	font-family: "HandelGothic BT";
	font-size: 18px;
	color: #DB7F40;
}
#navbar ul {
	list-style-type: none;
	display: inline;
	margin: 0px;
	padding: 0px;
	text-indent: 5px;
}
#navbar ul li {
	display: inline;
	text-indent: 3cm;
}
#navbar ul li a {
	text-decoration: none;
	float: none;
	color: #DB7F40;
	font-family: "HandelGothic BT";
	font-size: 18px;
}
Acejam2k is offline   Reply With Quote
Old 01-15-2008, 07:29 PM   #4
Acejam2k
Scooby Specialist
 
Member#: 42645
Join Date: Sep 2003
Chapter/Region: NESIC
Location: MA
Vehicle:
2014 Audi S4
Brilliant Black

Default

Quote:
Originally Posted by sonomaxj View Post
Put this as the first argument in your stylesheet:

* { margin: 0; padding: 0; }


Also, use div id's for things that appear once, like headers, wrappers, footers, etc. Use classes when things appear more than once, like list items.
Holy crap dude!

Before I even had a chance to post the code, you solved my problem! It works perfectly now! Thanks a TON!
Acejam2k is offline   Reply With Quote
Old 01-15-2008, 07:29 PM   #5
sonomaxj
Scooby Newbie
 
Member#: 80916
Join Date: Feb 2005
Chapter/Region: BAIC
Vehicle:
My name isn't Max.
Sonoma. XJ.

Default

Also, the reason the gap is there is because you have all those empty <p> tags. My fix should work for that, but you will have to add an argument for <p> styling, such as:

p { margin: 7px 0; }

Otherwise they won't contain any space around them.
sonomaxj is offline   Reply With Quote
Old 01-15-2008, 07:31 PM   #6
sonomaxj
Scooby Newbie
 
Member#: 80916
Join Date: Feb 2005
Chapter/Region: BAIC
Vehicle:
My name isn't Max.
Sonoma. XJ.

Default

You should always use that global reset when starting out on a page from scratch.

I have an actual default stylesheet that I import to every CSS document I use, which basically resets all the default browser values to be consistent. If you search the web you can find some to use as well. That way when you start out, you never have any of those problems.
sonomaxj is offline   Reply With Quote
Old 01-15-2008, 07:31 PM   #7
Acejam2k
Scooby Specialist
 
Member#: 42645
Join Date: Sep 2003
Chapter/Region: NESIC
Location: MA
Vehicle:
2014 Audi S4
Brilliant Black

Default

Quote:
Originally Posted by sonomaxj View Post
Also, the reason the gap is there is because you have all those empty <p> tags. My fix should work for that, but you will have to add an argument for <p> styling, such as:

p { margin: 7px 0; }

Otherwise they won't contain any space around them.

I put those in for now just to space out the main body DIV so I could view what it would look like physically when filled with content. Thanks again!
Acejam2k is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML email help... Honkey3k Off-Topic 2 04-05-2006 05:18 PM
HTML Frames Help? roffle Off-Topic 61 05-17-2005 12:49 PM
html css help image borders SgWRX Off-Topic 12 03-01-2005 09:34 AM
HTML guru's: Help! eurojax Off-Topic 1 08-05-2004 06:09 AM
HTML Guru's: HELP! Remy E. LeBeau Off-Topic 19 06-20-2003 03:22 PM

All times are GMT -4. The time now is 02:46 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Powered by Searchlight © 2024 Axivo Inc.
Copyright ©1999 - 2019, North American Subaru Impreza Owners Club, Inc.

As an Amazon Associate I earn from qualifying purchases.

When you click on links to various merchants on this site and make a purchase, this can result in this site earning a commission
Affiliate programs and affiliations include, but are not limited to, the eBay Partner Network.