CSS - Ie Adds Space Between Two Stacked Divs When Img Is In Top Div

I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it.

unfortunately I cannot give a link to this page.

I've believe I've slimmed this down to only the relevent code.

The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable.

note: There would actually be multiple instances of the innerImageTable each representing a tab.

Code:

<div id="content" class="ParentDivBrowse">
	<div id="subContent" class="ChildDiv">
		<div class="outerImageTable">
			<div class="innerImageTable">
				<img src="/XXXXYYYY/images/leftselected.bmp" />
				<button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)">
					Mainn
				</button>
				<img src="/XXXXYYYY/images/rightselected.bmp" />
			</div>			
		</div>
		<div style="float:left;">
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td colspan='2' valign="middle">
						<table class='XXXXDlgTable'>							
							<tr>
								<td colspan="2" height="60%"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<table class="XXXXActionTable">
				<tr>
					<td class="XXXXActionTable">
						<table class='XXXXActionWidthFix'>
							<tr align='center'>
								<td width='0'></td>
								<td align='center' class='ActionButtons'>
									<button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear'
										tabindex='-1' value='Clear' type='submit'>
										<img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'>
										Clear
									</button>
								</td>								
								<td width='0'></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

Thanks if anyone can help me.

CSS entrys
Code:

.OmniTabSelected{
	font-size: 12px;	
	font-family: avenir, arial;
	color: white;
	background-color: #826182;		
    border-top:1px solid;
    border-bottom:1px solid;
    border-top-color:black;
    border-bottom-color:#826182;
    border-left: 0px;
    border-right: 0px;
	height:19px;
	vertical-align: top;
	margin-right: -2px;
	margin-left: -2px;
	padding:0px;
	padding-right:8px;
	padding-left:8px;
	padding-right:expression('2px');
	padding-left:expression('2px');
	
}
.innerImageTable{
	position: relative;
	float: left;
	cellspacing:0px;
	cellpadding:0px;
	border: 0px;
	margin-top:-2px;
	margin-top:expression('-4px');
	white-space: nowrap;
	vertical-align:;
}
.outerImageTable{
	position: relative;
	float:left;
	cellspacing:0px;
	cellpadding:0px;
	border: 0px;
	margin-top:2px;
	margin-top:expression('4px');
}
.ParentDivBrowse {
	position: relative;	
	width: 100%;		          
	width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
	min-width:997px;
	max-width:100%;
	overflow:hidden;
}
.ChildDiv {
	position: relative;	
	width: 100%;
	width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
	
}

I'm having a hard time getting 2 DIVs to line up appropriately. The DIV in question (#main) should just sit directly below the header (#header) DIV. If I include a clearing element (hr class="clear") then I get a space between my DIVs. If I don't include the clearing element, then I get an overlap. The problem is that it only overlaps to the height of my navigation bar (#navigation). Any suggestions would be greatly appreciated.

Site is he www . deepwaterchurch . com / cms

Hi,

I am experiencing additional space between 2 divs (#welcomeandsearch and #welcometext) but only when previewed in IE 6. They should be flush together and are when previewed in IE 8.

My css all validates. Here is the css and html:

Code:

#welcomeandsearch {width:940px; float:left; margin: 0px}
#welcome {width:730px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px}
#welcometext {width:970px; float:left; padding: 0;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal; height:25px;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}


<div id="welcomeandsearch">
  <div id="welcome">
    Welcome
  </div>
  
  <div id="searchbox">
    <form id="form1" name="form1" method="post" action="">
      <label>Search:</label>
        <input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
        <input name="button" type="submit" class="button" value="Go" />
    </form>
   </div></div>
   <div id="welcometext">to the Visa Europe Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>

Any ideas? Thanks.

i have two divs on top of eachother with images in each. there is a space i can't get rid of in IE..looks perfect in firefox. i've tried cutting out the margins and padding to no avail. seems like ie regularly has spacing problem from google searches but none of their fixes have worked yet.

I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck.

I am sure it will be a 'duh' type of thing when I get a solution.

Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html

I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box.

Thanks in advance!

I've been trying to solve this problem about my website.

My site

What it is suppose to look like.

Image

Thanks in advance.

Ive exhausted trial and errors through reading tons of these forums and am having no luck at all! I only have IE6 to preview my extremely simple yet, bugging the H out of me, buggy page.



Html Code

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<!-- TemplateBeginEditable name="doctitle" -->
<title>EvilgoodDotCom</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../CSS/evilgood_style1.css" rel="stylesheet" type="text/css" />
</head>

<body
><div id="container"
><div id="header"
>&nbsp;</div
><div id="nav1"
>&nbsp;</div
><table id="subcontainer" width="680" height="470"
><tr
><td rowspan="3"
><div id="nav2">&nbsp;</div
></td
><td rowspan="2"
><div id="main_content">&nbsp;</div
></td
><td
><div id="misc_content">&nbsp;</div
></td
></tr
><tr
><td
><div id="contact">&nbsp;</div
></td
></tr
><tr
><td colspan="2"
><div id="footer">&nbsp;</div
></td
></tr
></table
></div><!--End Table "Container"--
--></body>
</html>



CSS Code

body {
white-space: nowrap;
text-align: center;
}

#container {
text-align: left;
width: 680px;
height: 600px;
border: 0;
padding :0;
margin: 0;
background-color: #333333;
}

#subcontainer {
width: 680px;
height: 470px;
border: 0;
padding :0;
margin: 0;
background-color: #bf7936;
}

