Windows PC IE & Firefox issues with layout :-(

Hi from pitch black chucking it down with rain York UK :smile:

If anyone has got the time I would really appreciate it if my recently posted site www.davidclick.com has Internet Explorer issues. Thing is the Horizontal nav and picture grid layout should appear as illustrated in the attachment. But on my partners laptop (which she never ever updates) the picture grid was missing in IE and in firefox the horizontal nav vanished, Yikes!

Now this could be down to an old Windows laptop which has never had anything updated (I tried to get the versions of the browsers but it suddenly started running updates) .

Please could a Sitepoint member take a look at the site thru IE and ping back any issues?

Thanks,
David

p.s. I tested the site on an iMac, Chrome v 40 or something, iPad Safari and IPhone 5s & Chromebook no issues so maybe its ok on IE but would love to know :slight_smile:

1 Like

The missing photo grid in IE is due to this in your fluid-grid.css code:

.picgrid ul li img { position: relative; z-index: -1; display: block; border: 0; width: 100%; height: auto; }
your z-index:-1 is the issue. Remove the z-index and the problem goes away. I didn’t try to figure out why it works in other browsers but not IE…

The nav section is there in my current FF.

In general, you could spend the rest of your life trying to support someone’s ancient version of a browser. At some point you just decide “enough is enough…”

1 Like

@tracknut Will give this a go AM tomorrow, big thank you I would have had no idea. How do you know these things?

Oh I don’t, sorry to say. If you are not debugging a web site with the browser console (every browser has some way), then you’re missing some enormous help. In this instance I looked at that .picgrid because it was the area of interest. I saw the z-index:-1 and thought, “why the heck would anyone push all the pictures behind anything else, so far to even use a negative z-index?”, and so I removed it. Boom, pics show up. But realistically what it doesn’t tell me is why you did that, and if there is something else I just broke by suggesting you change it :slight_smile:

I’m afraid this is my view in IE11 David:

I tried it in IETester but it was a disaster (and I’m sure that was IETester not your website!) :slight_smile:

<offtopic>
I have to say I find the menu hard to read - white on light grey doesn’t give much contrast.
</offtopic>

The problem is that the stacking context (.picgrid) is a display:table element and the behaviour of positioning on table elements and table-cells has been undefined for some time although modern browsers are now starting to recognise them.

In IE11 (and even Edge) the negative z-index takes the image element under the parent’s (picgrid) gray background. negative z-index should never take an element below the original stacking context which in this case is picgrid but because picgrid is a table and the behaviour is undefined for tables the stacking context is ignored and the element goes under the parent background.

If indeed you just remove display:table from picgrid the images will re-appear and the display will be ok because the display:table-row creates an anonymous display:table around the row if none exists. Of course the image should not be z-index:-1 anyway so the point is moot.

It is generally safer to wrap a div around a display:table-element and apply position:relative to that div rather than the display:table element. However you only really need to do that if you need to use negative z-indexes and you don’t want them disappearing behind a parents background.

2 Likes

Your right the menu is hard t o read, i’m going to add that to the fix list :slight_smile:

1 Like

Thanks for the reply, yes i need to start using the web browser console thingy to trouble shoot more. Will knock out Z index today and pray it doesn’t bust something else :slight_smile:

Thanks @PaulOB cross browser knowledge is limited my end, i just wonder if there is a resource out there that documents what css code is not cross browser compatible?

@Nightwing

Is there any particular reason you load JQuery in the header instead of immediaely before </body>

Also jQuery.min is loaded twice.

Edit:

I tested the site on an iMac, Chrome v 40 or something, iPad Safari
and IPhone 5s & Chromebook no issues

Can you get a friend to test your site on their mobile and let me know how long it takes to load the 8.1MB page?

These days its not so much of an issue unless you want to support older browsers (or are using cutting edge stuff). There will always be bugs and differences but hopefully they don;t bite so often these days :smile:

Taking a look at this now :slight_smile:

@John_Betong Thanks for Jquery issue. Does this code mean I requested it load twice:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- implement click menu for mobile --> 
<script>
jQuery(document).ready(function() {
		$('body').on( "click", ".mobile-menu", function() {
	 		var myNav = $('#menu');
				myNav.fadeToggle();
				$('.hamburger-menu').toggleClass('hamburger-on');
		});
});
</script>

If yes should i just knock out:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Plus yes massive code bloat from background images is being looked at :slight_smile:

You have this

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

twice, David

1 Like

You call in the jQuery library. Then you have some jQuery code. Then you call in the same library again. Then you have some left over DreamWeaver code that is throwing an undefined error

<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- implement click menu for mobile --> 
<script>
jQuery(document).ready(function() {
        $('body').on( "click", ".mobile-menu", function() {
             var myNav = $('#menu');
                myNav.fadeToggle();
                $('.hamburger-menu').toggleClass('hamburger-on');
        });
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>York wedding photographer | davidclick.com</title>
<link href="../styles/boilerplate.css" rel="stylesheet" type="text/css">
<link href="../styles/fluid-grid.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="home" onLoad="MM_preloadImages('images/york-marriott-wedding-500-500.jpg')">

You don’t need to call in the jQuery library the second time. And if you don’t need the DW code you should take out that too.

@tracknut Just removed the negative Z-index . Good news cross browser test shows the image grid shows on the right, bad news the hover effect as in when you clicked on the images a larger one appeared has vanished :frowning:

Line 323 minus z index removed now now elarged pics when you click on thumbnails:

picgrid ul li img {
	position: relative;
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

Original css code path: http://www.davidclick.com/styles/fluid-grid.css

Thanks,
David

Yes i this now, removed duplication from home page will role out to other pages soon :slight_smile:

HI @PaulOB

A big thank you for your help :slight_smile: The good news is the picture grid is showing in IE now but now the z-index:-1; has been removed line 322 of CSS:

.picgrid ul li img {
	position: relative;
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

A problem has occured in that before when you clicked on an image a bigger version appeared now that feature has gone :frowning: Is there a possible way of getting this feature back?

Thanks,
David

Just a heads up I am now tinkering with the z-index-1 bit and cross browser checking :smile:

I need to see how i can preserve the thumbnail on click behaviour in IE, wish me luck!

I find this one very useful

It shows what is supported in various browsers, which need prefixes, any bugs or exceptions etc…

2 Likes