3 replies [Last post]
joewarrington
Offline
newbie
Last seen: 12 years 25 weeks ago
Timezone: GMT+1
Joined: 2010-07-28
Posts: 2
Points: 3

Hi,

Possibly a newbie error, I'm having issues with a simple 2 column layout. The 2 column divs render fine in firefox, safari, and opera, but in IE 6 and 7, the #sidebar div renders a few pixels wider and drops below the #main div.

the site is at http://www.joewarrington.co.uk/adrenalin

Im new to column layouts and have read about MSIEs box model issues, but I dont fully understand them. Is there something im missing or is there a hack i can use to make IE render a different width value.

Thanks, Joe

HTML:

<?php session_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vocalpro.co.uk - Record your Vocals</title>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/script.js'></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
 
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
 
</head>
 
<body>
 
<div id="wrap">
	<div id="header">
		<h1>VOCALIST OPPORTUNITY!</h1>
        <p>
        INCREDIBLE VOCALIST PACKAGE! <strong>RECORD YOUR VOCALS</strong> WITH A <strong>TOP PRODUCER!</strong>
        </p>
	</div>
	<div id="main">
    	<div id="header-star"><img src="images/star.png" alt="Limited Offer!" /></div>
    	<h2>Calling all Singers, Voiceover Artists, Podcasters and other Vocal Performers!</h2>
 
		<ul id="vocalists">
			<li><img src="images/sing4.jpg" alt="Vocalist 1" /></li>
			<li><img src="images/sing1.jpg" alt="Vocalist 2" /></li>
			<li><img src="images/sing3.jpg" alt="Vocalist 3" /></li>
			<li><img src="images/sing2.jpg" alt="Vocalist 4" /></li>
		</ul>
 
		<p class="content-paragraph">
		GET AHEAD OF THE COMPETITION WITH THE HIGHEST QUALITY MASTER RECORDING. MAKE PROFESSIONALS TAKE NOTICE OF YOUR VOICE!
		</p>
 
		<p>
		Get recognised by <strong>television</strong>, <strong>radio</strong>, <strong>competitions</strong> and achieve that <strong>elusive record deal!</strong> See the difference as the dream offers start to roll in!
		</p>
 
			<div class="roundcont">
				<div class="roundtop">
				<img src="images/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
				</div>
 
				<h3 id="boxheader">What we offer:</h3>
 
					<ul id="boxlist">
						<li>Professional producers who nurture your best performance</li>
						<li>The highest quality recording the industry expects</li>
						<li>Professionally mastered and presented CDs</li>
					</ul>
 
				<div class="roundbottom">
				<img src="images/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
				</div>
			</div>	
 
		<p class="content-paragraph">This incredible offer gives you the chance to record at the highest master quality, with full production values, finally mastered to the highest quality.
        </p>
 
		<p class="content-paragraph">Your time in the studio will be one of the most exciting and rewarding times of your life. You will be nurtured into delivering far in excess of your past capabilities, and we will help to you realise your highest vocal potential.
        </p>
    </div>
	<div id="sidebar">
		<form action="process-form.php" method="post">
			<fieldset>
				<label>Enquiries</label>
					<p class="contact">Your name please...*</p>
						<input type="text" id="name" name="name" />
					<p class="contact">Your e-mail address:</p>
						<input type="text" id="email" name="email" />
					<p class="contact">Subject:</p>
						<input type="text" id="topic" name="topic" />
					<p class="contact">Message:</p>
						<textarea id="comments" name="comments" rows="5" cols="20"></textarea>
					<p class="contact">
                  		<input type="submit" value="Send message!" />
                    </p>
			</fieldset>
		</form>
 
	<!--<img class="image" src="images/live.jpg" alt="Live Room" /></li>
		<img class="image" src="images/control.jpg" alt="Control Room" /></li>
		<img class="image" src="images/dan.jpg" alt="Filming" /></li>
		<img class="image" src="images/live2.jpg" alt="Live Room" /></li>-->
 
	</div>
	<div id="footer">
    <small>&copy; Vocalpro.co.uk</small>
	</div>
</div>
 
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */
 
body, html {
	margin:0;
	padding:0;
	font-size:0.9em;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	background-image:url(images/bg.jpg);
	background-repeat:repeat;
}
 
#header p{
color:#CCCCCC;
font-size:0.9em;
}
 
h1, h2, h3, p, ul {
margin-bottom:10px;
}
 
*{
margin:0;
padding:0;
}
 
#header-star{
position:absolute;
margin-top:-107px;
}
 
#wrap {
	width:900px;
	margin:0 auto;
}
 
#header {
	background-image:url(images/header.png);
	background-position:left;
	background-repeat:no-repeat;
	background-color:none;
	height:159px;
	width:880px;
	padding-left:20px;
	padding-top:15px;
}
 
#header h1 {
	margin-bottom:10px;
	color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
 
#main {
	float:left;
	width:607px;
	padding:20px;
	border-left:thin solid #000000;
	background-color:#CCCCCC;
}
 
.content-paragraph{
border-bottom:thin dotted #000000;
padding-bottom:10px;
clear:both;
}
 
#vocalists {
margin:0px;
padding:0px;
list-style:none;
margin-bottom:10px;
}
 
#vocalists li {
display:inline;
margin-left:0px;
margin-right:30px;
padding:0;
}
 
/*Start Offer Box*/
 
.roundcont {
	width: 550px;
	background-color: #f90;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}
 
.roundcont p {
	margin: 0 10px;
}
 
.roundtop { 
	background: url(images/tr.gif) no-repeat top right; 
}
 
.roundbottom {
	background: url(images/br.gif) no-repeat top right; 
}
 
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}
 
#boxheader{
padding-left:10px;
}
 
li{
margin-left:40px;
}
 
/*End Offer Box*/
 
#sidebar {
	float:right;
	width:210px !important;
	wi/dth:100px;
	padding:20px;
	background:#CCCCCC;
	border-left:thin dotted #000000;
	border-right:thin solid #000000;
}
 
.image{
margin-bottom:10px;
}
 
#footer {
	clear:both;
	padding:5px 10px;
	background-image:url(images/footer.png);
	color:#CCCCCC;
	font-size:1.0em;
}
 
#footer p {
	margin:0;
  }
 
* html #footer {
	height:1px;
}

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 3 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

I think you should try

I think you should try removing the float:right; on the side bar div allowing it to nestle up with the main div to the left, seen as you have set widths.

I'm not sure if you will need to remove the float on it completely or simply change it to float: left;

Let me know how you get on.

Luke.

p.s. Have you thought about making the sidebar the same size as the main div?

joewarrington
Offline
newbie
Last seen: 12 years 25 weeks ago
Timezone: GMT+1
Joined: 2010-07-28
Posts: 2
Points: 3

Hi Luke, thanks for

Hi Luke, thanks for replying.

I don't have a copy of IE to hand atm (I'm on mac) I'll only be able to test your suggestion next time I'm in the office.

I don't think that the float attribute is the issue, its the fact that IE is rendering the sidebar div a few pixels larger than when rendered in FF, Opera etc, and if I reduce the size, when rendered in FF there is a gap, but in IE it fits perfectly, so frustrating! Angry I've tried a few hacks and also conditional statements, but I'm new to these and not entirely sure how they work..

Any other suggestions? Like I say, I will try your float advice when im sat in front of IE

thanks again, Joe

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 3 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

You can try and use this >

You can try and use this > http://ipinfo.info/netrenderer/ to render in IE remotely, there are probably better sites than this (I am also on a mac).