Results 1 to 10 of 10

Thread: IE 10 Margin Problems

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default IE 10 Margin Problems

    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.

    Code:
    <!--[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]-->

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you, John.
    Www.menuhead.com

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    .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):

    Code:
    .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.
    Last edited by jscheuer1; 05-08-2013 at 07:42 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    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?
    Last edited by DS928; 05-08-2013 at 11:48 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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:

    Code:
    	$("#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:

    Code:
    $("#ballon").css('visibility','visible');
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    DS928 (05-09-2013)

  9. #8
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

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

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

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

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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.
    Last edited by jscheuer1; 05-09-2013 at 05:02 AM. Reason: add bit about the body
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you! You've been a big help!

Similar Threads

  1. Margin problems...
    By jhatter in forum CSS
    Replies: 3
    Last Post: 03-28-2013, 08:35 AM
  2. Resolved CSS padding or margin problems
    By mlegg in forum CSS
    Replies: 4
    Last Post: 05-02-2012, 12:50 PM
  3. CSS layout - margin problems
    By Susie56 in forum CSS
    Replies: 3
    Last Post: 08-17-2011, 05:48 PM
  4. Paddings & margin problems
    By mvfaccin in forum CSS
    Replies: 3
    Last Post: 11-29-2008, 03:33 AM
  5. IE 6 margin-right problems
    By neridaj in forum CSS
    Replies: 1
    Last Post: 10-21-2008, 10:59 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •