CSS - Div Tags And Relative Positioning -- Extra Space Problem

im creating ajax auto complete text box

but my div tag does not appear correctly in IE7
(ok on firefox) appearing behind the textbox

IE7 screen shot URL

Firefox screen shot URL


codes are

HTML

Code:

            <tr>
                <td align="left">PHONE BRAND</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlBrand" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="left">PHONE MODEL</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>

CSS

Code:

.au_cm_loc
{
	text-align:left;
	position:relative;
}

.au_cm_pnl
{
	position:absolute;
	top:25px;
	left:0px;
	border:1px solid #39AAE4;
	width:204px;
	max-height:50px;
	overflow-x: hidden; 
	overflow-y: auto; 
	visibility:hidden;
	background-color:#FEFEFE;
	z-index:500;
}

.au_cm_pnl a
{
	display:block;
	padding:5px 0px;
	width:95%;
	margin:-7px 0px;
	color:Blue;
	text-decoration:none;
	padding-left:5%;
	background-image:url(../Images/textbox_bg.jpg);
}

.au_cm_pnl a:hover
{
	background-image:url(../Images/button_bg.jpg);
	color:#FFFFFF;
}

please help me to fix this problem

thank you

chathura

I want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column.

To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'.

Code:

<th>
   <nobr>Header Content</nobr>
   <div id="error_message">Error Message</div>
</th>

When I want to display an error message above the table I use the following styles on the div tag

Code:

      background-color: #ffcccc;
      width: 100%;
      position: relative;
      left: 0px;
      top: -100px;
      z-index: 1;
      display: block;

It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height?

Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

How can I adjust my CSS so both versions work?

GOOD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

BAD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>

THANKS

Hello all, firstly, thank you for all you contribute to this question. I have a website (as everyone does) which has a problem (which i always do). I have an embeded flash file and 2 lines of text which are seperated into 2 different divs inside a table cell. I am using css to position these texts over the flash file, which is just fine. The only problem I am recieving is that while using the position: relative in css for these it leaves extra unneeded space under the flash file where the text would be if they were not being positioned. Here is the page wit hthe problem:

Look at the header

So I am stumped. I have posted away in other CSS forums and have received no replies at all, I have googled it many times and found the same problem, but the solution will only work for that individuals situation. So, what can be done.

Here is my html for the header cell:
Code:

<table id=main cellpadding=0 cellspacing=0>
<tr>
	<td class=head colspan=2 height=144px> 
	<param name="movie" value="test.swf"> 
	<param name="quality" value="high"> 
	<param name="wmode" value="transparent"> 
	<embed src='images/test.swf' width=762px height=144px wmode="transparent" style="z-index: 1;" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div class='headtitle'><? echo $title; ?></div><div class='headquote'><? echo $quote; ?></div></td>
</tr>

And here is the css that is used by that cell:
Code:

table#main {
height : 100%; 
background : #ffffff; 
width : 762px; 
border : 0 none inherit; 
border-left : 1px solid #000; 
border-right : 1px solid #000; 
border-top : 0 none inherit; 
border-bottom : 0 none inherit; 
margin : 0; 
padding : 0; 
} 
table#main td.head {
height : 0px; 
width : 762px; 
background : #006699; 
border : 0 none inherit; 
border-bottom : 2px solid #000; 
vertical-align : top; 
padding : 0; 
background-image: url(images/logo2.jpg);
} 
table#main td.head div.flash {
position: relative;
z-index:1;
}
table#main td.head div.headtitle {
z-index:2;
font-size : 24pt; 
color : #fff; 
position : relative; 
font-weight : bold; 
left : 5px; 
top : -45px; 
} 
table#main td.head div.headquote {
z-index:2;
font-size : 10pt; 
font-weight : bold; 
color : #fff; 
position : relative; 
text-align : right; 
right : 5px; 
top : -180px;
font-style: italic;
} 

Im sure its something Im looking over as I am a newb at css. Thanks for all help!

I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me.

If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well.

Here's a link to the file:
http://www.websimage.com/3238/index2.html

I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated.

EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to.

Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this.

So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>

<style type="text/css">
<!--
	body {
		text-align:center;
		background-color:#666666;
		margin:0 0 50px 0; /* top right bottom left */
		}
	p{
		padding:0;
		margin:0;
		text-align:justify;
		}
			
	#mainBox {
		float:right;
		margin:9px 12px 0 0;
		padding:0px;
		width:733px;
		text-align:left;
		background-color:#999999;
		}
	#pageHeader{
		background: url(images/layout/header.jpg) no-repeat top left;
		padding:0;
		margin:0;
		text-indent: -15000px;
		height: 290px;
		overflow: hidden;
		}
	#nav{
		position:absolute;
		right:100px;
		margin:0;
		background: url(images/layout/menu.jpg) no-repeat top left;
		padding:0;
		margin:0;
		width:136px;
		height: 302px;
		overflow: hidden;
		}
-->
</style>
</head>
<body>

<div id="mainBox">
	<div id="pageHeader">The Shalom Foundation</div>
	<div id="nav">Nav</div>
	<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
	<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
	portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
	laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
	requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
	invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
	aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
	domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
	per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
	<div id="rightNav">rightNav</div>
	<div id="pageFooter">pageFooter</div>
</div>

</body>
</html>

Thanks in advanced for any help!

http://www.zombiepolitics.com

Just when I thought I had this down .. I dont.

I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div.

problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this?

