CSS - Ie7 Space Problem - Help!

Hi guys, I'm having a problem with spacing beneath my image. I have an image at the bottom of a div. When I change the display to block, the space below still remains. When I place the image as a background inside my div it doesn't display. Any help with either or both of these would be great. The page is located he

rhodyandcrystal.com/staging/party.html

The div on the right has an image as a bg and the div on the left has the image located at the bottom. I just did this so you could see both, and that they aren't working. Thanks again for any help!

Duke

Hello

My problem is maybe a easy to solve one, but I realy don't know how to get it right.

I have a list of links and want them equaly vertical spaced between all the line of links.

link1
(space)
link2
(space)
link3


What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers?
Please can someone help me?

Hi,

If you look at the following page you will see there is a gap under the sidebar elements at the top.

LINK HERE

In FF its not there yet in IE it is, any ideas how i can remove it?

Thanks, Mike

Hi All-

For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace?

Thanks,
infinity003

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it?

I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help

I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped

Deb

I've been trying to get all the space out of IE, tried line-height and all of that, and nothing.
Any hack to take out all of the space gaps so I can later on put some small margin?

Thanks in advance

In the following code...why is there a space between the two div's??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <style>
      #header { background-color: cadetblue; }
      #footer { background: blue; }
   </style>
</head>
<body>
   <div id="header">
      <p>This is my header.</p>
   </div>
   <div id="footer">
      <p>This is my footer.</p>
   </div>
</body>
</html>

If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there?

I mean shouldn't the paragraphs be fully enclosed inside the div's?

Such that no spacing should appear between the div's?

Any insight anyone might care to share with me would be most appreciated.

Thanks.

Carlos

Hey guys!


My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set:

.footer {
background:#6CBDF0;
clear: both;
height:45px;
padding-top:5px;
}

So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it?

Thank you very much!

PS. I've tried solving this for well over an hour now...

At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out.

Thanks for any help,

Chris

HTML CODE:
http://www.bottomtimedesign.com

CSS CODE:
Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #FFFFFF;
	text-align: center;
}

/*defines web page dimensions and centers page */
#pagedimensions {
	background-color: #DCDBC9;
	border: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	width: 1024px;
	height: 768px;
	text-align: left;
}

#mask {
	position: absolute;
	left: 575px;
	top: -45px;
}

#sign {
	margin-left: 50px;
	float: left;
	margin-right: 50px;
}
	
#snorkel {
	position: absolute;
	top: 390px;
	left: -39px;
}


#header {
	float: right;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-top: 10px;
}


#content {
	margin-left: 50px;
	margin-right: 155px;
	position: static;
	margin-top: 300px;
}

Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs?

Something like so:

Code:

<div id="one"></div> or

<div class="two></div>

<p></p>

<p class ="three"></p>

etc...

In other words, would there be a obvious space where one of these styling markers was placed on the page?

Hello,

I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement:

.conftabledetail {font-size:10px;}

I did that to make the content more compact and distinguishable from the headers.

I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs.

Apparently this selector does not work when used against a subclass, because I can't get this statement to work:

p + p.conftabledetail {margin-top:1em;}

I CAN get this statement to work:

p.conftabledetail {margin-top:1em;}

But that's not what I want to do.

Anyone have any ideas as to what I need to change or do differently?

It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag...

Thanks,

Chris

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?