CSS - Sidebar Adding Strange Empty Scrollable Space.

I am building this layout using strict xhtml and css.
Now I run into a problem with the menu buttons. On Firefox they
look just like they should. Though, Internet Explorer 6 adds an
empty space between each button. See the example page and CSS.

Basically, Internet Explorer adds that space under images. You can
also see it under the header image. Any idea on how to fix it?

I tried to add overflow: hidden; - it seemed to fix the issue
with the header div, but did not make any effect in the list.
Actually, in THIS case, as in the example page, I could make it
without using images. Add text, borders and so on, which would
probably fix the problem, but there are cases when I just want
to use images.

Both, Strict XHTML and CSS of the page are 100% valid.

Thanks,
Timo

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%');
	
}

Hi

I have a page that looks something like this

Code:

<style>

#container {
	border: solid 1px #000000;
	width: 600px;
	padding: 10px;
}

#banner {
	height: 200px;
	width: 600px;
	background-color: #FF0000;
	font: bold 20px Arial, Helvetica, sans-serif;
}

#layer {
	position: relative;
	top: -198px;
	height: 196px;
	width: 150px;
	z-index: 1;
	left: 2px;
	background-color: #FFFFFF;
}

</style>


<div id="container">
	<div id="banner">Hello</div>
	<div id="layer">This is a layer</div>
	
	<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
			magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
			nisl ut aliquip ex ea commodo consequat. 
			</p>
</div>	

If you view that site, you will see that there is an empty space below the banner-div, which is reserved for the layer. I need to get rid of that empty space, in other words, I want the text to begin right after the banner-div. Any ideas how I can accomplish this?
Using relative positioning for the text is not possible, because of the structure of the rest of the page (which I haven't pasted here).

[edit]
Floating the layer will work partially, the text will begin right below the layer, but there is still an empty space on the left side of the text - that has to go too.
[/edit]

All help is appreciated. Thank you in advance
- Kimppa

Thanks for taking the time to read my question

I am starting to make a page, and for some reason I have a white space between two sections of my page.

I don't know why.

I don't have a domain for this page yet, so I've put it under my band domain.

The space is between the Menu and the info portions of the page.

Any ideas?

http://www.pierced.ca/kelly/

css:
Code:

@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}

#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}

#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}

#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}


#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;  
}

#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}


#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}

#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}

a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}

Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing).

My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ?

I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap).

Code:

/* *** This wrapper sizes the appearance of the entire site *** */
div#siteWrap {
 width: 95%;
 min-width: 770px; 
 margin-left: auto;
 margin-right: auto;
 background-color: #606A8C; 
}

siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong.

The white space only appears in firefox, in ie and opera the site renders perfectly.

Thanks.

Hi there,

Not entirely sure this is a CSS issue, but something tells me it is...

I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though.

You can view the issue he http://hsdc.groundedgroup.com/

Does anybody know how to remove this space?

Thanks in advance.

Check it out:
http://www.wdoucette.com/awards/

Look at the part that looks like this:

- link 1
- link 2

You can hover over the empy space after "link 1" and it clicks "link 1"! If I put a space before the "<br>" code after the link, the problem goes away. Know what causes it?

(BTW, this is a site I'm creating for my father. It is unfinished.)

First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/

http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg

This is what I want to do...

I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be

.orange
{
margin:0px;
padding:20px;
}

Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag.

My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is.

Please help, thanks.

For some reason, when the image with the title of the page is two lines, in this case "Tax Service and Consultation" it bumps the content down in the div to the right, but only in IE and only if it is on two lines.

I have an image illustrating what I mean but this awesome site won't let me post web addresses on it, WTF? I can send anyone a link to explain what I mean.

The css and html validates. I cannot figure out what I am missing with this.

Any help or suggestions will be greatly appreciated

Thanks,
Billy

I have a site I am constructing in CSS. It looks good in most browsers, except one -- IE 6 PC. There is a gap between images (on the right top) and I can't figure out why

http://www.arrivalband.com/test/

Here's the css code (the offending code seems to be in rightCOL). My guess this is something that is pretty usual with IE, but I don't know a good work around. Thanks for the help in advance.

I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page:

http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php

The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up.

Here's the basics of the code:

Code:

<div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
	MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
		"See how this and other programs work at" & _
		vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>

Here's the style sheet:

Code:

.code {
	text-align: center;
	margin: 15px;
}

.codeblock {
	text-align: left;
	background: #fff;
	border: 1px;
	border-style: inset;
	width: 99%;
	height: auto;
	overflow: auto;
}

Any help would be appreciated. Thanks.

I am trying to work out if its possible to have a div with overflow-x but have the height to whatever the height of the content is. Obviously the content won't have a fixed height for me to just set it.

At the moment ive just got:

<div style="display:block; overflow-x:auto;">
Lots of content here
</div>

Is this possible?

Thanks

My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div.

My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region.

Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great.

Example 1:
<html><body>
<div style="background:green;height:200px;width:400px;z-index:0;position:absolute;">
<div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div>
</div>
</body></html>

Example 2:
<html><body>
<div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;">
<div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div>
</div>
</body></html>

Hello all,

I'm designing an element on the page that will be masked (i.e., overflow:hidden). I want it to scroll vertically (if done with the scroll wheel or trackpad) but not display a scrollbar.

Any ideas? Any help at all would be greatly appreciated.

Thanks so much