...
PDA

Beginner needs some extra space help quickly.

cgpcreative
04-30-2009, 08:02 PM
I just finished designing and posting one page of a website for testing purposes. I have tested it on firefox and safari and it looks great, but in Internet explorer 7-8, I am getting extra white space after my photo in my sidebar and after the navigation table I set up in the header. How do I fix this issue. I developed the site in dreamweaver. Thanks in advance for any help!

the page is http://www.thegreensgolfclub.com/index2.html

The code is below:

<!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>Welcome to The Greens</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
background-image: url(images/webbkg.gif);
background-repeat: repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColFixRtHdr #container {
width: 780px;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #FBECD7;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
background-image: url(images/pagebkg.gif);
background-repeat: repeat-y;
}
.twoColFixRtHdr #header {
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 342px;
}
.twoColFixRtHdr #mainContent {
margin-right: 342px;
position: relative;
}
.twoColFixRtHdr #footer {
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 21px;
padding-right: 25px;
padding-left: 25px;
font-weight: lighter;
text-align: left;
margin-top: 0px;
color: #2A5C25;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body class="twoColFixRtHdr" onload="MM_preloadImages('images/ButtonArt/button-active_01.jpg','images/ButtonArt/button-active_02.jpg','images/ButtonArt/button-active_03.jpg','images/ButtonArt/button-active_04.jpg','images/ButtonArt/button-active_05.jpg')">

<div id="container">
<div id="header"><img src="images/header.jpg" alt="the-greens-header" width="780" height="79" />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','images/ButtonArt/button-active_01.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_01.jpg" alt="" name="Home" border="0" id="Home" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Explore','',1)" onmouseover="MM_nbGroup('over','Explore','images/ButtonArt/button-active_02.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_02.jpg" alt="" name="Explore" border="0" id="Explore" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Membership','',1)" onmouseover="MM_nbGroup('over','Membership','images/ButtonArt/button-active_03.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_03.jpg" alt="" name="Membership" border="0" id="Membership" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Outings','',1)" onmouseover="MM_nbGroup('over','Outings','images/ButtonArt/button-active_04.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_04.jpg" alt="" name="Outings" border="0" id="Outings" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Contact','',1)" onmouseover="MM_nbGroup('over','Contact','images/ButtonArt/button-active_05.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_05.jpg" alt="" name="Contact" border="0" id="Contact" onload="" /></a></td>
</tr>
</table>
</div>
<div id="sidebar1"><img src="images/about-us-art.jpg" alt="About-The-Golf-Club-Art" width="342" height="410" align="top" /></div>
<div id="mainContent"><img src="images/about-us-headline.gif" alt="about-us-head" width="438" height="125" />
<p>Are economic pressures, overcrowded courses and unworkable tee times making the game less enjoyable? Looking for a better golf country club experience? You’re not alone. Countless club members are thinking twice about renewing their costly memberships. For many, the value and the venue no longer add up. Then they come to The Greens at Half Hollow…and fall in love with the game again.<br />
<br />
Here at The Greens, it all comes together. Like an amazing course that’s exceptionally maintained and available whenever you are. There’s a massive clubhouse, gorgeously designed, with amenities and activities your family will love. Enjoy our sensational indoor and outdoor pools, tennis courts, patio dining and more. Surrounding it all are the lovely grounds. It’s a beautiful place to play.<br />
<br />
And yet, the most amazing aspect of The Greens at Half Hollow…the unbelievable value!</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p><img src="images/footer.gif" alt="golf-club-footer" width="780" height="25" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
_Aerospace_Eng_
04-30-2009, 08:27 PM
Please use the tags when posting code. It makes it easier to read. Its that little # button.
cgpcreative
04-30-2009, 08:30 PM
I am sorry. Will try and remember next time.
_Aerospace_Eng_
04-30-2009, 08:37 PM
Just edit your post.
cgpcreative
04-30-2009, 08:47 PM
Fixed. Thanks for the tip.
_Aerospace_Eng_
04-30-2009, 09:05 PM
You do have this in your HTML
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

which is pushing down your sidebar 30px remove this line
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
and see if that helps. That is the only space I can see btw.
cgpcreative
05-01-2009, 01:00 AM
That worked like a charm, I cannot thank you enough. My uncle will be happy. There is, however, a 3-4 pixel white space between the header art and the table that contains the navigation and I have no idea how to get rid of it. I checked on IE7 and 8 and the space is there.
abduraooft
05-01-2009, 11:08 AM
I don't see that specified gap in IE7 or 8. have you sorted it?
Anyway, there might be a chance for a mysterious gap under an img tag, see https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps
cgpcreative
05-01-2009, 02:12 PM
Funny, 3 people I called can see the gap in IE 7/8. Weird. Anyway, I worked around it by applying a repeating background image to the header div. It's not correct, but it seems to fill the space nicely, with no real discernible difference. I just wish I knew what I was doing wrong. The site is now up and looks nice in every browser I have checked (safari, firefox, opera, ie8).
cgpcreative
05-01-2009, 03:02 PM
Everything is looking great on ie 7/8 but on an older version of ie (not sure, but say 5-6), the left side headline art is now pushed down, when it should be flush to the top. Any ideas?

The site is up at http://www.thegreensgolfclub.com

Thanks in advance. This is very frustrating.
SB65
05-01-2009, 03:11 PM
Hi there

It doesn't look good in IE6 I'm afraid - see below - the mainContent div has dropped.

I suspect this is the IE6 3px bug, triggered by the width on "about-us-headline.gif". A possible solution is to float your mainContent div left by making your css:

.twoColFixRtHdr #mainContent {
margin:0 0 0 0;
float:left;
width:438px;
}

This really shouldn't be necessary, but that's the problem with IE6.
cgpcreative
05-01-2009, 03:51 PM
that fixed it nicely--at least on the older IE which I have on a pc at my house. Thank you.
SB65
05-01-2009, 03:54 PM
No probs.

The other issue re the gap at the top under your image - I can see this fleetingly in IE6/7 when the page loads. I've seen this happen with XHTML strict but not transitional as your pages - but you should be able to fix this by adding the following to your css:

img {display:block}

- as per link in abduraoft's post above.

Also, btw, you have an invalid character before "exceptionally maintained" in your text. The w3c validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thegreensgolfclub.com%2F&charset=(detect+automatically)&doctype=Inline&group=0) is useful to pick up this sort of thing.

And finally, your page title should say "Welcome" not "Welcom". Not being picky, just thought you'd want to know.
cgpcreative
05-01-2009, 04:09 PM
thanks so much. I may try converting the image into a block element on a test page, I really don't think its much of an issue anymore as I cannot really see it, unless I really try. As for the other two things, I am on it.

Can't thank you enough. I am learning so much.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum