Jump to content
Martin54

Browser/Coding/Devise issues?

Recommended Posts

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.762302173_ScreenShot2018-10-25at15_15_16.png.31d2b884c88670a9397aaad04c404536.png

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?

1984433848_ScreenShot2018-10-25at15_18_37.png.6be3953e34de7fc915af200f49a241e2.png80889008_ScreenShot2018-10-25at15_18_56.thumb.png.778cbda8dac48645540e08fff51b3cdc.png

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 by Martin54

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Martin54

Share this post


Link to post
Share on other sites

Out of interest would the amount of images (78) on the site have any bearing on a mobile device?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

That img tag you showed is also missing a quote, if that's from the original.  Note the syntax highlighting in dsonesuk's reply.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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:(

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×