Please help...FF problem. Expanding contentarea goes over the footer

Discussion in 'HTML & Website Design' started by HDaddy, Sep 29, 2007.

0
  1. #1
    Hi!

    I´m making a site for my local bingo hall, and now i have a problem where the content are which is expanding goes over the footer. I can´t figure it out by myself, so i´m asking you gyus for help. Here´s http://koti.mbnet.fi/thinner/bingo/ a link to 3 pics, where you can see the problem.

    I also have another thing i can´t figure out. I want to have a 10px space under the leftbottom box. As you can see now if there´s not so much content, there´s no space under the box. how can i have some?

    Thanks in advance!

    HDaddy

    here´s the html and css

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href="bingo.css" media="screen"/>
<script type="text/javascript" src="dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<title>Tähti-Bingo, Kokkola</title>

</head>
<body>


<div id="headertop">
	</div>
	<div id="containerbg"/>
	<div id="header">
	</div>
	<div id="navi">
	<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="#" title="Etusivu"><span>Etusivu</span></a></li>
<li><a href="#" title="Historia"><span>Historia</span></a></li>
<li><a href="#" title="Pelit" rel="dropmenu1_a"><span>Pelit</span></a></li>
<li><a href="#" title="Veikkaus" rel="dropmenu2_a"><span>Veikkaus</span></a></li>	
<li><a href="#" title="Yhteystiedot"><span>Yhteystiedot</span></a></li>	
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>


<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="#">Ilmaiset</a>
<a href="#">1 € pelit</a>
<a href="#">2 € pelit</a>
<a href="#">Erikoispelit</a>

</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="#">Veikkauksen pelit</a>
<a href="#">Arvat</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 0)
</script>
</div>
<div id="left">
<div id="lefttop">
</div>
<div id="leftbottom">
</div>
</div>
<div id="right">		
<div id="contenttop">
	</div>
<div id="contentbg">
<p class="content">
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Ut at ipsum. Mauris aliquam neque 
sollicitudin elit. Quisque augue lacus, 
blandit et, malesuada sed, fermentum eget,
 leo. Vestibulum sed lectus id sapien
 porttitor ornare. Nam eget tellus sed
 neque fringilla convallis. Etiam sit 
 amet justo. Integer eu mauris. Etiam 
 erat. Praesent eu magna et massa </p>
 <p class="content">
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Ut at ipsum. Mauris aliquam neque 
sollicitudin elit. Quisque augue lacus, 
blandit et, malesuada sed, fermentum eget,
 leo. Vestibulum sed lectus id sapien
 porttitor ornare. Nam eget tellus sed
 neque fringilla convallis. Etiam sit 
 amet justo. Integer eu mauris. Etiam 
 erat. Praesent eu magna et massa </p>
 <p class="content">
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Ut at ipsum. Mauris aliquam neque 
sollicitudin elit. Quisque augue lacus, 
blandit et, malesuada sed, fermentum eget,
 leo. Vestibulum sed lectus id sapien
 porttitor ornare. Nam eget tellus sed
 neque fringilla convallis. Etiam sit 
 amet justo. Integer eu mauris. Etiam 
 erat. Praesent eu magna et massa </p>
 <p class="content">
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Ut at ipsum. Mauris aliquam neque 
sollicitudin elit. Quisque augue lacus, 
blandit et, malesuada sed, fermentum eget,
 leo. Vestibulum sed lectus id sapien
 porttitor ornare. Nam eget tellus sed
 neque fringilla convallis. Etiam sit 
 amet justo. Integer eu mauris. Etiam 
 erat. Praesent eu magna et massa </p>

</div>
<div id="contentbottom">

	</div>
	</div>

<div style="clear: both">
</div>
	<div id="footer">
    </div>
	
	

</body>

</html>
    HTML:
    #headertop {
		background: url(kuvat/headertop.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 52px;
	}
	
#containerbg {
		background: url(kuvat/containerbg.jpg) repeat;
		margin: 0 auto;
		width: 673px;
		}
		
