CSS - What The..? Div Margin-top Pushing Html Body Down.

For some reason, my table (using this for a calendar) is being pushed down in my <div>. Please look this over and see if you can figure out why this is doing this. (and pay no mind to the width, I'm still working on that part)

TIA
Javashackgirl

http://www.fit4lifehealthclub.com/index2.html

I'm having a problem inserting two DIV columns (left and right) inside another DIV to get a result like the following image:

http://www.geocities.com/simonc1204/image.htm


What happens is that the DIVs extend outside of their containing block and into the footer below, rather than pushing it down, like so:

http://www.geocities.com/simonc1204/bad.htm


But, when I replace the two DIVs with some placeholder text, that works OK, with the footer being pushed down, as in:

http://www.geocities.com/simonc1204/good.htm


I would have thought that wrapping the two DIVs (which are absolute positioned) in a container DIV would make other block elements flow before and after them, but apparently not, and I need to understand CSS a bit more.

I've reduced the problem to almost its simplest form, and by looking at the small amount of source, I'm wondering if anybody can tell me where I might be going wrong?

Thanks in advance for any replies.

Miner2049er.

Hi Folks,
Does anyone know why a floated DIV would push another DIV out of the way? Or even why two floated divs would not want to sit either side-by-side or one infront of the other?

Sorry this is actually the jist of a prob I had earlier, but I'm simplifying the question - hope that's okay.

Thanks
John

Hey guys, I'm now truly understanding why all my tech friends constantly talk about how much they hate IE. Anyways, im working on a site and am trying to add a corner element to one of my divs.

It works perfect in firefox... but in IE it pushes the table below it and adds like a 2px wide sliver to the right of the img.

Here is the table layout

Code:

<div class='wrapp'>
 <img src='Images/tr.gif' /> 
 <table style='width:100%;'>
  <tbody>
    <tr class='time'>
       <td colspan='6' style='text-align:left;'>" . date('F d      Y',$key[5]) . ", " . date('g A T',$key[5]) . "</td>
    </tr>
   </tbody>
</table>
[/div]

Then here is the related CSS codes to make the image float to the right.

Code:

.wrapp {
	margin-bottom:8px;
        width:354px;
        text-align:center;
}

.wrapp img {
	float:right;
        display:inline;
}

table {
        margin-left:auto;
        margin-right:auto;
}

So once again what im trying to do is have the corner img show on the top right corner of the wrapp div.

It works perfect in firefox but again it does not work in IE... and I have read about 20 articles on google that talk about these problems but I just can't figure the right combination out to make it work.

Thanks in advance for any help!

Hi everyone,

It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on...

http://www.karenwilliamson.com/joom2/

I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean.

Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF.

It seems to my novice eyes that it should be controlled by
Code:

table.contentpaneopen

Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers?

Thanks for any input

Rob

Hello, I am a javascript noob trying to do a javascript dropdown and this does not seem to be working at all. When ever I add in the list for the drop down, everything gets pushed to the left and where ever the list begins, every link after that just disappears. I'm pretty sure the link is being put inline instead of block like I wanted it to but i'm not sure how to correct it and I am getting completely frustrated doing it. I was wondering if anyone could tell me what I was doing wrong. Also, I used the suckerfish method for the drop down.

HTML Code:
Code:

<div id="nav">
        <ul>
          <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
          <li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></li>
          <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
          <li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li>
          <ul id="break"><li id="first">
            <li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li>
            
            <li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li>
            <ul>
              <li><a href="#">Search Engine Marketing</a></li>
              <li><a href="#">Pay Per Click Management</a></li>
              <li><a href="#">Lovcal Search Marketing</a></li>
              <li><a href="#">Contextual Marketing</a></li>
              <li><a href="#">Shopping Comparison</a></li>
              <li><a href="#">Paid Inclusion</a></li>
              <li><a href="#">Search Engine Optimizaiton</a></li>
            </ul>
            </li>
          </ul>
        </ul>
      </div>
[\code]

JavaScript Code:
[code]
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("break");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

Here is the part of the css I created but i'm not sure how it's all supposed to go together since I'm a javascript noob.
CSS:
Code:

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	float:right;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #7d6340;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

#break a {
	font-weight: bold;
	color: green;
}

#break a {
	text-decoration: none;
}

#break li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#break li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #7d6340;
	border-width: 0 5px;
}

#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
	background-image:url(images/agency2.gif);
	border:0px;
	width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
	background-image: url(images/agencyup2.gif);
	border: 0px;
	width: 54px;
	
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
	background-image: url(images/services2.gif);
	border:0px;
	width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
	background-image: url(images/expandedservice2.gif);
	border: 0px;
	width: 56px;
}

#nav ul li a#nav_technology,
#nav ul li a:visited#nav_technology{
	background-image: url(images/technology2.gif);
	border:0px;
	width: 76px;
}
#nav ul li a:hover#nav_technology,
#nav ul li a#nav_technology.active,
#nav ul li a:visited#nav_technology.active {
	background-image: url(images/technology2up.gif);
	border: 0px;
	width: 76px;
}
#nav ul li a#nav_distribution,
#nav ul li a:visited#nav_distribution {
	background-image:url(images/distribution2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_distribution,
#nav ul li a#nav_distribution.active,
#nav ul li a:visited#nav_distribution.active {
	background-image: url(images/distributionup2.gif);
	border: 0px;
	width: 72px;
}

#nav ul li a#nav_casestudies,
#nav ul li a:visited#nav_casestudies {
	background-image: url(images/casestudies2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_casestudies,
#nav ul li a#nav_casestudies.active,
#nav ul li a:visited#nav_casestudies.active {
	background-image: url(images/casestudiesup2.gif);
	border: 0px;
	width: 72px;
}
#nav ul li a#nav_blog,
#nav ul li a:visited#nav_blog {
	background-image: url(images/blog2.gif);
	border:0px solid black;
	width: 27px;
}
#nav ul li a:hover#nav_blog,
#nav ul li a#nav_blog.active,
#nav ul li a:visited#nav_blog.active {
	background-image: url(images/blogup2.gif);
	border: 0px;
	width: 27px;
}

hi.

I need some formatting help.

I am using niftycorners and the linked list tabs
I am building seem to rest at the bottom, pushing
the bottom of the rounded corners to the right of them.
I have tried clear:left, clear:right, clear:both at the div
and ul levels but that doesnt work.

any ideas?

I have attached a picture of the problem.

Here is the CSS/HTML:

Code:

<style>

body {

margin:20px;

}

#toptabs {
clear:left;
}

#toptabs ul {
    clear:left;
    position:relative;
	width:100%;
	margin-bottom:0;
	list-style:none;
	line-height:1em;
	padding:100px 0px 0px 0px;
}	

#toptabs ul li {
	float:left;
	margin-right:5px;
	padding:0;
}
#toptabs ul li.clear {
	clear:right;
}

#toptabs a {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
	background:#bbb;
}

#toptabs A.he link,
#toptabs A.he visited {
	position:relative;
	z-index:102;
}
</style>
</HEAD>

<BODY>

  <div id="header">
	  <div id="toptabs">
	    <ul id="venture">
          <li id="current"><a href="#"><span>Profile</span></a></li>
          <li><a href="#"><span>Q&A</span></a></li>
          <li><a href="#"><span>Recommendations</span></a></li>
          <li><a href="#"><span>Connections</span></a></li>
        </ul>
      </div>
    </div>	
</BODY>

Hello,


I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length.

Instead the text just covers and hides the footer.


I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique.



If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed.


As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy.

-------

Here's a link to the page thats having issues with the footer...

*** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........

infoheaven.bravepages.com/Testamonials/Testimonials.htm



The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above.


I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message.



Sorry for the inconvenience....




Dan -

I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed.

Here's the deal:
On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be.

I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help.

I'm trying to do this without having to absolutely position everything.

Here's the site:
www-dot-myportlandtours-dot-com

here's the css:
www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css

Anybody have insight into this?

