Just a few pixels off in IE7

I’ve been messing around with this site. They added a new header and part of the design is to have a fold graphic. I got it looking good everywhere except IE7.

In ie7 the fold graphic in the header is just a few pixels off. I’ve tried a few different things but it doesn’t budge.

Any ideas?

Thanks,
Daniel

Yep. That did it thanks. On a side note while not CSS the deader appears twice on IN7 as well. Do you understand that? I’m trying to figure out if it is a wordpress bug or something.

Thanks,
Daniel

Hi Daniel we will need to see the site so we can see where the problem is :slight_smile:

Duhh… LOL

JuliAnn Stitick- Wardrobe Rx | feeling beautiful is empowering

Daniel

It’s probably because images are inline elements and sit on the baseline.

Try this:


#logo img{display:block}


Hi,

I’m just going offline so if you can explain exactly what you mean I’ll take a look tomorrow.

I see you have some major issue in Ie7 probably related to haslayout. If you roll over the facebook icons the page splits into two.

Try adding this:


.entry{zoom:1.0}

You also have a massive horizontal scrollbar but that will need closer inspection.

add the .entry{zoom:1.0} where?

I mean the Footer area of the website. In IE7 the links show TWICE. One time in the normal area and then again a bit down and to the right. I think that is where the scroll bar comes from. I’m not seeing the page spit in half as you mention. But I’m using IE Tester so maybe for some reason that is not showing for me. I’ll add the code from above but I’m not sure where as I’m not seeing the error.

Thanks for your help :slight_smile:

Daniel

Hi,

Just roll your mouse over the facebook and share icons and the page will break in IE7 very badly.

The whole page really needs ot be revised if you want to support IE7 as you have used multiple flawed concepts to build it.

For example in many many items you have made the inner content wider than the parent container. (e.g. #connect is 278px wide but the inner welcome element is 320px wide the same for #intro.). In older versions of IE when you increase the inner then the outer element also increases thus breaking the layout.

The solution for IE is not to add a width but to drag the element wider with negative margins instead and then apply haslayout with zoom and position:relative as without those the overflow portion becomes invisible.

IE likes everything to add up nicely or it won’t play nicely.

We can cure the footer problem which is actually caused by the welcome div overflowing and causing a chain reaction.

Add this to the css file:


#introduction{
	margin:0 -40px 0 0;
	position:relative;
	overflow:hidden;
	zoom:1.0;
}


However, we can’t cure the page jumping without a page re-write as the current set up is just too unstable for IE.

You really need just two floated columns and not multiple left and right columns as that causes snagging when they are uneven and the fact that you have added heights makes no difference to IE as it will stretch the content anyway. You should let the content dictate the height for elements that hold text.

There are also many containers without haslayout and when containers hold complicated content they need haslayout which can be applied using zoom:1.0. However applying it willy nilly will may have detrimental effects also so its really something that you shuld have built in form scratch as you were testing.

If you want to support ie7 and under then I would suggest that you make two floated columns only of the correct width. Then make sure that inner elements are not larger than those parents. For your folds you could place them absolutely into position as you have done for some of them and use negative margins for the h3 to drag it wide but don’t apply a width.

Sorry I couldn’t give you a full solution but all my “silver bullet fixes” failed due to the way everything was set up.

Thanks Paul,

The bad part is I inherited this site from another developer so I didn’t even build it really. All I did was add new widgets and I saw these other problems. Plus this is a WooFu theme that is suposed to be cross browser compliant. Thanks for the detailed explanation.

Daniel

Hey Paul,

I have more more question. I just want to make sure I understand. You’re saying that it is not just certain elements that may have been added to this theme that is flawed. But that the way this thing was coded out from the start is flawed. We added the video and the text to the right of it. Plus we added the header area. But what you said above is that the entire thing is flawed from the start.

Like I said I inherited this. So if it was not IE 7 compatible in the first place and I’m expected to “fix” it, then I want to make sure we charge appropriately. All I was asked to do was change the header and a few colors here and there.

I’m surprised to hear this because they got this from woo themes and they are normally pretty solid. But then again this is a FREE one.

Thanks,
Daniel

That’s a bit awkward as I would have needed to see it before you added content to see if it was working ok. It may be that its only since you added elements that it has gone awry. Indeed this is one of the problems with “haslayout” is that issues don’t always arise until the content gets more complicated and it can’t handle the situation.

That’s why I always ensure that any main containers always have haslayout and I never run in to these buggy issues that you are experiencing.

The main problem though is the widths as I mentioned before and elements must fit or all bets are off. You can move elements outside their parents but you have to do it with margins and drag them outside rather than just giving the inner element a bigger width on the inside (like the Tardis in Dr Who).

A good indicator of how well a site has been coded is to take a look at it in IE6. IE6 needs everything to be just right and a well coded site will often work in IE6 without problem (ignoring the obvious bugs and the newer properties of course).

If I get a chance tomorrow I’ll have another run through and see if I can tidy up some of the problems in IE7.

Hi,

It seems the trigger for the moving content in IE7 is this invalid structure here:


<div class="welcome">
<h3>Welcome </h3>
[B]<span class="fold" />[/B]</div>


You have used a self closing tag for the span and the span is not a self closing element so you need this:


<div class="welcome">
	<h3>Welcome </h3>
	[B]<span class="fold"></span>[/B]</div>


Try making that change first and see if it rectifies the misplaced footer and the jumping content in IE7. It seems to sort it locally.

You also have a p tag around the object element and the h2 heading and the p element cannot contain an h2 so move the closing tag up around the object only.


<p>
	<object width="560" height="349">
		<param name="movie" value="http://www.youtube.com/v/TAiTaXO7gHc&showinfo=0?version=3&hl=en_US&rel=0">
		</param>
		<param name="allowFullScreen" value="true">
		</param>
		<param name="allowscriptaccess" value="always">
		</param>
		<embed src="http://www.youtube.com/v/TAiTaXO7gHc&showinfo=0?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
	</object>
	<br />
<h2>The "Heart" of Empowered Style</h2>
[B]</p>[/B]


It should be here:


<p>
	<object width="560" height="349">
		<param name="movie" value="http://www.youtube.com/v/TAiTaXO7gHc&showinfo=0?version=3&hl=en_US&rel=0">
		</param>
		<param name="allowFullScreen" value="true">
		</param>
		<param name="allowscriptaccess" value="always">
		</param>
		<embed src="http://www.youtube.com/v/TAiTaXO7gHc&showinfo=0?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
	</object>
	<br />
[B]</p>[/B]
<h2>The "Heart" of Empowered Style</h2>



Hey Paul,

I implemented what you wrote and everything seems to be working. But I never saw the site break up in the first place (even when I hovered over the icons) so I’m not 100% sure if it’s fixed or not. Maybe I have a weird version of IE tester.

Thanks you very much for taking the time to help me out and explain things. I learned a lot.

Daniel

The jumping is fixed in IE7 now but you are missing the fold from the welcome h3.

Add this:


*+html #introduction{zoom:1.0;overflow:visible}