IE problems (as usual)

Phaser

Phaser

Phaser

Associate
Joined
17 Mar 2004
Posts
1,562
Just knocked up a quick simple holding page sort of site.

http://radiointense.co.uk/new

It's perfect in Firefox, but in IE7 the padding etc is completely different?! I've added the usual margin:0, padding:0 etc at the start of my CSS but it hasn't made any difference.

In IE6 there is a 20px or so gap at the top and bottom of the content area.

I'm a bit stumped for ideas. Gone through the margins etc checking they add up, padding and so on, would appreciate if someone could have a quick look and see if i've missed something?

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>Radio Intense - Live across Doncaster on 87.9FM &amp; streaming worldwide</title>
<meta name="keywords" content="Radio Intense Doncaster 87.9FM music" />
<meta name="description" content="Radio Intense - Live across Doncaster on 87.9FM &amp; streaming worldwide" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Radio Intense" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>

<div id="wrapper">
<div id="header"><img src="images/radiointense.gif" alt="Radio Intense" /></div>
<div id="layout">
<div id="content">
<p><strong>Live across Doncaster and streaming worldwide...</strong></p>
<p>Broadcasting in and around Doncaster on 87.9FM and streaming worldwide every weekend, Radio Intense is the all new community radio station for Doncaster. Our DJ's bring you the finest selection of Drum &amp; Bass, Jungle, HipHop, R&B, UK Garage, Bassline 4x4, Grime, Dubstep, Old Skool, and Hardcore.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.</p>
<p>Find us on <strong><a href="#">MySpace</a></strong> and add us to your top friends!</p>

<a href="http://www.radiointense.co.uk/listen.asx"><img src="images/listenlive.gif" alt="Listen online" title="Click here to listen online" class="listenlive" /></a>


<p><strong>Subscribe to our newsletter for regular updates.</strong></p>
<div id="newsletter">
<form id="mailinglist" method="post" action="http://scripts.dreamhost.com/add_list.cgi" />
<input type="hidden" name="list" value="newsletter" />
<input type="hidden" name="domain" value="radiointense.co.uk" />
<input type="hidden" name="url" value="SubscribedURL" />
<input type="hidden" name="unsuburl" value="UnsubscribedURL" />
<input type="hidden" name="alreadyonurl" value="AlreadyOnURL" />
<input type="hidden" name="notonurl" value="NotOnURL" />
<input type="hidden" name="invalidurl" value="InvalidURL" />
<input type="hidden" name="emailconfirmurl" value="EmailConfirmURL" />
<input type="hidden" name="emailit" value="1" />
<p><label for="name" class="mailpagelabel">Name:</label><input name="name" /></p>
<p><label for="email" class="mailpagelabel">E-mail:</label><input name="email" />
<input type="submit" name="submit" value="Subscribe" class="mailpage" /></p></form>
</div><!--end newsletter-->

</div><!--end content-->
</div><!--end layout-->
<div id="footer">
<div id="lefttext">&copy;2007 Radio Intense. All rights reserved.</div>
<div id="righttext"><a href="#">Disclaimer</a></div>
</div><!--end footer-->
</div><!--end wrapper-->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1926593-6";
urchinTracker();
</script>
</body>
</html>

CSS:

Code: 
html, body, div
{
margin:0;
border:0;
padding:0;
}

body{
background-image:url(images/background.gif);
background-repeat:repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#d6d6d6;
}

#wrapper{
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:920px;
height:530px;
}

#wrapper a:link{color:#ff7300;}
#wrapper a:visited{color:#ff7300;}
#wrapper a:hover{color:#d6d6d6;}
#wrapper a:active{color:#ff7300;}

#header{
height:94px;
}

#layout{
height:420px;
border-top:8px solid #3d3e3a;
border-left:8px solid #3d3e3a;
border-right:8px solid #3d3e3a;
border-bottom:6px solid #3d3e3a;
background-color:#ff7300;
background-image:url(images/layoutbg.jpg);
background-position:left;
background-repeat:no-repeat;
}

#content{
float:right;
width:440px;
height:410px;
margin-right:15px;
color:#FFFFFF;
line-height:13px;
margin-top:10px;
}

#content a:link{color:#FFF;}
#content a:visited{color:#FFF;}
#content a:hover{color:#000;}
#content a:active{color:#FFF;}

#footer{
background-color: #3d3e3a;
height:20px;
padding-left:10px;
padding-right:10px;
}

#lefttext{	
float:left;
}

#righttext{
float:right;
}

a img{ 
border: none; 
}

/* General form settings */
form
{
margin:0;
}
form p
{
clear:left;
margin:2px 0;
}
form span.warning
{
margin-left:0.25em;
}
fieldset
{
margin:10px;
border:1px solid #CCCCCC;
padding-bottom:10px;
}
legend
{
margin:0 0 0.5em 0;
padding:0.25em 0.5em;
background-color:#CCCCCC;
color:#fff;
font-size:1em;
font-weight:700;
}
label
{
float:left;
width:120px;
margin:2px 0;
font-weight:700;
vertical-align:middle;
}
input, textarea
{
float:left;
margin:2px 0;
border:1px solid #CCCCCC;
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size:1em;
color:#333;
background-color:#fff;

}
input
{
width:15em;
border:1px solid #000;
}
select
{
float:left;
margin:2px 0;
}
input.button
{
float:none;
width:10em;
padding:0px 6px 0px 6px;
border:2px outset #000;
background-color:#000;
color:#fff;
line-height:normal !important;
text-align:center;
font-weight:700;
}

#newsletter{
width:410px;
height:45px;
background-color:#3d3e3a;
border: solid 1px #FFF;
padding:15px;
margin:0;
}
input.mailpage
{color:#FFF;
background-color:#ff7300;
border:1px solid #000;
height:18px;
font-weight:bold;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
padding-bottom:12px;
width:154px;
margin-left:10px;
}

.mailpagelabel{width:70px;}

.listenlive{margin-top:10px;margin-bottom:20px;}
 
Also on IE7 the text looks awful, kind of like a jpeg which has been saved at low quality? On FF and IE6 it's fine. It's only Verdana in white at 11px so wouldn't have thought it'd have been a problem. :confused:
 
You must log in or register to reply here.
Back
Top Bottom