I have 2 columns. The main one and the sidebar. The problem is that the sidebar extends down the page further then the main column. I am using a color in the background. The color does not extend all the way down. The main area stops about half way down the sidebar and just leaves white space there. The whole page is colored except for this square of white in the middle. Also if I extend the main area content to be longer then the sidebar then the sidebar will have white underneath it instead.

I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there?

html page: http://www.iainhamp.com/reality/hyborianwar.html

css page:http://www.iainhamp.com/reality/reality_hyborian.css

Thanks for any help you can provide.

- iain

For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this:

Code:

#container{
  width: 732px;
  margin: 0px auto;
}

Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7.

Thanks,
teamhonda81

I've been trying to setup a basic template for a site. In firefox I got it looking pretty good, but in IE there seems to be about 3 pixels of extra space to the left of the header image.

The url is: http://igocity.aoeex.com/

If you look in firefox, you can see the black box where the login form is, and the banner image to the right of it are side-by-side with no space between them. This is what I want.

In IE, there is about 3 pixels of white space between the login box and the banner image. This causes the image to drop down below the login box instead of it being beside it normally. For now, I've expanded the width of the outer div so they are side by side, but with the space.

I can't figure out why this space is there, or how to get rid of it. Any suggestions?

The HTML for the header looks like so:
Code:

<div id="headerDiv">
	<div id="loginBox">
		<form method="post" action="/login.php">
			<input type="text" value="" class="txtUsername" name="txtUsername" /><br />
			<input type="password" value="" class="txtPassword" name="txtPassword" /><br />
			<a href="login_help.php" class="loginTroubleLink">>> login trouble?</a> <input type="submit" value="log in"  name="btnLogin" class="btnLogin"/>
		</form>
	</div><img src="images/road_trip_banner.jpg" width="540" height="80" id="headerBannerImage"/>
</div>

CSS can be seen at: http://igocity.aoeex.com/css/template_css.css

I have an extra PHPNuke (Ravennuke 2.02) module for the start page. Several pieces of information are displayed in various cells of a table. I have a problem were there is some extra space at the beginning of a table that I cannot get rid of. I saved the output and uploaded he

http://www.linux-tutorial.info/index_test3.html

after the site title and before the tag line "The place where you learn Linux", there is a large space. In this example, the title is in a separate table, followed by a new table for the information blocks. If I put them in the same table the space appears before the title block. The relevant block of code looks like this:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 <tr valign="top"> 
 <td class="welcome_title_box" valign="top" colspan="2"> 
 <div align="center" class="welcome_main_title"> 
 Welcome to the <br>Linux Knowledge Base and Tutorial</div> 
 </td></tr></table> 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr><td valign="top" width="50%"> 
 <span class="subtitle">"The place where you learn Linux"</span> 
 <br><br> 
 Looking for an in-depth and easy-to-understand introduction to Linux? 
 Then look no further! 
 <br> 
 We don\'t just show you how to execute a handful of commands and use a few utilities. The Linux Tutorial goes beyond the basics, providing you with the knowledge necessary to get the most out of your Linux system. 
 <br><br> 
 Jump right in by clicking 
 <a href="http://www.linux-tutorial.info/modules.php?name=MContent&pageid=224"> 
 here</A>. 
 </td>

If I removed the highlighted code, the space appears before the site title.

If I remove the whole DIV containing the title, I still have the space above the tag line. This says to me that it is not related to the division. It seems that this row or the table itself is pulling the formatting from somewhere else. That would be a logical consequence of the cascading aspect of CSS, but I do no see where it is gettign the space from. Admittedly I am not all that good with CSS/formatting, so it is possible (if not likely) that I overlooked something.

Note that in the index_test3.html, I close the table at the end of the first row (prior to the list of news and threads) then open a new table:

Code:

</table><table border="0" cellpadding="0" cellspacing="0" width="100%" >

If I change BGCOLOR for the first table and then change the line above to this:

Code:

</table>HERE<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="RED">

The space is after the word "HERE".

If I remove this code, the extra space is right after the row/div with the site title and before the row with the tag-line.

This all make me think that the extra space is being added before the next table, as opposed to at the end of the previous table.

There are a number of posts in the CSS forum that I tried like changing the margin (style="margin: 0px"), but none of the solutions solved the problem. I have tried all sorts of combinations of spacing and alignment, but I cannot get rid of this space.

I have tried loaded the page with multiple browsers (Konqueror, FIrefox, IE 6) with the same results, so I do not think it is a browser specific issue.

Any and all input is greatly appreciated.

For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this:

Code:

#container{
  width: 732px;
  margin: 0px auto;
}

Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7.

Thanks,
teamhonda81

I can't seem to pin down why I have extra space to the right of my containing DIV on my home page. All of the sub-pages (similar page layout) render fine, but the home page displays a bunch of space to the right. Any ideas? You can see what I mean at www . deepwaterchurch . com

Hi,

Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it.

Is there a way to stop this?

example herel


Code:

/*begin normal CSS
----------------------------------------------------*/
body {
	text-align: center;
	background: #362f25;
	color: #333;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	}
	
	
#wrap {
	margin: 0 auto;
	width: 960px;
	text-align: left;
	background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
	padding-bottom: 5px;
	}



	



/*classes
----------------------------------------------------*/


.full-size {
	
	margin-left:20px;
	margin-top:20px;
	width: 700px;
	font: 12px;
	position:relative;
	left:180px;
	top:-370px;
	}
	




/*header
----------------------------------------------------*/
#header {
	height: 50px;
	background: #362f25;
	color: #d2cccb;
	font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
	}







/* left nav menu
----------------------------------------------------*/

#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}