HTML/CSS Gaps and Background problem

cartotech81

08-06-2012, 01:06 AM

I am having problems with gaps between different divs and iframes. There is also a problem with my background not covering the entire page. The only time i could get the background to show across the entire page is by loading it into the body which then puts the background over top of the header background. Any help would be appreciated.

Here is my CSS

html {
border: 0px;
margin: 0px;
padding: 0px;
}

body {
border: 0px;
margin: 0px;
padding: 0px;
}

#footer {
width: 100%;
float: bottom;
clear: both;
background: url(../images/bg03.jpg);
position: relative;
top: 15px;
}

#container {
width: 100%;
background: url(../images/contentright.png);
}

#content {
width: 100%;
float: left;
background: url(../images/contentright.png);
position: relative;
margin-top:-1px;
}

#header {
background: url(../images/bg01.jpg);
width: 100%;
height: 120px;
border: 0px;
border-style: no;
float: none;
margin: 0px;
}

#header iframe {
display: block;
margin: none;
padding: none;
}

/* CSS For Menu */
.solidblockmenu {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid gray;
border-top-width:0;
background: black url(../images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li {
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
font: bold 13px Tahoma;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid gray;
}

.solidblockmenu li a:visited {
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li a.current {
color: white !important;
background: black url(../images/blockactive.gif) center center repeat-x;
}

#menu {
width: 100%;
border: 2px;
border-color: red;
margin: 0;
padding: 0;
overflow: hidden;

}

#menu iframe {
border: none;
width: 100%;
height: 45px;
margin-top: none;
padding: none;
display: block;
overflow: hidden;
}

#menuBody {
position: relative;
border: none;
width: 100%;
height: 45px;
margin-top: none;
padding: none;
display: block;
margin-bottom: -20px;
}

/* Left Content DIV Style */
#contentleft {
float: left;
width: 70%;
text-align: left;
margin-top: 25px;
margin-left: 25px;
background: url(../images/bg03.jpg);
box-shadow: 7px 7px 5px #888888;
border-radius: 5px;
}

#contentleft h1 {
text-align: center;
color: black;
}

#contentleft p {
font-family: "Myriad Pro", "Bookman Old Style", "Times New Roman", Times, Serif;
text-align: justify;
padding: 5px;
margin: 10px;
font-size: 15px;
}
#contentright {
position: absolute;
float: right;
margin-top: 25px;
text-align: center;
left: 75%;
width: 23%;
background: url(../images/bg03.jpg);
box-shadow: 7px 7px 5px #888888;
border-radius: 5px;
}

#contentright h2 {
text-align: center;
color: black;
}

#contentright li {
margin-left: 25px;
margin-right: 10px;
text-align: left;
color: black;
text-align: justified;
}

#contentright p {
text-align: justify;
padding: 5px;
font-size: 12px;
}

#tblSchedule {
margin: 2px;
text-align: justify;
}

#colHead1 {
width: 30%;
text-align: center;
}

#colHead2 {
width: auto;
text-align: center;
}

#col1 {
width: 30%;
text-align: center;
border-right:thick single black;
font-size: 12px;
margin: 10px;
}

#col2 {
width: auto;
text-align: left;
font-size: 13 px;
}

And my HTML

<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Show-Me Shrimp Farms</title>
<link rel="Stylesheet" href="./style/shrimpStyle.css" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<iframe name="header" id="header"
src="./header.html"
scrolling="no">
</iframe>
</div>

<div id="menu">
<iframe name="menu"
src="./menu.html"
scrolling="no">
</iframe>
</div>

<div id="content">
<div id="contentleft">
<h1>2012 ShrimpFest</h1>

<p>The 10th annual Shrimpfest is a celebration that marks the end of the shrimp growing season. Education and entertainment merge in a rural farm environment, providing an astounding experience for all ages.</p>

<p>Learn the basics of aquaculture and the phases of producing the fresh water prawns. Pond-side sales of the prawns begin around 9 a.m., continuing until we are sold out. Prawns are $10 per pound, heads-on. Free ice with porchase. Shrimp plate-dinners:$9. Soda, water, chips and ice available for purchase.</p>