#header {
width: 680px;
height: 100px;
border: 0;
padding :0;
margin: 0;
background-color: #666666;
}

#nav1 {
width: 680px;
height: 30px;
border: 0;
padding :0;
margin: 0;
background-color: #999999;
}

#nav2 {
width: 100px;
height: 470px;
border: 0;
padding :0;
margin: 0;
background-color: #ffffff;
}

#main_content {
width: 360px;
height: 430px;
border: 0;
padding :0;
margin: 0;
background-color: #cccccc;
}

#misc_content {
width: 220px;
height: 290px;
border: 0;
padding :0;
margin: 0;
background-color: #ff3333;
}

#contact {
width: 220px;
height: 140px;
border: 0;
padding :0;
margin: 0;
background-color: #cc3333;
}

#footer {
width: 590px;
height: 40px;
border: 0;
padding :0;
margin: 0;
background-color: #ff9999;
}




Am I missing something obvious and/or can anyone give me a sure-thing answer??!!
-any questions you have about my procedure and stuff is absolutely welcome!

P.S. how can i get a screenshot i have of the IE6 preview to someone with a potential answer???

edit: posted this question at the end of the working day, was quit tired. basically i was having trouble vertically spacing images in a menu whilst simultaneously aligning text labels to the middle of those images...

Is there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ...

I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS!

Code:

   <html>
<head>
<title></title>
<style type="text/css">
.hidden {position: absolute; visibility: hidden}
#netcalltext
{
z-index: 1;
position: absolute;
top: 2px;
left: 2px;
}

#d1
{
z-index: 2;
position: absolute;
top: 2px;
left: 2px;
}
</style>
<script language="JavaScript">
<!--
function showIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "visible";}
else
{if (document.layers)
{
document.layers[obj].visibility = "show";}
else
{document.all("d1").style.visibility = "visible";}
}
}
function hideIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "hidden";}
else
{if (document.layers)
{
document.layers[obj].visibility = "hide";}
else
{document.all("d1").style.visibility = "hidden";}
}
}
//-->
</script>
</head>
<body>
<div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
<div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
</body>
</html>   

Hi there

Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div?

I set the width of div, via margin
Code:

div#footer {
  margin: 0px 9%;
  height: 40px;
}

When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height.

This does not happen in other (gecko) browsers!

