April 15, 201313 yr Hello all you wonderful web designers. I wonder if you could have a quick look at this for me. I've been trying to style an interface for my latest web project here http://www.elimchurchbishopauckland.co.uk Please open 2 versions of this in Chrome and any other browser and hopefully you'll see what my problem is. Basically in Chrome the photo background gives 2 big a gap between the navigation bar and the photo. I think this is something to do with the fact that the navigation is built via a list but I can't seem to find a way to fix it. Code below. /*#header, section, nav, footer, article { }*/ /**/ #mainNav { position: absolute; display: inline-block; background-image:url(../images/nav.png); height: 68px; width: 950px; } #mainNavLinks li { position: relative; top: 23px; left: 170px; width: 100px; list-style: url(../images/cross.png); display:inline-block; padding-top:3px; padding-left: 15px; height: 26px; color: white; font-family:arial; font-weight:700; font-size: 14px; text-align: center; } li#link1:hover, linkSelected1 { background-image: url(../images/link1.png); /**/ } li#link2:hover, linkSelected2 { background-image: url(../images/link2.png); /**/ } li#link3:hover, linkSelected3 { background-image: url(../images/link3.png); /**/ } li#link4:hover, linkSelected4 { background-image: url(../images/link4.png); /**/ } li#link5:hover, linkSelected5 { background-image: url(../images/link5.png); /**/ } li#sideNav1, li#sideNav2, li#sideNav3, li#sideNav4, li#sideNav5 { color: #000; } /*li#sideNav1:hover, linkSelected5 { background-image: url(../images/link5.png); }*/ li#sideNav1, li#sideNav2, li#sideNav, li#sideNav3, li#sideNav4 { position: relative; top: 0px; left: -20px; display: inline-block; list-style: circle; line-height:20px; width: 200px; text-align: left; vertical-align:top; } #sideNavText { position: absolute; left: 14px; top: 30px; width: 400px; line-height: 50px; } Part of me is annoyed I didn't develop and test using Chrome but at the same time, any changes I do make to it aversley affects how it is displayed in the other browsers. Should I go back to the drawing board? Cheers
April 15, 201313 yr Have you recently edited it? Not getting any sign of any <li> let alone a navigation on Chrome or Firefox
April 15, 201313 yr Sorry to be a pain but I'm not seeing a gap between the navigation and photo other than the space for the hover to take affect (the links lighting up in multiple colours). For some reason, in Chrome I'm getting a 'This page is in Italian - would you like to translate it?' you might want to check the markup in your head for any spaces, etc
April 15, 201313 yr Author I was confused about the translation thing as well but I'll look at that as well. I'd not thought about the hovers for the links to be honest. What i'vr tried is to use markup for images as little as possible but may have to go back to tried and tested methods
April 15, 201313 yr Try the following at the top of your CSS to remove all padding's and margins to all elements * { margin: 0; padding: 0; }
April 15, 201313 yr Author Try the following at the top of your CSS to remove all padding's and margins to all elements * { margin: 0; padding: 0; } Nothing doing I'm afraid, it just shifts the hover links up a notch which we don't want. Why the page reckons it's Italian I don;t know, As far as I know meta information is okay. <!DOCTYPE html> <html lang= "en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-36732515-3', 'elimchurchbishopauckland.co.uk'); ga('send', 'pageview'); </script> <meta keywords = "" /> <meta description = "" /> <!-- Stylesheets --> <link rel = "stylesheet" type = "text/css" href = "styles/styles.css" /> <link rel = "stylesheet" type = "text/css" href = "styles/nav.css" /> <!-- Open Graph objects to go here --> <title>Welcome to Elim Church Bishop Auckland</title> </head> Edited April 15, 201313 yr by webDesignerJon
April 15, 201313 yr Website looks fine here in both Chrome and Firefox. IE8 however is off. You're using HTML5 elements not supported by this browser, so you're going to need a HTML5 shim or something similar. This just allows <IE9 to recognise and render HTML5 tags. Link here: https://code.google.com/p/html5shim/ Like dpuk said above, you should reset all margins and paddings in your CSS before you start to code, so that all browsers are consistent. Here's a commonly used CSS reset: http://meyerweb.com/eric/tools/css/reset/ Lyndsey.
April 16, 201313 yr Author Thanks Lynsey. I'll put the resets back in then edit the CSS again. Do I need to upgrade my Chrome then? I thought I had all the latest browsers. I have Firefox 20.0.1 Chrome Version 26.0.1410.64 Says up to date Internet Explorer 9 Opera 12.15 Safari Safari (Windows) 5.1.7 Could it be (and i'm clutching at straws here now) my toolbars messing with it?). Sorry for my triple post earlier by the way
April 16, 201313 yr Hey Jon, Website is fine in Chrome and Firefox. It's IE8 and below that will have issues as they don't support HTML 5 elements (<nav>, <section> et al) unless there's some sort of polyfill in place (http://www.paulund.co.uk/turn-on-html5-in-ie8-or-lower). Hope this helps
April 16, 201313 yr Author Just to be sure we all know what it is i'm seeing in Chrome, i've attached what I see in Firefox and Chrome. Appreciate all your advice so far.
April 16, 201313 yr I'm not seeing that at all. It looks fine here. Try clearing your cache and then do a controlled refresh (Ctrl + F5).
April 16, 201313 yr Author Cleared browser data. All of it. Now what happens is it shows first time, fine. Then refresh and it reverts back to the original state. So I think I'll bow to your wisdom, put that shim on and leave it there! But I'm still utterly confused! This is a design in it's early stages as you can see so if I have to, I'll find another way. As for the Italian problem guess I'll just report to Chrome they've got it wrong, because... well they have. Edited April 16, 201313 yr by webDesignerJon
April 18, 201313 yr Author Found a quick fix for our Italian problem. The only reason I can think of for Google offering to translate to that language is because my page is laden with Lorem Ipsum. Which of course is only temporary. But in addition to <html = "en"> you should add <meta charset="UTF-8" /> <meta name="google" value="notranslate" /> <meta http-equiv="Content-Language" content="en" />
April 18, 201313 yr Author Going back to the original problem, could there be anything in my Chrome settings that might be causing it? Or my hosting settings. I have 2 versions of the page one or clientside, one on serverside. Client is fine!.
April 23, 201313 yr Author I'm almost there! After having a nose around the CSS I've made each element relative to each other and the photo section seems to be behaving itself. There's just one blemish left, a little strip in the middle where the background is visible. http://www.elimchurchbishopauckland.co.uk/tmp2.html So i'll mark this thread provisionally solved, but if anyone has any final comments please do share. Edited April 23, 201313 yr by webDesignerJon
Create an account or sign in to comment