CSS - Div Jumping In Ie, Very Esoteric

If you see on http://promogift.be/index.php?page=producten
the first 4 products are like it must be, but from 5 and more it makes a different jump, i don't get it why, IE show it good...

I searching for 2 days now and don't get it, anyone a solution?

Hi,

If I have

Code:

#parent {
  background-color: red;
  padding: 2px;
  margin: 2px;
}

#child1 {
  float: left;
}

#child2 {
  float: left;
}
</style>

<div id="parent">
  <div id="child1">
   Some text
  </div>
  <div id="child2">
   Some text 2
  </div>
</div>

Then the two child divs will appear underneath the parent one, whereas I want the background from the parent one to be the backdrop for the two child divs. if I remove float: left then they appear in it, but underneath each other. I want them side by side.

Is this possible with css?

Hi,

I have been battling with this issue for a while now and need the community's help here.
I am not the sole developer on this project and it's kind of difficult to work through other people's code - plus, I'm a developer, not a designer.

Anyow. Have a look at this page:

Article on Jakarta Globe Site

I implemented the drop down for the 'share article' feature. I'm using scriptaculous and costum-built JS to achive the effect. It's all good in IE - but you can see that in FF, the bread crumbs jump to the right when the drop down is activated. I have tried to implement a 'clearit' div like this:

CF Code:

Code:

<div class="article-body">
<div id="clearit"></div>

CSS:

Code:

#clearit {
display: block;
clear:both; }

With the effect, that in FF, the whole article jumps down a few pixels when the drop down is activated. (The bread crumbs don't jump to the right anymore.

I'm at loss now. Here's the CSS code for the relavant div's:

Code:

#article-heading {
 border-top:solid 4px black;
 background:url(../images/objects/module-head-bg.gif) repeat-x top; 	height:26px; }
.article-heading span {
 display:block;
 float:left;
 padding:5px 15px 5px 10px;
 height:16px; }
#slidedown_share {
	position:relative;
	width:123px;
	height:137px;
	background:#f4f2e6;
	border-left: solid #000 1px;
	border-right: solid #000 1px;
	border-bottom: solid #000 1px; 
	text-align:left;	
	left:510px;
}
.article-body {
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-bottom:solid 1px black;
	background-color:white;
	padding:10px;
	margin-bottom:8px;
	font-size:11px;
}

Does anybody have an idea why this is happening and how I can avoid it?

Thank you for your help

Adrian

I'm trying to use the CSS hover state that I found on CSS Ninja, but for some reason when I hover over the images, they keep bumping upward. I've gone line by line trying to figure out which one it is, and I think it's the position:absolute line under a.feature01 .overlay01 .caption01; however, I can't get it to stop doing it even if I change the position to relative, fixed, etc. I ran it through the CSS validator as well and got no errors.

Here is the CSS code

Code:

 a.feature01
{
	display: block;
	position: relative;
}


	a.feature01:hover .overlay01
	{
		position: absolute;
		width: 185px;
		height: 130px;
	}


		a.feature01 .overlay01 .caption01
		{
			position: absolute;
			height: 30px;
			line-height: 30px;
			width: 100%;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overflow: hidden;
		}
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			/* for browsers that know rgba */
			background: rgba(255, 255, 255, 0.75);
		}

We've got something odd happening on our site. Check out:

newser.com/story/82843/conan-obriens-twitter-woman-shows-class.html

If you leave your browser window alone for about 5 minutes, eventually the content on the page jumps down. If you scroll, or mouseover the window, it jumps back. Any ideas on the issue?

One thing to note -- we're watch for breaking news periodically -- when something big happens, we load a banner above the nav via AJAX. Seems like this may be a factor even though it's usually empty.

I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down

I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE ..


Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background ..

Here the html and css

<body>


<div id="logoheader">
<img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" />
<img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" />
</div>




</body>
</html>


------------------------
the css
------------------------

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #FFFFFF ;
}
#logoheader {
background: url(../images/stlaware_03.png) repeat;
height: 90px;
width: 100%;
}



How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width?

Thanks ..

Bill

Please go to this page -

http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51

On the top right click on Active Listings

Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place...