|
hey all,
After many many many hours of trying to get this to work i am at my wits end. Have had a few people try to help but nothing seems to solve the problem. Basically the site works fine in IE but in Firefox or Opera the content div is not being stretched down when i add in content to the main div.
Here is the code -
-
<style type="text/css">
-
body
-
{
-
padding:0px;
-
margin:0px;
-
font-size: 12px;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
}
-
-
p
-
{
-
font-size: 12px;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
text-align: left;
-
margin-left: 15px;
-
margin-right: 15px;
-
}
-
-
H2{
-
font-size: 10pt;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
padding-left: 10px;
-
}
-
-
H1{
-
font-size: 12pt;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
padding-left: 10px;
-
}
-
-
-
-
-
#wrapper
-
{
-
width:750px;
-
/*removed for testing */
-
margin:0 auto 0 auto;
-
position:relative;
-
-
-
background-color:#333333;
-
-
/*added for testing
-
height:100%; */
-
}
-
-
#inside_wrapper
-
{
-
width:700px;
-
background-color:#DEDEDE;
-
/*height:100%;*/
-
margin:0 25px 0 25px;
-
}
-
-
#header
-
{
-
top:0px;
-
left:0px;
-
height:300px;
-
background-image: url(/Header.jpg);
-
-
}
-
-
#main_menu
-
{
-
background-color:red;
-
height: 25px;
-
width:700px;
-
}
-
-
#content
-
{
-
width:700px;
-
background-color:#DEDEDE;
-
position:relative;
-
}
-
-
#main
-
{
-
top:25px;
-
right:0px;
-
width:500px;
-
background-color:#DEDEDE;
-
float:right;
-
-
}
-
-
#left_column
-
{
-
top:25px;
-
width:200px;
-
float:left;
-
background-color:#DEDEDE;
-
/*height:700px;*/
-
}
-
-
#linkList
-
{
-
top: 0px;
-
padding-left: 10px;
-
color: #3f3f3f;
-
float:left;
-
width: 197px;
-
}
-
-
-
#footer
-
{
-
display: block;
-
text-align: center;
-
font-size: 10px;
-
background: #333333;
-
}
-
-
li a
-
{
-
color:#CCCCCC;
-
display: block;
-
font-weight: bold;
-
font-size: 12px;
-
text-transform: none;
-
padding: 2px 0 3px 0;
-
}
-
-
li a.c
-
{
-
font-size:12px;
-
font-weight: normal;
-
display: inline;
-
padding: 0;
-
text-transform: uppercase;
-
}
-
-
ul,li
-
{
-
list-style: none;
-
padding: 0;
-
margin: 0;
-
}
-
-
li
-
{
-
color:#CCCCCC;
-
background: #3f3f3f;
-
padding: 5px 7px;
-
border-bottom: 1px solid #dedede;
-
text-transform: uppercase;
-
font-size: 9px;
-
}
-
-
li:hover
-
{
-
background: #7D7D7D;
-
}
-
</style>
-
</head>
-
-
<body>
-
<!--start wrapper-->
-
<div id="wrapper">
-
-
<!--start inside_wrapper-->
-
<div id="inside_wrapper">
-
-
<!--start header-->
-
<div id="header">
-
-
<!--end header-->
-
</div>
-
-
-
-
<!--start mainmenu-->
-
<div id="main_menu">
-
<h2><a href=>Homepage</a>></h2>
-
<!--end mainmenu-->
-
</div>
-
-
<!--start content-->
-
<div id="content">
-
-
<!--start left_column-->
-
<div id="left_column">
-
<!--start linkList-->
-
<div id="linkList">
-
<ul>
-
<li><a href=>Home</a> </li>
-
<li><a href=>Wombat</a></li>
-
<li><a href=>Numbat</a></li>
-
<li><a href=>Koala</a></li>
-
<li><a href=>Kangaroo</a></li>
-
</ul>
-
<!--end linkList-->
-
</div>
-
<!--end left_column-->
-
</div>
-
-
<!--start main-->
-
<div id="main">
-
-
<H1> HOMEPAGE </H1>
-
<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia. Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
-
<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia. Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
-
<br>
-
</br>
-
<img src="/KANGA1.jpg" width="342" height="500" />
-
<!--end main-->
-
</div>
-
<!--end inside_wrapper-->
-
</div>
-
<!--end wrapper-->
-
</div>
-
-
<div id="footer">
-
footer...
-
</div>
-
-
</body>
-
-
</html>
-
Any solutions would be very helpful as i am completely stuck !
Thanks
Ben
| |
Share:
|
Please ignore the code above as it wasn't the right version
here is the 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=utf-8" />
-
-
<title>Australian Animals</title>
-
-
<style type="text/css">
-
body
-
{
-
padding:0px;
-
margin:0px;
-
font-size: 12px;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
}
-
-
p
-
{
-
font-size: 12px;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
text-align: left;
-
margin-left: 15px;
-
margin-right: 15px;
-
}
-
-
H2{
-
font-size: 10pt;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
padding-left: 10px;
-
}
-
-
H1{
-
font-size: 12pt;
-
font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
-
color: #3f3f3f;
-
padding-left: 10px;
-
}
-
-
-
-
-
#wrapper
-
{
-
width:750px;
-
/*removed for testing */
-
margin:0 auto 0 auto;
-
-
-
-
background-color:#333333;
-
-
/*added for testing */
-
height:100%;
-
}
-
-
#notepad
-
{
-
width:700px;
-
background-color:#DEDEDE;
-
height:100%;
-
margin:0 25px 0 25px;
-
position:relative;
-
}
-
-
#header
-
{
-
height:300px;
-
background-image: url(file:///N|/Ben%27s%20stuff/Header.jpg);
-
-
}
-
-
#main_menu
-
{
-
background-color:#DEDEDE;
-
height: 25px;
-
}
-
-
#content
-
{
-
background-color:#DEDEDE;
-
position:relative;
-
}
-
-
#main
-
{
-
background-color:#DEDEDE;
-
float:right;
-
-
}
-
-
#left_column
-
{
-
width:200px;
-
float:left;
-
background-color:#DEDEDE;
-
}
-
-
#linkList
-
{
-
top: 0px;
-
padding-left: 10px;
-
color: #3f3f3f;
-
float:left;
-
width: 197px;
-
}
-
-
-
#footer
-
{
-
display: block;
-
text-align: center;
-
font-size: 10px;
-
background: #333333;
-
}
-
-
li a
-
{
-
color:#CCCCCC;
-
display: block;
-
font-weight: bold;
-
font-size: 12px;
-
text-transform: none;
-
padding: 2px 0 3px 0;
-
}
-
-
li a.c
-
{
-
font-size:12px;
-
font-weight: normal;
-
display: inline;
-
padding: 0;
-
text-transform: uppercase;
-
}
-
-
ul,li
-
{
-
list-style: none;
-
padding: 0;
-
margin: 0;
-
}
-
-
li
-
{
-
color:#CCCCCC;
-
background: #3f3f3f;
-
padding: 5px 7px;
-
border-bottom: 1px solid #dedede;
-
text-transform: uppercase;
-
font-size: 9px;
-
}
-
-
li:hover
-
{
-
background: #7D7D7D;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div id="wrapper">
-
<div id="notepad">
-
<div id="header">
-
</div>
-
-
<div id="main_menu">
-
<h2><a href=>Homepage</a>></h2>
-
</div>
-
-
<div id="content">
-
<div id="left_column">
-
<div id="linkList">
-
<ul>
-
<li><a href=>Home</a> </li>
-
<li><a href=>Wombat</a></li>
-
<li><a href=>Numbat</a></li>
-
<li><a href=>Koala</a></li>
-
<li><a href=>Kangaroo</a></li>
-
</ul>
-
</div>
-
</div>
-
<div id="main">
-
-
<H1> HOMEPAGE </H1>
-
<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia. Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
-
-
<br>
-
</br>
-
<img src="file:///I|/Documents%20and%20Settings/Ben/My%20Documents/1Assignment%204/KANGA1.jpg" width="342" height="500" />
-
</div>
-
</div>
-
</div>
-
<div id="footer">
-
footer...
-
</div>
-
</div>
-
</body>
-
-
</html>
-
| | Expert 4TB |
As usual, the problem is IE and I am seeing this problem brought up constantly. This is a IE bug. Divs are NOT to expand to enclose floated elements. Firefox and Opera are performing correctly. If you want the div to expand, then you must add overflow:auto; to your #notepad div.
I need to warn you about using upper-case in your code. Case matters in xhtml and css.
| | Post your reply Sign in to post your reply or Sign up for a free account.
Similar topics
4 posts
views
Thread by Bruce W...1 |
last post: by
|
2 posts
views
Thread by Thiko |
last post: by
|
4 posts
views
Thread by Roland |
last post: by
|
5 posts
views
Thread by Miyra |
last post: by
|
9 posts
views
Thread by Alvin Bruney [MVP] |
last post: by
|
10 posts
views
Thread by Dennis D. |
last post: by
|
2 posts
views
Thread by Ana Santana |
last post: by
| | | | | | | | | | | | | |