Anyone know a solution, (tantek won't be precise enough with %)
??

Hi
I am a blogger user and write an English blog. I want to add a section in my blog's sidebar for adsense. It is a three column template, what I want it to add a single column at the top of 2 columns of sidebar. http://linguisticslearner.blogspot.com/ And below is the template code.
Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<meta content='JAoqkG38S809dZLsa5uoS08FSskzqxBwsprrllDajqY' name='google-site-verification'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Grid Focus
Designer: Derek Punsalan
URL:      www.5thirtyone.com
Updated by: Amanda Fazani (www.BloggerBuster.com)
Date:     14 August 2008
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#333" value="#333333">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#555" value="#555555">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#555" value="#555555">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#333" value="#333333">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#333" value="#333333">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="bordercolor" description="Border Color"
type="color" default="#eee" value="#eeeeee">
   <Variable name="metacolor" description="Meta DataColor"
type="color" default="#7f7f7f" value="#7f7f7f">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 95% Arial, sans-serif" value="normal normal 95% Arial, sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

html, body {
  background:$bgcolor;
  color:$textcolor;
  text-align:center; 
  margin: 0;
  padding: 0;
  font:12px arial,helvetica,verdana,sans-serif;
  } 
body #navbar-iframe {
  display: none;
  visibility: hidden;
  height: 0px;
}
/* Headings
----------------------------------------------- */
h1{font-size:22px; color: $pagetitlecolor;}
h1 a{color: $pagetitlecolor;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:$linkcolor;text-decoration:none;}
a:hover{color:#666;}

a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */
/* masthead / footer - navigation and categories */
#masthead{padding:5px 0;}
#masthead h1 a{text-transform:uppercase;width:400px;float:left;margin:12px 0 0 0;color:$pagetitlecolor;}
#masthead h1 a em{font-style:normal;color:$pagetitlecolor;}
#authorBlurb {width: 400px; float: right; color: $descriptioncolor;}
#authorBlurb img{float:right;width:42px;height:42px;border:3px solid $bordercolor;}
#authorIntro a{font-weight:bold;} 
#authorIntro{line-height:1.4em;width:400px;float:right;margin:8px 0 0 0;}

#header-wrapper {
  margin:0 auto 10px;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  color:$pagetitlecolor;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
ul.nav{list-style:none;background:$bordercolor;padding: 0; margin-left: 0;}
.nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:$titlecolor;text-decoration:none;display:block;padding:5px 0 12px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:$metacolor;text-transform:lowercase;}
.nav li a:hover{background:$titlecolor;color:$bordercolor!important;width:95px;}
* html .nav li a:hover{background:$titlecolor;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;display:block width:100px;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover { background: transparent;color: $titlecolor !important;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;} 
* html .fix{height:1%;}
.fix{display:block;}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  border-top:3px solid $bordercolor;
  margin:20px auto;
  width:965px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  margin:26px 0 0 0;
  width:410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  color:$sidebartextcolor;
  float:left;
  margin:25px 0 0 33px;
  width:250px;
  line-height:1.3em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
.sidebar h2 {color: $sidebarcolor;}

.sidebar ul{list-style:none;margin:8px 0 4px; padding-left: 0px;}
.sidebar ul li{
  background:url('http://4.bp.blogspot.com/_0CLPmP1ydOo/Sa7zbixhCTI/AAAAAAAABNQ/GPsIktrM5tw/s1600/li.gif') no-repeat 0 3px;
  color:$sidebartextcolor;
  line-height:1.2em;
  border-top:1px solid #BBB;
  padding-left:16px; 
  padding-right:0; 
  padding-top:4px; 
  padding-bottom:4px;
}


#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}
#tertCol {color:$sidebartextcolor;}
#tertCol{float:left;width:214px;margin:10px 0 0 33px;}
#tertCol p{color:$sidebartextcolor;}

/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
.postMeta{background:url('http://bloggerbuster.com/templates/grid-focus/images/dot.gif') repeat-x left center;text-transform:uppercase;font-size:11px;text-align:right;margin-bottom:5px}
.postMeta span.date{background:$bgcolor;color:$metacolor;padding:0 2px 0 4px;}
.postMeta span.comments{background:$bgcolor url('http://1.bp.blogspot.com/_0CLPmP1ydOo/Sa7yyg4qFKI/AAAAAAAABNI/2P6HSCDx4-g/s1600/chat_grey.gif') no-repeat left center;padding-left:15px;margin-left:2px}
.postMeta span.comments a,
.postMeta span.date a{color:$metacolor;}
.post{margin:0 0 15px 0;}
.post h2{line-height:1.2em;margin-bottom:7px;font-size: 18px;color:$titlecolor;}
.post h2 a{width:100%;display:block;outline:none;color: $titlecolor;}

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-body blockquote {
  border: 3px solid $bordercolor;
  padding: 5px;
  line-height:1.3em;  
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  font: $postfooterfont;
}

.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.comment-general {background:$bgcolor ') top left;
  border:1px solid #BBB;
  margin-bottom:7px;
  padding:0 7px 7px;
}

.comment-blog-author {background:$bgcolor url('http://3.bp.blogspot.com/_0CLPmP1ydOo/Sa7zz4pTw_I/AAAAAAAABNY/7lF8YVNW-Go/s1600/lgrey_diag.gif') top left;
  border:1px solid #BBB;
  margin-bottom:7px;
  padding:0 7px 7px;
}

.deleted-comment {
  font-style:italic;
  color:gray;
  }

#blog-pager { clear: both; margin: 10px 0;}

#blog-pager-newer-link {
  float: left;
 }
 
#blog-pager-older-link {
  float: right;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.3em;
 }

.sidebar .widget, .main .widget { 
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

.main .Blog { 
  border-bottom-width: 0;
}


/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer-wrapper {
  margin: 10px 0;
}
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
.left {float: left;}
.right {float: right;}
.ctime {float: right;}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important} 

]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script> 
  </head>

  <body>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div class='masthead fix'>
      <b:section class='masthead' id='masthead' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Thoughts in Remote Language (Header)' type='Header'/>
</b:section>
    </div>

