IE 10 Margin Problems

[DS928]

This code works fine in IE 8, IE 9, Firefox and Chrome, However, since IE 10 doesn't read conditional statements this doesn't work. IE 10 seems to be grabbing the style.css instead of iestyle.css.

<!--[if IE 8]>
<link rel="stylesheet" href="CSS/iestyle.css" type="text/css" />
<![endif]-->

<!--[if IE 9]>
<link rel="stylesheet" href="CSS/iestyle.css" type="text/css" />
<![endif]-->

<!--[if gte IE 10]>
<link rel="stylesheet" href="CSS/iestyle.css" type="text/css" />
<![endif]-->

<!--[if !IE]><!-->
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<!--<![endif]-->

[jscheuer1]

Yes you are correct and there's no 'seems to' about it. It does. However, a well designed page with a standards invoking DOCTYPE will look virtually the same in Chrome and IE 10.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[DS928]

Thank you, John.
Www.menuhead.com

[jscheuer1]

I don't have time to go into details right now, maybe later. But Looking at the page in the two browsers I almost immediately ask why a 380px top margin is required for:

<div id="CB" class="columnblock">

Without looking much farther I assume there is some, perhaps a lot of one or more of the following:

• position: absolute;
• position: relative;
• float: left; (without effective cross browser clear: left;)
• float: right; (without effective cross browser clear: right;)

Once you start doing these sorts of things, the design is more prone to break down across browsers. With a relatively simple visual layout such as the page presents, well that should be able to be achieved without any of the above.

[jscheuer1]

OK, I've had a closer look. Oddly enough the solution (at least for now) appears to be to add more positioning -

In style.css around line 147:

.container .content {
	padding: 10px 0;
	background-repeat: no-repeat;
	background-color: #F9F9F9;
	font-size: medium;
	background-image: url(../Images/Page_Backgrounds/PageBigSearch.jpg);
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
}

and around line 287 (change the positioning):

.notice{
	position: absolute;
	width: 400px;
	height: 200px;
	float: center;
	top: 150px;
	left: 200px;
	padding: 0px;
}

The problem was that .notice has layout in IE 10 pushing things below it farther down the page, but not in Chrome. I think IE 10 is correct because .notice was position relative, which should have layout. In any case, by making it position absolute, it no longer can have layout in either browser. But then it gets positioned in relation to the body. By making its parent position relative, it now gets positioned relative to it.

I haven't fully tested these styles yet, so they may need tweaking, or perhaps even a different approach will need to be taken.

The browser cache may need to be cleared and/or the page refreshed to see changes.

BTW, the .notice img never seems to appear in Chrome, even when you submit without a Where or What. That form and/or its script code needs to be rethought. And there's a missing ajax loading image that I think is supposed to come up when the What and Wanna sections are being populated. The fact that it's missing may or may not be related to the .notice img never showing up in Chrome.

[DS928]

hmmmm, your definitely right about the notice not popping up in chrome! how can that be fixed? Still playing with the other. Thank you for your help!

Could it be this?

$("#ballon").css('visibility','visible')

No that doesn't work. It works fine in IE8 and IE9, Not in Firefox or chrome. Is there a way to write this for multiple browsers?

[jscheuer1]

There are two reasons why the #ballon doesn't show up in Chrome. First is this:

<div hidden class="notice" id="notice">

As far as I know that's non-standard. But it has the effect of rendering that div display: none; in Chrome, which is also why you could use such a large top margin on the columnblock div and not have it look as it does in IE 10.

Get rid of it (the non-standard hidden attribute), and use the styles from my last post to correct what that will do to the layout.

Second is this (the code used to show #ballon when the required information hasn't been chosen yet). Look at the end:

	$("#getResults").click(function(e) {
    e.preventDefault();
	var Food = $('#Food').val();
	var Place = $('#Place').val();
	var Filter = $('#Filter').val();
	if(Food&&Place&&Filter){
		//alert("Three Selections Made! 335")
		$.post("Scripts/threeSearch.php?t="+new Date().getTime(),
		{"Food":Food,"Place":Place,"Filter":Filter}, function (html) {
				$("#ballon").css('visibility','hidden');
				$("#results").html(html);
				$("#results").addClass("beautifulData").beautify({ pageSize : 25, pagerSize : 5 });
			});
		}
		else if(Food&&Place) {
			//alert("Two Selections Made! 344")
			$.post("Scripts/twoSearch.php?t="+new Date().getTime(), {"Food":Food,"Place":Place}, function (html) {
				$("#ballon").css('visibility','hidden');
				$("#results").html(html);
				$("#results").addClass("beautifulData").beautify({ pageSize : 25, pagerSize : 5 });
				
			});
		}
		else {
			//alert("Please Select One From Each Box 353")
			$("#ballon").css('visibility','display'); 
		}
	});

That's also non-standard. It needs to be:

$("#ballon").css('visibility','visible');

The browser cache may need to be cleared and/or the page refreshed to see changes.

[DS928]

John, Thank you very much! Removing the word hidden fixed everything!

<div hidden class="notice" id="notice">

<div class="notice" id="notice">

[jscheuer1]

Well that and reducing the top margin in style.css for:

<div id="CB" class="columnblock">

I hadn't thought of that. Actually a better solution than using absolute position as I suggested before.

In my defense though, I had yet to discover the non-standard 'hidden' attribute at that point.

Oh, and you might want to set the margin on the body to 0. That will get rid of that slight gap at the top.

[DS928]

Thank you! You've been a big help!