Martin54 Posted October 25, 2018 Share Posted October 25, 2018 (edited) Hello All I'm not sure if this is a Browser/Coding or Device issue? I'm new to coding and only have very basic skills. I understand the theory but the practise is another matter. I have been experimenting/trying to adapt a w3 template to suit my needs and have copied and pasted the code of the template below into my Dreamweaver application. I have deleted some sections as they're not required again see below for deleted sections. I've done this by deleting relevant HTML code but haven't deleted any of the CSS code and presumably I should, am I correct in thinking that? I've uploaded my site to the remote server and while it seems to work ok on desktop and iPad/tablet, it's proving erratic on my mobile device, iPhone 6S. Though it works initially, if I repeatedly open and close the images they eventually start overlapping each other? It does this in Safari, Chrome and Firefox so it's consistent. I'll put images on a reply to this post as no more space available! Any thoughts on whether the issue is a device problem, coding or browser or all 3 and any thoughts on why it should work on some devices and not others. Many Thanks in anticipation. Martin54 Edited October 25, 2018 by Martin54 Link to comment Share on other sites More sharing options...
Martin54 Posted October 25, 2018 Author Share Posted October 25, 2018 Continued from previous post, screen shot of site on my iPhone 6S Link to comment Share on other sites More sharing options...
justsomeguy Posted October 25, 2018 Share Posted October 25, 2018 I've done this by deleting relevant HTML code but haven't deleted any of the CSS code and presumably I should, am I correct in thinking that? Couldn't tell without seeing what's involved. If there are parts of the CSS that only apply to sections that were deleted, then it's just taking up space. If the CSS contains rules that applied to the deleted parts but also apply to something else and are affecting those negatively, that could be an issue. If you want to post the relevant parts of the code we can probably provide more insight. Link to comment Share on other sites More sharing options...
Martin54 Posted October 25, 2018 Author Share Posted October 25, 2018 Hello justsomeguy Thanks for getting back to me. The only error that appears in the HTML Code is the one below in bold. The error is saying, an alt attribute must be present on <img> elements. Obviously I'm using my own images and I'm assuming the code error is because of that? 83. <!-- Modal for full size images on click--> 84. <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'"> 85. <span class="w3-button w3-black w3-xlarge w3-display-topright">×</span> 86. <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 87. <img id="img01" class="w3-image"> 88. <p id="caption"></p> 89. </div> 90. </div> The errors that appear in the CSS code style sheet are again the ones below in bold. The error is saying, Standard property 'transform' should come after vendor-prefixed property '-ms-transform' which due to my lack of knowledge I have no idea what it means? 99. w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} 100. w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}101. w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} 102. w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} 103. w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} 104. w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 105. w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 106. w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} 107. w3-display-position{position:absolute} Not sure if this information helps or do you need more? Many thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted October 25, 2018 Share Posted October 25, 2018 It sounds like those are just validation issues that shouldn't affect the layout. The CSS thing it just saying that the transform property should be listed after equivalent properties prefixed with a vendor. -ms-transform would only apply to Microsoft browsers, for example. Link to comment Share on other sites More sharing options...
Martin54 Posted October 25, 2018 Author Share Posted October 25, 2018 So, errors shouldn't affect website performance in all devices? As I'm sure you know errors show up in orange in Dreamweaver and they are the only errors that are displaying in the HTML and CSS coding. Any other thoughts as to why this might be happening? Many thanks for your time. Link to comment Share on other sites More sharing options...
Martin54 Posted October 25, 2018 Author Share Posted October 25, 2018 As an additional thought would the problem suggest a coding fault rather than a server/browser or device issue? I've cleared the search history in the browsers I use, Safari, Chrome and Firefox but the problem is consistent! Link to comment Share on other sites More sharing options...
Funce Posted October 25, 2018 Share Posted October 25, 2018 Perhaps some code would be useful for diagnosing the problem. You said its live, perhaps a link to that so we can see what's up? I suspect, if you're only having issues on mobile, it may be some interaction with `@media` queries (or some rogue JavaScript). But I'd be hard pressed to figure it out exactly from pictures alone. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 25, 2018 Share Posted October 25, 2018 Quote So, errors shouldn't affect website performance in all devices? Legitimate errors probably will, but those validation messages are telling you that <img> tags require an "alt" attribute that the device can display if it does not support images or can't load that image, and it's suggesting a different order for the CSS properties which would only affect Microsoft browsers. It doesn't sound like any of that relates to the problems you're describing. Quote As I'm sure you know errors show up in orange in Dreamweaver and they are the only errors that are displaying in the HTML and CSS coding. You should check your browser's developer console for Javascript error messages during runtime. Quote Any other thoughts as to why this might be happening? Again, without seeing your code everything would just be a guess. Quote As an additional thought would the problem suggest a coding fault rather than a server/browser or device issue? I've cleared the search history in the browsers I use, Safari, Chrome and Firefox but the problem is consistent! Yes, that suggests a problem with the code. Link to comment Share on other sites More sharing options...
Martin54 Posted October 26, 2018 Author Share Posted October 26, 2018 (edited) Here’s a link to the site @Funce @justsomeguy http://www.martinvallis.com/ thanks both for your time and replies. Edited October 26, 2018 by Martin54 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 26, 2018 Share Posted October 26, 2018 What do we do to see the issues? Link to comment Share on other sites More sharing options...
Martin54 Posted October 26, 2018 Author Share Posted October 26, 2018 Hello @justsomeguy Well we could start with the time zone ;) I use an iPhone 6s and it’s the only mobile device I’ve tested the site on so far. The site loads and rescales to fit the screen size and initially it works as it should. But if I repeatedly open and close the images regardless of what page I’m on, the images eventually start to overlap, as per my screen shot above. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 26, 2018 Share Posted October 26, 2018 I can't test with that device, but if you also have a Mac then you can use that to help debug. https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ I would start by checking for Javascript errors or inspecting the overlapping elements to see what CSS is being applied to them. Link to comment Share on other sites More sharing options...
Martin54 Posted October 26, 2018 Author Share Posted October 26, 2018 (edited) Thanks for the link. Would I be right in thinking that any errors, the corresponding line numbers would be highlighted in a colour as in Dreamweaver? If so, then at the moment I can't see any errors appearing? Edited October 26, 2018 by Martin54 Link to comment Share on other sites More sharing options...
Martin54 Posted October 26, 2018 Author Share Posted October 26, 2018 Out of interest would the amount of images (78) on the site have any bearing on a mobile device? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 26, 2018 Share Posted October 26, 2018 Would I be right in thinking that any errors, the corresponding line numbers would be highlighted in a colour as in Dreamweaver? Not for Javascript errors. Dreamweaver will only show issues with the design. If you want to find errors that happen during the actual runtime then you need to look in the developer console in the web browser. Out of interest would the amount of images (78) on the site have any bearing on a mobile device? Would the number of images affect image placement? It doesn't seem likely. Link to comment Share on other sites More sharing options...
Martin54 Posted October 28, 2018 Author Share Posted October 28, 2018 I've just checked my site http://martinvallis.com/ in a HTML & CSS validator and the following errors in html occur, all relate to images, so could that be the problem? Trying to post screen shot but despite resizing it wont post. But this is the message Error: Bad value images/portrait of howard hodgkin copy.jpg for attribute src on element img illegal character in path segment: space is not allowed and this is how the coding looks on my html <img src="images/portrait of howard hodgkin copy.jpg style="width:100%" onclick="onClick (this)" alt='portrait of howard hodgkin"> I can't for the life of me see where the space is occurring? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2018 Share Posted October 28, 2018 The space refers to the spaces used in file name, you shouldn't have spaces, use hyphens instead. <img src="images/portrait-of-howard-hodgkin-copy.jpg style="width:100%" onclick="onClick (this)" alt='portrait of howard hodgkin"> Using spaces in filenames can be problematic, but I don't think it will cause the problems you are having. Also <img id="img01" class="w3-image"> You shouldn't have a empty img src or no src attribute, use a default image or small blank transparent img, a alt attribute must also be present, but you can leave it empty as alt="" which is perfectly valid. Link to comment Share on other sites More sharing options...
Martin54 Posted October 29, 2018 Author Share Posted October 29, 2018 Thank you @dsonesuk for your feedback, it’s appreciated. I’ll correct the errors. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 29, 2018 Share Posted October 29, 2018 That img tag you showed is also missing a quote, if that's from the original. Note the syntax highlighting in dsonesuk's reply. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2018 Share Posted October 30, 2018 You are also mixing single quotes with double quotes with alt attribute, If it starts with single or double quote, it must end with same. Link to comment Share on other sites More sharing options...
Martin54 Posted October 31, 2018 Author Share Posted October 31, 2018 Apologies for the delay in getting back to you @dsonesuk and @justsomeguy, life gets in the way! I tried the original W3 Schools template on my mobile and it did eventually start malfunctioning as per my images posted above. I've now corrected all the image coding errors and tested the site through the HTML Validator and CSS Validator and the only issue that remains and that we already know about is Error: Element img is missing required attribute src. From line 87, column 7; to line 87, column 39 4">↩ <img id="img01" class="w3-image">↩ everything else tests ok. I've tried removing the w3-image text and just leaving the quotation marks but it would appear that this must relate to a rule in the CSS sheet as it does effect image sizing when removed and when put back does correct the sizing. Despite now having an error free site I'm still experiencing the same problem of images overlapping on my iPhone 6s and other models of iPhone. I haven't checked the site on other brands of mobiles but will try to do so ASAP. Any other thoughts as to what this could be? As I've already said it works fine on Desktop and iPad. Link to my site Martin Vallis | Photography Many thanks for any further support you can offer. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 31, 2018 Share Posted October 31, 2018 The best way to determine what the problem is is to connect your phone to a Mac and debug on the desktop with the browser's developer tools, so you can inspect the relevant elements and determine what's being applied and how everything is affected. Link to comment Share on other sites More sharing options...
Martin54 Posted November 1, 2018 Author Share Posted November 1, 2018 On 10/31/2018 at 6:33 PM, justsomeguy said: The best way to determine what the problem is is to connect your phone to a Mac and debug on the desktop with the browser's developer tools, so you can inspect the relevant elements and determine what's being applied and how everything is affected. I did in fact try your suggestion and connected my phone to my mac and then - develop - debugger but all it did was highlight my lack of knowledge because in truth I don't know what I'm looking for? Unless there's a flashing neon sign saying warning/error/mismatch then I'm stumped. I did go into console and click warning and errors but the boxes were blank. I did scroll through the html and css but nothing stood out that I could see. Under the heading Network there was a section marked 'JS' which I assume meant Javascript but when I clicked on that again the box was empty other than 'No Filter Results'? I did hope that a short term goal of using a template would carry me over until I've learnt and gained enough knowledge through the html and css tutorials to attempt to build from scratch, it appears I was wrong:( Link to comment Share on other sites More sharing options...
justsomeguy Posted November 1, 2018 Share Posted November 1, 2018 The developer tools have a tool to inspect the elements on the page, and you can see all of the CSS rules that apply to them and where they're coming from. You can also change, disable, or add styles and see how the elements are affected. I would use that to look at the misbehaving elements to try to figure out why they're not lined up correctly. Once you know the CSS that is causing it then you can hopefully work backwards to figure out how that CSS gets applied and whether you need to change CSS rules or change Javascript that assigns classes or what. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now