<div class='nav'>
	<ul class='nav fix'>

		<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
		<li><a href='http://awaz-e-dost.blogspot.com/' title='آوازِ دوست'>Link<br/><span>My Urdu Blog</span></a></li>

		<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
		<li class='skip'><a href='#main' title='Skip to content'>Main<br/><span>Skip to content</span></a></li>
	</ul>
</div>
 
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
	<div id='searchWrap'>
<form action='/search' id='searchForm' method='get'>
	<input id='s' name='q' type='text' value=''/><input alt='Submit' id='searchsubmit' src='http://bloggerbuster.com/wordpress/wp-content/themes/grid_focus_public2/images/btn_search.gif' type='image'/>
</form>
</div>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Gadget1' locked='false' title='Share It' type='Gadget'/>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Follow Me' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
      </div>
      <div id='tertCol'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Gadget2' locked='false' title='' type='Gadget'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='LinkList1' locked='false' title='Favorite Links' type='LinkList'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
      </div>
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>*</div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper' style='margin-top: 10px;'>
    <div class='nav' style='clear: both;'>
	<ul class='nav fix'>
		<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>

		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
		<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
		<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
	</ul>
	<p><a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. <a href='http://5thirtyone.com/grid-focus' title='Grid Focus by: Derek Punsalan'>Grid Focus</a> by Derek Punsalan <a href='http://5thirtyone.com'>5thirtyone.com</a>. Converted by <a href='http://www.bloggerbuster.com/'>Blogger Buster</a></p>
</div>

      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-15934010-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
                

I know very little about CSS, my wild guess is that I should change 'wrapper' classes in CSS but how? I do not know this. Can you please help me in this regard?
Many Thanks

dear all,

some simple divs of mine seem to be rendering differently in IE6 and IE7. for example, the following style works fine in IE6...

Code:

#calHourNow {
	background-color: #FFFF66;
	margin:0px;
	padding:0px;
	width:50px; 
	height: 120px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	color:#000000;
	font-weight:bold;
	font-size:14px;
	text-align:right;	
	font-family:"Times New Roman", Times, serif;	
	}

... I am left with a 12o x 50 px box (which is repeasted down the page) but in IE7 it seems the 1px border is added to the width and height, leaving me with a div that is actually 121 x 51 px.

It is completely vital for my project (an outlook style calendar) that the dimensions of these divs are exactly the same on both browsers, is there a way round this?

Many thanks, Mark

I'm trying to create an image-navigation system using the popular css sprites technique. However, on the very first image (doesn't occur with any images following), IE6 (and below) increases the height of that image.

Here's a very simple code. There are no other codes or elements to interfere with this issue, and yet, it is still present.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Title Goes Here</title>



<style type="text/css">

.nav_top{background:url('http://i185.photobucket.com/albums/x14/mMaNgOeZz/nav-1.gif'); float:left; }
#img1{background-position: 0px 0px; width: 1200px; height: 14px; }
#img2{background-position: 0 -14px; width: 101px; height: 34px;}

</style>

</head>

<body>

<a class="nav_top" id="img1"></a>
<a class="nav_top" id="img2"></a>

</body>


</html>

Any help would be appreciated to no end. Thanks in advance.

i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to.

Code:

border: 1px solid #69A2CC;
background: transparent url(gradient.jpg) no-repeat scroll 0 center;

I should preface this by stating that I'm hopelessly bad at CSS!

I have a bit of ajax-enabled html like this:

Code:

<div class="demo">
  <div class="demo-description">
    <p>Vault</p>
  </div>
  <ul id="sortable1" class="connectedSortable">
    <li id="entry_1"  class="ui-state-default ui-state-disabled"><img src = "img/1.jpg"></li>
  </ul>
  <div class="demo-description">
    <p>Gallery One</p>
  </div>
  <ul id="sortable2" class="connectedSortable">
    <li id="entry_4"  class="ui-state-default"><img src = "img/4.jpg"></li>
    <li id="entry_2"  class="ui-state-default"><img src = "img/2.jpg"></li>
  </ul>
  <div class="demo-description">
    <p>Gallery Two</p>
  </div>
  <ul id="sortable3" class="connectedSortable">
    <li id="entry_3"  class="ui-state-default"><img src = "img/3.jpg"></li>
    <li id="entry_5"  class="ui-state-default"><img src = "img/5.jpg"></li>
  </ul>
</div><!-- End demo -->

I want to format it such that while images [<li></li>] within galleries [<ul></ul>] appear side by side, the actual galleries appear one below the other.

Just can't seem to figure it out.

Edit: Nevermind. As soon as I posted, I discovered what I needed was "overflow: auto;"

Isn't it always the way.