<p>Children enjoy the free, inflatable jump-house and pony rides. Activities include, among other activities: free tours of the shrimp farm; washer toss; volleyball, horseshoe pitching; wine tasting (must show ID); musical entertainment with the amazing DJ and stand-up comedian, Scott Stoner, from Dallas, Texas; and karaoke for those who like to share their talents.</p>

<p>Held rain or shine at the Show-Me Shrimp Farm. Camping ok, Friday and Saturday nights. Bring your lawn chairs and pop-up shelter. Spend a day in a relaxing atmosphere in the middle of nowhere.</p>

</div>

<div id="contentright">
<h2>Schedule of Events</h2>
<table id="tblSchedule">
<tr>
<th id="colHead1">Time</th>
<th id="colHead2">Description</th>
</tr>
<tr>
<td id="col1">3:30 AM</td>
<td id="col2"> Pray to the Shrimp Gods for a bountiful harvest. (Pond takes around 7 hours to drain.</td>
</tr>
<tr>
<td id="col1">10:00 AM</td>
<td id="col2">Shrimp Available For Purchase</td>
</tr>
<tr>
<td id="col1">11 AM - 12 PM</td>
<td id="col2">Lots of Food, Music, Fun</td>
</tr>
</table>
</div>

</div>
</div>
<div id="footer">
© Show-Me Shrimp Farms
</div>
</body>

</html>

tempz

08-06-2012, 02:33 AM

It's hard to find out what the problem is without, header.

cartotech81

08-06-2012, 02:45 AM

I guess I have another question. Is it possible to upload a zip file of all the pieces of the website to make it easier?

tempz

08-06-2012, 04:18 PM

You could do that.

Major Payne

08-06-2012, 06:21 PM

Easier if you have it online so we can use our web developer tools in our browsers to find a solution much quicker.

Might check validation first and correct your errors:

Validating:

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/how-convert-manually-your-html-tables-css
Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html

Nijomi

08-07-2012, 03:20 PM

it may not be related to your problem but I notice you have multiple elements sharing id's.

<div id="header">
<iframe name="header" id="header"
src="./header.html"
scrolling="no">
</iframe>
</div>

you should change this to class if you need to use the same css to style them.

cartotech81

08-08-2012, 01:28 AM

Here is the website online.

http://showmeshrimpfarms.com/working/home.html

cartotech81

08-08-2012, 02:55 AM

Here is the attached zip file.

Major Payne

08-08-2012, 04:36 AM

Correct the CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fshowmeshrimpfarms.com%2Fworking%2Fhome.html) not related to CSS 3.

HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fshowmeshrimpfarms.com%2Fworking%2Fhome.html)

Will help if those are corrected first. Recommend not using iframes to put your layout together. Same for table tags which went out in the late 1990s.

cartotech81

08-08-2012, 12:20 PM

Major Payne

08-08-2012, 09:13 PM

The only reason I used the iframes is because that is what I learned in school last term to keep the same header, footer, and menu bar on each page.You can make a common template for all your pages with the common content or you can make an include file and use Server Side Includes (http://en.wikipedia.org/wiki/Server_Side_Includes). Much better than using frames of any type.

Online SSI Tool (http://www.htmlbasix.com/includes.shtml#taggen)

cartotech81

08-08-2012, 09:52 PM

That sound cool. I will have to look into it some more. I have heard about doing CSS layouts instead of tables I just have not had the oppurtunity to look into them as of now.

The last website I built was actually with PHP and mySQL I was just thinking that it is too much work to do it when there is only a little bit of information that will go on the website.

Major Payne

08-08-2012, 10:38 PM

If you go for other than tables, these might help:

http://www.free-css.com/
http://designfestival.com/450-css-layouts/?utm_medium=email&utm_campaign=450+CSS+Layouts+Testing+HTML+Email+Getting+Type+to+the+Web&utm_content=450+CSS+Layouts+Testing+HTML+Email+Getting+Type+to+the+Web+CID_dc3e0936aca53959877253b43 9c9a4a6&utm_source=Newsletter&utm_term=More
http://blog.html.it/layoutgala/
http://www.alistapart.com/articles/fauxcolumns/
http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/

CSS Table Layout (http://midwestwebdesign.net/tutorials/csstable/default.aspx)