Background info:
- I have validated the page and CSS, no problems there
- Site is working properly in Firefox and IE, seems to be a margin issue in Safari
-This margin issue is not the common Safari bug with a negative margin being applied to a floated element
-I am using Safari in a windows environment, I do not have a Mac

The problem:
-in Safari the top margin on the content either is either not being applied at all or is being interpreted differently
-it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari?

The website:
http://www.lisa-noble.com/test/redo.html

The HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Site Test</title>
  <link rel="stylesheet" type="text/css" href="redo.css" />
   <!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>

<body>

<div id="top_filler">
</div>

  <div id="left_filler">
</div>

<div id="right_filler">
</div>

<div id="top_left">
</div>

<div id="header">
</div>

<div id="top_right">
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   

<p>Etc, etc, etc....</p>
</div>

<div id="bottom_filler">
</div>

<div id="bottom_left">
</div>

<div id="bottom_right">
</div>

</body>
</html>

The CSS
Code:

* {
   margin: 0;
   padding: 0;
}

body {
   background: #fdd9e9;
}

div#top_filler {
   background: url(images/bg_slice_sm.png) repeat-x;
   width: 100%;
   height: 164px;
   position: fixed;
   top: 0px;
   z-index: 5;
}

div#left_filler {
   background: url(images/left_slice_sm.png) repeat-y;
   width: 174px;
   height: 100%;
   position:fixed;
   left:0px;
   z-index: 5;
   
}

div#right_filler {
   background: url(images/right_slice_sm.png) repeat-y;
   width: 161px;
   height: 100%;
   position:fixed;
   right: 0px;
   z-index:5;
}

div#bottom_filler {
   background: url(images/bottom_slice_sm.png) repeat-x;
   width: 100%;
   height: 76px;
   position: fixed;
   bottom: 0px;
   z-index: 5;
}

div#header {
   position: fixed;
   top: 0px;
   left: 37%;
   height: 125px;
   width: 316px;
   margin: 0 auto;
   background: url(pink_logo2.png) no-repeat;
   z-index: 25;
}

ul.NoBulletNoIndent {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px
}

div#top_left {
   height: 314px;
   width: 221px;
   background: url(images/left_top_corner_sm.png) no-repeat;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 5;
}

div#bottom_left {
   height: 175px;
   width: 176px;
   background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   left: 0px;
   z-index: 5;
   
}

div#top_right{
   height:174px;
   width:174px;
   background: url(images/right_top_corner_sm.png) top no-repeat;
   position: fixed;
   top:0px;
   right: 0px;
   z-index:5
}

div#bottom_right{
   height: 602px;
   width:198px;
   background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 5
}

div#content {
   margin: 40px 164px 0px 180px;
   position: relative;
   z-index: 1;
}

Hi!

Should I do this?

p
{

margin-top: 2em;
margin-bottom: 2em;

}

or this:

p
{

margin-bottom: 2em;

}


Same question for headers (h1, h2, etc)


Thanks!

Heya guys,

Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done.

I've got this in style.css file:

Code:

/* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}

.topform {
	position: absolute;
	right: 5px;
	top: 65px;
	width: 300px;
	font-size: 10px;
	font-family: myriad, verdana, sans-serif;
	text-align: right; }
	
input, form {
	font-size: 11px;
	font-family: myriad, verdana, sans-serif;
	margin-bottom: 0px;
	margin: 0px; }
/* End of SEARCH Bar */

Which refers to this part of my index.php page:

Code:

  <!-- Top right SEARCH -->
  <div class="topform"> 
    <div class="lb_bl"> 
      <div class="lb_br"> 
        <div class="lb_tl"> 
          <div class="lb_tr">
            <form name="form" id="form" method="post" action=""><input name="search" type="text" />
            <input name="search" type="button" value="SEARCH" /></form>
          </div>
        </div>
      </div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <!-- End of top right SEARCH -->

But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com

Thanks in advance to anyone who can help - Gaz

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

Hi all

Take a look at this in Firefox and then in IE7:

http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html

The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't.

Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem.

I did a search and found this link:

http://www.positioniseverything.net/explorer/floatIndent.html

Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way?

Thanks a lot for help :-)
Josh

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim