IE dosen't even load up my website?!

Phaser · 2 Apr 2006 at 11:00

www.dzirefm.co.uk/freq/

Firefox loads it fine, however IE dosen't even show anything?!

Also, when I try and add anything underneath the body section, it just places it underneath the header?

And why does the border not go past the header?

Probably something stupid like forgetting to put an end div in, but i've gone through it and can't see anything!

My CSS sheet is here: www.dzirefm.co.uk/freq/screen.css

Help appreciated.

Trigger · 2 Apr 2006 at 11:21

Take the following OUT of your HTML and it should be fine:

Code:

<style type="text/css">

<script type="text/javascript" language="javascript">
function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}
</script>

Phaser · 2 Apr 2006 at 12:46

I removed that, and also the line above it.

Now in IE, the site is fine.

In Firefox, the border is still not all the way round the site?

http://www.dzirefm.co.uk/freq/

:confused:

Trigger · 2 Apr 2006 at 12:54

Try using this:

Code:

<link rel="stylesheet" type="text/css" href="css/index.css" />

in place of:

Code:

<link href="screen.css" rel="stylesheet" type="text/css" />

It doesn't seeem to be picking up the stylesheet in FF :confused:

Phaser · 2 Apr 2006 at 12:56

Still the same mate!

And it must be picking up the CSS as all the other things are in place?

Trigger · 2 Apr 2006 at 13:00

Phaser said:
Still the same mate!

And it must be picking up the CSS as all the other things are in place?

Well it wasn't picking up the stylesheet a minute ago because I just got a page of text with no formatting

I'll have another look...

Phaser · 2 Apr 2006 at 13:07

I was moving the CSS file over to where you suggested.

Trigger · 2 Apr 2006 at 13:12

Try using this as your CSS:

Code:

body
{
background-color: #000000;
text-align: center;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}


	
#container 
{
height: 600px;
min-height: 600px;
max-height: 1000px;
width: 760px;
min-width: 760px;
max-width: 760px;
margin-left: auto;
margin-right:auto;
text-align: left;
border: 1px solid #CCCCCC;
}



#body
{
	width: 760px;
	min-width: 760px;
	max-width: 760px;
	margin-top: 10px;  
	margin-bottom:10px;
}



#bodyleft {
	width: 130px;
	float: left;
	padding-left: 10px;
	padding-top: 20px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	background-color: #000;
	}


#bodyright {
	padding-left: 10px;
	padding-top: 20px;
	padding-right: 20px;
	width: 570px;
	min-width: 570px;
	max-width: 570px;
	float: right;
	border-left: dashed 1px #666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	background-color: #000;
		}



#header {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 112px;
	width: 100%;

}
#hnav-container {
	background-color: #f1df11;
	width:760px;
	height: 29px;
	top: 112px;
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000;
	z-index: 3;
}
.products-nav {
	background-image: url(../images/out-products-bg.gif);
	width: 100%;
	padding-right: 11px;
	padding-left: 12px;
}

#footer {
	background-color: #f1df11;
	/*height: 29px;*/
	/*width: 760px;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	text-align: center;
	/*vertical-align: middle;*/
	/*display: block;*/
	padding-bottom: 10px;
	padding-top: 5px;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #333333;
}

td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	
}


a.hnav {
	font-weight: bold;
	color: #000;
	text-decoration: none;
	height: 20px;
	width: 100%;
	display:block;
	background-image: url(../images/bg-hnav.gif);
        vertical-align: middle;
	padding: 8px 0px 1px;
	}

a.hnav:hover {
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	width: 100%;
	/*height: 20px;
	display:block;
	/*position: relative;*/
	background-image: url(../images/bg-hnav-over.gif);
    /*vertical-align: middle;
	padding: 8px 0px 1px;*/
}

a.small-link{
	font-size: 10px;
	font-weight: none;
	color: #000;
	text-decoration: underline;
}

