I have converted my existing website to Smarty template (my very first project with 1 day of smarty experience under the belt)
Prior to conversion my website looked fine in IE and FF.
After the conversion FF still looks okay however in IE everything falls apart.
I have tried comparing the source code in IE and FF and everything looks exactly the same.
Any help is appreciated.
Since Smarty is just the templating system that generates the HTML sent to the browser, the issue probably occurred when you split up your existing site into parts. Unfortunately it isn't very easy to find out what is wrong with a full project on SO. That said, here are some tips on debugging the issue.
Load your old site and copy the source from the browser (doesn't matter which browser as the server sends the same HTML*).
Load your new site and copy the source from the browser.
Diff the two sources to find the differences.
I think that's the best place to start. If the new site is sending the exact same HTML to the browser, then it would seem that some resource isn't being loaded (bad link) or javascript isn't being executed in IE, which should be separate from Smarty. For that check IE's Developer Tools and make sure no CSS is getting a 404 and no js exceptions are being thrown.
*As long as you aren't modifying things on the server based off the User-Agent sent, which is not common.
Related
So after making a website using VScode (Probably not important) and uploading it to GitHub Pages, the website looked great! It was doing fine on windows and on my phone, everything was looking good.
Then, after checking it on my Mac with Safari (Not sure which would be the issue but I presume Safari) the css seemed to be a little weird and the page layout was all over the place.
After checking the console I am getting the following error
Failed to load resource: the server responded with a status of 404 ()
This is my styles.min.css file so I presume this is the issue.
Checking the console on windows doesn't bring around any errors which leads me to believe that this is the error...
Does anyone have any idea what could be causing this?
I'll post some pictures of what is happening to the items within my website.
Since people want the code, hopefully posting the website so you can inspect it will be fine? There's a lot of code and I'm not sure where to upload it.
https://manakura.github.io
EDIT 1: After checking out the code in the console, it seems like it has something to do with the width of the text? Because if I change the class from >col-md-4 to >col-md-3 which has less width the page is fixed.
Though I'm not sure how to fix this with col-md-4 or if I will have to enter some kind of media query?
Website working in Chrome on MacOS
Your problem is that there is no file actually named styles.min.css in the Github repo. You need to create a file first.
So I recently updated my online portfolio, just a few minor changes to the design, it looked great in browsersync, then when I upload it, it looks horrible. It's like some of the CSS isn't being read. I can't figure it out. When I view it in an incognito browser, it looks just how it is supposed to - knowing that, I cleared all my cookies and data and still nothing changed. I'm new to web development, and this really boggles my mind. Does anyone know what is causing this?
Web browsers tend to locally save a version of the css so they don't have to request it from the server each time you visit the page which speeds up the load time. Try hard clearing the cache for your portfolio page then try again.
modern development tools like Chrome's web inspector can turn off caching and request the entire page from the server each time, that might help you.
Could possibly be that your browser is imposing it's default-styles onto your project, or more than likely that an addon/extension is changing your browsers' ability to display your CSS. I would suggest running through your extensions and see what could be causing it, or to quickly troubleshoot, download and install another browser and leave that clean (as in no additions) and use that to test.
I'm currently using a solution which converts a pdf file to a data URI. The data URI is then set as an iframe's source and displays the pdf on almost every major browser, I have learned that IE 11 does not like this though. After reading up on it, i realize that iframes don't support data URI's as the source (nor do any elements other than an image URI) and that I can't set a source for an element so I'm unsure how I could achieve the same with Internet Explorer.
I've tried using an embed (learned that it doesn't like data URIs either), an iFrame, initiating a download in a new tab of the file itself (to mimick viewing a it in the browser - no avail) and I'm running out of ideas but unfortunately a lot of people still use Internet Explorer so I'd like to make it compatible. Is there any way to recreate this behavior in Internet Explorer like other browsers do?
Thanks in advance :)
I ended up giving up on this for lack of time to research/test. The final solution was just as well I suppose. I ended up writing the PDF to subdirectory in the website and then setting the source ofthe iframe to the download method of the file. Tad slower than my original implementation but it works for legacy purposes. When will IE die!
So I'm running my Rails app on a Nitrous.io server, and Chrome's web inspector is displaying some weird behavior that I've never seen before. When I try and modify some CSS in the web inspector, it automatically switches back to the previous CSS and doesn't make any live changes. I've never experienced this before and rely heavily on web inspector to work on the CSS of my site.
I'm currently running Chrome OS v29.0.1547.74 on a stable build.
I would post my css file but it's pretty long. Any idea where I should start looking to debug this? I really need to be able to make live changes in the browser to work on this site.
My CSS passes the W3C CSS Validator, all I get are warnings for 'unknown vendor prefixes'.
It's been a while since I did serious web development. Now I meet a host of brand new problems I'm no longer familiar with..
I have some .png images for various icons in my web page. What I find is that whenever I edit these images, they stop working inside a page in IE8. That is, they (usually) display OK when I first open the page, then are replaced by the placeholder icon on refresh. Sometimes, some of the icons display and others, with the same src, don't.
My image tags are nothing fancy, typically:
<img src="images/misc/smallreport.png" alt="Report" />
When I right-click an icon in the page and select "properties", protocol, type, address and size are shown as "Not Available", and dimensions are incorrect (size of the placeholder, I bet).
If I open the images directly in IE (ie. not within the page), they work just fine.
I have used Paint.NET to edit the images, but have also tried saving them with Paint.
Right now, I am working right off the hard disk (ie. not through a web server). And, oh yes, none of this happens in Google Chrome.
What's going on here?
check the path to the file is correct - can we see the tag please.
Well, we learn something new every day..
I mentioned that I'm running this directly off the harddisk? Now, it turns out the html page (which I had gotten off a coworker) was blocked "to help protect my computer", as Windows does.
This is no big surprise, lots of files I'm working with originate on other computers, and I usually don't worry much about it (except with executables, which won't run until unblocked).
It seems, however, that when IE8 loads such a blocked HTML file, its security settings adjust somehow, and - well, I can only guess at the details, but as soon as I right-clicked the HTML file, selected Properties and clicked the "unblock" button, the problem went away.
Something similar happened to me once, I tried hard to find what was wrong, then I realized I was saving (from Photoshop) the file as PSD but with extension .png. Make sure you're not doing the same.
Also:
Clear temporary Internet files
Verify that the Show Pictures option has not been turned off
Make sure that the Toggle Images.exe Web accessory is not present and disabling images
Make sure that a third-party Internet security, firewall, or cookie-blocking program is not causing the problem
Enable the Auto-Select encoding option
Source
It might be that the website you have browse has a lack of support
for an IE browser. IE is a nightmare for all web developers & Web designers.
It might be the developer of that website didn't care for an IE display because
of IE issues. Perhaps IE is trying to create a web standard to increase their
sales and marketing strategy. That's why don't care the modern Web development standard.
Why Chrome or Firefox or Safari, it's a free anyway.