CSS - Jumping Content In Ie7 / Ie8 Compatability Mode

Hello everyone, I'm tearing my hair out on this one.
Here is the problem

If you view this in IE 6, sometimes the footer will jump up towards the top. If you activate any :hover things, it will jump back down to where it's supposed to be and stay there.

EDIT: Actually, it's just the first element in the footer div. If I seperate the lines into paragraphs, only the top paragraph will jump. Isn't that even stranger?

Each profile is wrapped in a div, clear: both no floats.

The profile pictures are floated left, inside the div.

It only happens on this page, and not any of the others. I can't figure out why. Has anyone seen this before? I've tried all the holly hacks and clear fixes I could try.

css Code:
Original - css Code div.profile { clear: both; height: 1%; margin: 15px 0px; padding: 0px; } img.profile { float: left; margin: 5px 20px 5px 20px; border: 1px solid #333; vertical-align: top; }

  

  


 div.profile {


     clear: both;


     height: 1%;


     margin: 15px 0px;


     padding: 0px;


 }


  


 img.profile {


     float: left;


     margin: 5px 20px 5px 20px;


     border: 1px solid #333;


     vertical-align: top;


 } 

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,

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

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?

Hello, I have made playersnutrition.com

As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top????

I do a lot of we development work for an intranet site. All users are on IE. Occasionally, I'll develop a page that looks fine in my browser (IE 8.0.6001) but not in others (8.0.7600). I have to set mine to compatibility mode to see what others see.

I thought the compatibility mode was meant to display a web page the way it would in an older browser.

Is it possible that I have something installed on my machine that makes my browser render pages differently? I know this is vague, but I am just wondering if anyone has ideas on where to look.

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

Hello guys, i've been trying for the past 2 days to google for textarea sizing under strict mode.
i have found no solution and at the moment my problem is this...
here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.style1 {
	text-align: center;
	width: 800px;
}
</style>
</head>
<body>
<div class="style1" style="padding: 0px; margin: 10px auto 10px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000; width: 800px;">Little Bunny</div>
<div class="style1" style="margin: 0px auto 0px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000;">
	<div style="width: 400px; float: left; background-color:#EBEDF3; height: 100px; text-align: center; line-height: 100px;">Text</div>
	<div style="width: 400px; overflow:visible; float: left; background-color:#F2F9E8" id="OuterDiv">
		<form method="post">
			<textarea cols="0" id="T1" name="TextArea1" rows="3" style="float:left; width:100%; height:100px; margin: 5px; padding:0">efefefefefef</textarea>
		</form>
	</div>
</div>
</body>
</html>

The Textarea expend over the surrounding Div and it shows differntly under FireFox 3.5.7 and IE 8 (tested for both)

I'm trying to do the following:
make the textarea width 100% and height 100px for example. + padding 5px outside the textarea (space 5px from left, right, top, bottom)..
most importent thing is to see it equaly under both ff and ie..

hope you can correct my code since i'm clueless....
have a nice day

Hi folks,
I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser.

Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution.

I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry.

Cheers,
Pete

Hey, does anyone know if there's a mozilla equivilent to writing-mode?

um .. that's all

Thanks

I have a combo box written via JS that only seems to work in quirks mode in firefox. In IE it works in both quirks and SC mode.

here is my js code (i know this is the CSS forum but javascript is changing the css)

Code:

var fInitCombo=true;	
	// resdraw the combo box locations based on the windo resizing -- if need be
	window.onresize=resizeCombos;
	
	function resizeCombos(complete) {
		// i take the select and place it in the right position.  I also size the text box to be the same size as the combos
		var oText, oSelect, obj, x, y;
		
		for(var i in arrCombo) {	
			x=0;
			y=0;
			oText=arrCombo[i].textField;
			oSelect=arrCombo[i].selectField;
			obj=oText;

			while(obj.tagName!="BODY") {
				x+=obj.offsetLeft;
				y+=obj.offsetTop;
				obj=obj.offsetParent;
			}	
	
			if(fInitCombo) {
				oText.style.width=oText.offsetWidth-16;
				//oSelect.selectedIndex=-1;
				fInitCombo=false;
			}
			if(complete) {
				//oSelect.selectedIndex=-1;
				oText.style.marginRight=16;
			}	
			
			oSelect.style.left=x;
			oSelect.style.top=y;
			oSelect.style.width=oText.offsetWidth+16;
			oSelect.style.clip="rect(0,"+(oText.offsetWidth+18)+","+(oText.offsetHeight)+","+(oText.offsetWidth-2)+")";
			oSelect.style.display="block";
		}
	}

	function updateCombo(instance,use,oHiddenField) {
		var oText=arrCombo[instance].textField;
		var oSelect=arrCombo[instance].selectField;
		if(use == "t")
		{
			oText.value = oSelect.options[oSelect.selectedIndex].text
		}
		else if(use == "v")
		{
			oText.value = oSelect.options[oSelect.selectedIndex].value
		}
		
		if(arguments.length > 2)
		{
			oHiddenField.value = oSelect.options[oSelect.selectedIndex].value
		}
		updateComboSelection(arrCombo[instance].selectField,arrCombo[instance].textField);
	}
	function comboLoad() {
			resizeCombos(true);

	}
	
	function updateComboSelection(oSelect,oText) 
	{
		oSelect.selectedIndex=-1;
		for(var i=0;i<oSelect.options.length;i++) 
		{
			
			//if(oSelect.options[i].text==oText.value) 
			if(oSelect.options[i].text.indexOf(oText.value) == 0)
			{
				oSelect.selectedIndex=i;
				break;
			}	
		}
	}

subset of my html
Code:

<form action="##" name="data">
<fieldset style="width:600px">
	<LEGEND>Appointment time</LEGEND>
	
	<table>
		<tr>
			<td>
				Start: <input type="text" name="start_time" id="start_time" onchange="changeHandler(this);" /><select name="start_time_select" id="start_time_select" onchange="changeHandler(this);" style="position:absolute;display:none;"><option>asdfasd</option></select>
			</td>
		</tr>
	</table>
</fieldset>
</form>

arrCombo is just an array of objects pointing to the text and select fields.

Any idea why this only works in quirks mode rather than SC mode

it's the Resize combo method is the one thats running to do the combos

It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website)
img59.imageshack.us/i/52153657.jpg/

It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode.

By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column)

I have also included the general layout and css below.

I have tried changing doc types and a few small things but nothing has even effected the appearance.

The website is in a layout like this:

html4strict Code:
Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div>

  

 <div id="wrapper1">


     <div id="wrapper2">


         <div id="maincol">


         


             <div id="leftcol">


             </div>


             


             <div id="rightcol">


             </div>


             


             <div id="centercol">


             </div>


             


         </div>


         


         <div id="footer">


         </div>


         


     </div>


 </div> 

css Code:
Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }

  

 #centercol {


     position:relative;


     padding:0 200px;


     min-width: 520px;


 }


 #leftcol { 


     position:relative;


     top:-10px;


     left:-10px;


     float:left;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:100;


     }


 #rightcol {


     position:relative;


     top:-10px;


     right:-10px;


     float:right;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:99;


 }


 #maincol {


     position:relative;


     margin:0;


     padding:10px;


 }


  


 #wrapper1 {


     position:relative;


     text-align:left;


     width:100%;


     min-width: 950px;


     background:#23415C url("images/side.gif") repeat-y top right;


 }


     


 #wrapper2 {


     position:relative;


     text-align:left;


     width:100%;


     background:url("images/side.gif") repeat-y top left;


 } 

Any ideas on how to resolve this problem would be great.

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...