#footer {
		background: url(kuvat/footer.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 52px;
	}
		
#header {
		background: url(kuvat/header.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 155px;
		}
		
/*navigation*/

#navi	{
		background:transparent;
		float: left;
		margin: 0 auto;
		width: 672px;
		}






.ddcolortabs{
padding: 3px 0 0 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: #2D5DC9 url(kuvat/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(kuvat/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #9CC8FF;
}

.ddcolortabs a:hover span{
background-color: #9CC8FF;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #9CC8FF;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #F83E0F;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid #F83E0F; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #F83E0F;
border-bottom: 1px solid #F83E0F; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #9CC8FF;
color: white;
}

#main {
	background: transparent ;
	position: relative;
	float: left;
	left: 0px;
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 663px;
	background: ;
	
}

#left { 
		background:  ;
		float: left;
		width: 253px;
	}
	
#right { 
		background:  ;
		float: right;
		width: 420px;
	}
	
#lefttop {
		position:relative;
		left: 15px;	
		background: url(kuvat/lefttop.jpg) no-repeat;
		float: left;
		margin: 10px 0 0 0;
		width: 231px;
		height: 277px;
		
		}		


		
#leftbottom {
		position:relative;
		left: 15px;
		background: url(kuvat/leftbottom.jpg) no-repeat;
		float: left;
		margin: 10px 0 0 0;
		width: 231px;
		height: 153px;
		
		}
		
#contenttop {
		position:relative;
		top: 10px;
		right: 15px;
		background: url(kuvat/contenttop.jpg) no-repeat;
		float: right;
		margin: 0 0 0 0;
		width: 395px;
		height: 39px;
		
		}
		
#contentbg {
		position:relative;
		top: 10px;
		right: 15px;
		background: url(kuvat/contentbg.jpg) repeat;
		float: right;
		margin: 0 0 0 0;
		width: 395px;
	
		}
		
#contentbottom {
		position:relative;
		top: 10px;
		right: 15px;
		background: url(kuvat/contentbottom.jpg) no-repeat;
		float: right;
		margin: 0 0 0 0;
		width: 395px;
		height: 3px;
		
		}

		
p.content {

		margin: 10px 5px 0 5px;
		padding: 10px 5px 10px 5px;
    Code (markup):
     
    HDaddy, Sep 29, 2007 IP
  2. Zippo

    Zippo Peon

    Messages:
    311
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <p class="content">
    as i see in css u dont have this class.

    one more advice: put the meta TITLE after <html><head>
     
    Zippo, Sep 29, 2007 IP
  3. Subliminal

    Subliminal Active Member

    Messages:
    322
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Yeah Zippo's right!
     
    Subliminal, Sep 30, 2007 IP
  4. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #4
    I fixed both problems but now there´s a new annoying one. Check this http://koti.mbnet.fi/thinner/bingo/ieproblem.gif picture. In the content area, when there´s no content at all. IE has a more of the contentbg showing than FF. Why´s that? Can you help on this one?

    Here are the new css and html:
    #container {
		background: transparent;
		margin: 0 auto ;
		width: 673px;
		}


#headertop {
		background: url(kuvat/headertop.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 52px;
	}
	
#containerbg {
		background: url(kuvat/containerbg.jpg) repeat;
		margin: 0 auto ;
		width: 673px;
		}
		
#footer {
		position: relative;
		top: 10px;
		background: url(kuvat/footer.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 52px;
	}
		
#header {
		background: url(kuvat/header.jpg) no-repeat;
		margin: 0 auto;
		width: 673px;
		height: 155px;
		}
		
/*navigation*/

#navi	{
		background:transparent;
		float: left;
		margin: 0 auto;
		width: 500px;
		}






.ddcolortabs{
padding: 3px 0 0 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: #2D5DC9 url(kuvat/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(kuvat/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #9CC8FF;
}

.ddcolortabs a:hover span{
background-color: #9CC8FF;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #9CC8FF;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #F83E0F;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid #F83E0F; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #F83E0F;
border-bottom: 1px solid #F83E0F; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #9CC8FF;
color: white;
}



#left { 
		background:  ;
		float: left;
		width: 253px;
	}
	
#right { 
		background:  ;
		float: right;
		width: 420px;
	}
	
#lefttop {
		position:relative;
		left: 15px;	
		background: url(kuvat/lefttop.jpg) no-repeat;
		float: left;
		margin: 10px 0 0 0;
		width: 231px;
		height: 277px;
		
		}		


		
#leftbottom {
		position:relative;
		left: 15px;
		background: url(kuvat/leftbottom.jpg) no-repeat;
		float: left;
		margin: 10px 0 0 0;
		width: 231px;
		height: 153px;
		
		}
		
#contenttop {
		position:relative;
		right: 15px;
		background: url(kuvat/contenttop.jpg) no-repeat;
		float: right;
		margin: 10px 0 0 0;
		width: 395px;
		height: 39px;
		
		}
		
#contentbg {
		position:relative;		
		right: 15px;
		background: url(kuvat/contentbg.jpg) repeat-y;
		float: right;
		margin: 0 0 0 0;
		width: 395px;
		}
		
		
#contentbottom {
		position:relative;
		right: 15px;
		background: url(kuvat/contentbottom.jpg) no-repeat;
		float: right;
		margin: 0 0 0 0;
		width: 395px;
		height: 3px;
		
		}

		
p.content {

		margin: ;
		padding: 5px 10px 5px 10px;
    Code (markup):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
<html>
<head>
<title>Tähti-Bingo, Kokkola</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href="bingo.css" media="screen"/>
<script type="text/javascript" src="dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>
<body>

<div id="container"/>
<div id="headertop">
</div>
<div id="containerbg"/>
<div id="header">
</div>
<div id="navi">
	<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="#" title="Etusivu"><span>Etusivu</span></a></li>
<li><a href="#" title="Historia"><span>Historia</span></a></li>
<li><a href="#" title="Pelit" rel="dropmenu1_a"><span>Pelit</span></a></li>
<li><a href="#" title="Veikkaus" rel="dropmenu2_a"><span>Veikkaus</span></a></li>	
<li><a href="#" title="Yhteystiedot"><span>Yhteystiedot</span></a></li>	
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>


<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="#">Ilmaiset</a>
<a href="#">1 € pelit</a>
<a href="#">2 € pelit</a>
<a href="#">Erikoispelit</a>

</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="#">Veikkauksen pelit</a>
<a href="#">Arvat</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 0)
</script>
</div>
<div id="left">
<div id="lefttop">
</div>
<div id="leftbottom">
</div>
</div>
<div id="right">
<div id="contenttop">
</div>
<div id="contentbg">
</div>
<div id="contentbottom">
</div>
</div>
<div style="clear: both">
</div>
<div id="footer">
</div>


	
	

</body>

</html>
    HTML:
    Thanks in advance!

    HDaddy
     
    HDaddy, Sep 30, 2007 IP
  5. Zippo

    Zippo Peon

    Messages:
    311
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    no content....hmmmm
    add a simple:
    <p class="content">&nbsp;<p> and you will have "a little" content.
    Anyway, i see the website the same in both browsers
     
    Zippo, Oct 1, 2007 IP
  6. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #6
    yet another problem...please see this http://koti.mbnet.fi/thinner/bingo/problem.gif. I don´t know why there´s already space in IE between the contentarea and footer. Because i intent to give the footer a 10px top margin value and then the FF is how i want it to be. But then the IE has more space because it already had space, and that´s not what i want. There should be even 10px space between the content and
    footer. Hope im making any sense :)

    I´ve tried everything but i can´t figure it out...so if someone could help me, i´d be grateful forever :)

    the codes are on previous message

    Thanks in advance!
     
    HDaddy, Oct 2, 2007 IP