a.small-link:hover{
	text-decoration: none; 
}
h1 {
	font-size: 15px;
	font-weight: bold;
	color: #f1df11;



a{
	color: black;
	font-weight:bold;
	text-decoration:underline;
}

a:hover{
	text-decoration:none;
}

I think it was just a height problem on a div- I've just used this code and it seems fine for me

Phaser · 2 Apr 2006 at 13:24

All that did was extend the border about 50px down on IE, and the same on Firefox..If you look at it on FF the footer is still in the left body div? :confused:

I was avoiding setting a height so it would stretch accordingly to the content...

Trigger · 2 Apr 2006 at 14:44

HTML:

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>Frequency 88.1 - Drum & Bass From The Streets Of Leeds</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container"> 

	<div id="header"> 
	
		
	
	</div>
	
	<div id="nav">
	
		<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

          <tr> 
            <td align="center"><a href="index.html" class="hnav">Home</a></td>
            <td align="center">|</td>

            <td align="center"><a href="" class="hnav">Schedule</a></td>
            <td align="center">| </td>
            <td align="center"><a href="" class="hnav">Profiles</a></td>

            <td align="center">| </td>
            <td align="center"><a href="" target="_blank" class="hnav">Listen</a></td>
            <td align="center">| </td>

            <td align="center"><a href="" class="hnav">Downloads</a></td>
            <td align="center">| </td>
            <td align="center"><a href="" class="hnav">Contact Us</a></td>

            <td align="center">|</td>
            <td align="center"><a href="" class="hnav">Links</a></td>
          </tr>

        </table>
        
	</div>
       
	<div id="content-left">
       
		<h1>Live Streaming</h1>
			
		<p>Live Streaming...</p>
			
	</div>
	
	<div id="content-right">
	
		<p>
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam at justo. Ut at ante at dolor condimentum scelerisque. 
			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. 
			Vestibulum non nisl ac augue euismod feugiat. Aliquam ligula elit, consectetuer at, vulputate aliquet, interdum at, risus. 
			Proin iaculis mauris nec pede. Sed suscipit justo sed orci. Donec vestibulum orci sit amet urna. Nunc nec purus. 
			Nullam sem turpis, tempor a, dignissim non, vulputate at, ligula. Proin sit amet tortor. Proin semper porta est. 
			Suspendisse elit lectus, molestie id, rutrum nec, fermentum eu, velit. Aliquam erat volutpat. Sed tincidunt ornare sapien.
			
		</p>

		<p>
		
			Etiam euismod aliquet sem. Praesent nisi tellus, venenatis sit amet, dapibus sed, malesuada scelerisque, odio. 
			Aliquam erat volutpat. Nulla neque eros, mattis sit amet, faucibus a, commodo fermentum, ante. Vestibulum ante 
			ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vel dui nec erat euismod facilisis. 
			Donec metus lorem, venenatis nec, vestibulum ut, varius a, enim. Quisque gravida venenatis ante. Morbi mollis ipsum ut 
			eros commodo varius. Mauris lacinia libero at quam. Suspendisse a risus. Quisque dui purus, venenatis sed, fermentum sit amet, 
			imperdiet id, nisi. Phasellus mauris. Quisque fringilla, augue ut vulputate volutpat, tellus purus pharetra tortor, 
			elementum scelerisque tellus odio sed urna. Donec nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
			posuere cubilia Curae; 
			
		</p>
		
	</div>
	
	
	
	<div id="footer">
	
		<p class="copyright">&copy; 2006 Frequency 88.1 All rights reserved.</p>
	
	</div>
		

</div>

</body>

</html>

CSS:

Code:

body
{
background-color: #000000;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
	
#container 
{
min-height: 470px;
overflow: visible;
width: 760px;
min-width: 760px;
max-width: 760px;
margin-left: auto;
margin-right:auto;
border: 1px solid #CCCCCC;
}

#nav
{
background-color: #f1df11;
width:760px;
height: 29px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000;
z-index: 3;
}

a.hnav 
{
font-weight: bold;
color: #000;
text-decoration: none;
height: 20px;
width: 100%;
display:block;
background-image: url(../images/bg-hnav.gif);
vertical-align: bottom;
padding: 8px 0px 1px;
}

a.hnav:hover 
{
font-weight: bold;
color: #FFFFFF;
text-align: center;
text-decoration: none;
width: 100%;
height: 20px;
display:block;
position: relative;
background-image: url(../images/bg-hnav-over.gif);
vertical-align: middle;
padding: 8px 0px 1px;
}

a.small-link
{
font-size: 10px;
font-weight: none;
color: #000000;
text-decoration: underline;
}

a.small-link:hover
{
text-decoration: none; 
}

#header
{
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
height: 112px;
width: 100%;
}

#content-left
{
position: static;
display: block;
width: 130px;
min-width: 130px;
height: auto;
float: left;
padding-left: 10px;
padding-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #000000;
}

#content-right
{
position: relative;
padding-left: 10px;
padding-top: 20px;
padding-right: 20px;
width: 570px;
min-width: 570px;
max-width: 570px;
float: right;
border-left: dashed 1px #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #000000;
}

#footer 
{
float: left;
margin-top: 20px;
margin-bottom: 5px;
background-color: #f1df11;
height: 18px;
min-height: 18px;
max-height: 18px;
width: 760px;
min-width: 760px;
max-width: 760px;
padding-bottom: 10px;
padding-top: 5px;
}

p.copyright
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: center;
}

h1 
{
font-size: 15px;
font-weight: bold;
color: #f1df11;
}

.products-nav 
{
background-image: url(../images/out-products-bg.gif);
width: 100%;
padding-right: 11px;
padding-left: 12px;
}

All seems to work fine for me now

As for the height properties, I've now set them to auto so they will expand with content :cool:

Phaser · 2 Apr 2006 at 15:14

Your a star mate!

Edit: Arghhhhhhhhhhh, on Firefox the border dosent reach all the way down to the bottom of the page when you add content.

Think i'm going to give up for today!

dave_a141 · 2 Apr 2006 at 16:26

I think you need someting like this at the bottom of your html (before then end :

Code:

<div id="footer">
	
		<p class="copyright">&copy; 2006 Frequency 88.1 All rights reserved. 
    Web design by <a href="http://www.dziremedia.co.uk" class="small-link" target="_blank">DZire Media</a></p>
	
</div>
[B]
<div id="clear-right">
</div>
<div id="clear-left">
</div>
[/B]	

</div>

</body>

</html>

and then this in your css:

Code:

#clear-right
{
padding: 0px;
margin: 0px;
position: relative;
clear: right;
}

#clear-left
{
padding: 0px;
margin: 0px;
position: relative;
clear: left;
}

and you'll need to set the bottom margin in your footer to 0px.