CSS/HTML & Browser Problems with Weebly-Exported Site - html

I'm part of a professional-oriented undergraduate organization at Michigan State University that wishes to maintain its web presence on our university's server, in part because the .edu web address looks professional. However, we wish to allow various members of our organization to edit the website, which complicates the situation because not everyone in our organization has the programming skills for HTML/CSS (our university prevents all personal and group webspace from using server-side scripting).
One potential solution that I have discovered uses Weebly's website generating service. There is a feature of Weebly located under Settings > Archive/Un-publish that allows one to download a .zip file of the site after having manipulated the site through Weebly's GUI. Such a solution would allow our members who do not have the knowhow to edit HTML/CSS to simply edit the website through Weebly, download it, and then upload it to our university's server.
The issue is the following: for whatever reason, after doing this, part of the website is not rendering correctly in certain browsers. In particular, in Internet Explorer and Google Chrome (though not in Safari or Firefox) the two columns in the main content area of every page are vertically centered. This is most apparent on the our constitution webpage, as the relative length of the constitution leads to the "Meetings" sidebar being located very far down the page. You can compare this to the rendering of the same page on the Weebly site, where the issue does not arise and the "Meetings" sidebar is at the top of the page, regardless of the browser.
Does anyone know why this might be the case and whether there is an easy fix? As noted at the outset, we wish to maintain the website on our university's servers for professional reasons, so maintaining the website on Weebly and redirecting the .edu address to the Weebly site is not an option.

The td item in the table: .wsite-multicol-col needs to be set to vertical-align:top. To be vertically aligned to the top of the table.
In the old days, way back when...you could do <td valign="top">, in the markup - but that's no longer valid, and we can control the styling purely through the .css file.

Related

Anyone know the script to this HTML mobile grid homepage?

Mostly the image shows it all. But I would like to know if anyone has the script to this code, or something similar to it where I could easily change it to look like this.
Thanks.
( view image at; https://ibb.co/cnHqgb (can’t upload one to here))
All you have to do is use the Developer console on your web browser, if you are referring to javascript; Javascript is a client side scripting technology which means it is run on the clients computer. All resources for the web page rendering are available on the "client computer". Visit here for information on what client side means: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjqhfWyubLYAhUQ4mMKHfOaAbEQFggpMAE&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FClient-side&usg=AOvVaw2_tROJ3t6y_go_JvYx5Cbc
PHP on the other hand is also a scripting technology but is run on the server, but PHP only serves what scripting your browser recognizes which is html, javascript, java, flash etc...
Open the developers console and look under the resources tab and you should have a listing of all the resources for the page under question. You can then download them and look at the source code that is used for browser rendering. You must keep in mind that sites are intellectual property and usually contain copyright footers which means while you can research and learn different design layouts for websites by inspecting source code, if you steal a site owners exact intellectual property for displaying a website you could be held legally responsible.

IMG src='file//..' does not return expected image BUT the same file//.. in navigation bar does

I'm developing a page that uses an image from a Networked File System.
The HTML is:
<img src='file://192.168.1.25/dir/subdir/fname.jpg'/>
and the image does not display.
However when I put
file://192.168.1.25/dir/subdir/fname.jpg
directly in the Navigation Bar the image displays with no problem.
I've already researched the problem and saw a lot of answers about slashes (the number of them and type - forward or backward) and also some bizarre suggestions but no definitive answer that works. I'm sure there must be a very simple solution. If I can display the image perfectly from the Nav Bar, I can't see any reason why the img src= would behave differently (but then browser developers may be strange beasts and they certainly all do it a different way).
I suppose that an http://... link in the src= would work fine but I was trying to avoid mounting a Web Server on the source machine just for this purpose as the Web App is destined to be an internal web where all the authorized users will have access to the Networked File share and the source machine is destined to be in an externally available environment with various daemons handling all external client communications and other tasks.
I'm testing with Chrome right now and have not tried it on other browsers but I really need a portable solution that would work on MOST if not ALL HTML5 browsers.
Thanks in advance for any insights.

Google Website Translator completely changes site spacing and structure

I embedded Google Website Translator into the website I'm working on when Google Analytics showed me that the majority of website traffic is coming from non-English speaking locations.
The translation works, and I'm happy that the site will be available to more people. The problem is that, when translated, the structure and formatting of my pages are thrown entirely out the window. For the most part, font colors and sizes are maintained, but tables change width and most line breaks are ignored...this leaves a jumbled mess with very little structure. It can still be read, it just gets even uglier than it already was.
To see for yourself, visit the website at SVFCLV.org and translate into any language you'd like. What's the easiest way to preserve my page structure even when Google translates the page for visitors?

Maintain consistent design & chrome across multiple websites

In the same vein as the microservice architecture approach we're currently looking at splitting our legacy marketplace application into multiple, smaller sites. We've already carved off the checkout portion and soon to follow will be the seller portal, user portal and registration pages. Each site will be completely separate and have its own domain, data access etc.
The problem is: how do we maintain consistent site chrome (i.e. header & footer) across multiple websites? For the checkout site that we've already split off we were prepared to drop the site chrome but that's going to be a much less acceptable solution for future projects.
The ideas I've had so far are (assuming we don't want to simply duplicate the header and footer in each site):
Put the necessary HTML in a nuget package and install it in each site that needs it. This should be fairly easy to do but has the disadvantage that any change to the chrome means every site needs to be updated and redeployed. Also, it limits us to .NET for all future sites (maybe not a real concern?).
Serve all our sites through some kind of proxy site that injects the site chrome into the HTML before serving to the client. This way the site chrome is actually its own application and can be deployed independently of anything else. Disadvantage: I haven't really got any idea of how to implement this; I wasn't able to find anyone else trying anything similar on Google. Also, it might be fragile even once it's up and running due to interplay between the chrome app and the content app.
Has anyone else solved this problem before? If so, what approach did you use?

has chrome eliminated the classic avatar menu?

Like many web developers, I maintain numerous profiles in Google Chrome so as to test web applications. When doing these tests, it is essential to rapidly determine which profile I am in when interacting with Chrome. I depended on the classic Chrome avatar menu to signal the current profile. For months now, Chrome has defaulted to a newer profile menu that only showed the current user's name in text (no avatar image). Until today, it was possible to go back to using the classic avatar menu by navigating to chrome://flags and then disabling Enable New Profile Management System. Now, doing this has no effect. I was wondering if perhaps there is some other way to enable the classic avatar menu so that my web development tests can proceed as before.
This is unfortunately a design decision by Google, and it looks like they're sticking to it. When it initially happened, I (like you) set the flag & was able to use legacy icons, but as of this morning the flag itself has been disabled.
Further reading (follow the links to related issues): https://code.google.com/p/chromium/issues/detail?id=512699
I have no idea how much good it will do, but starring the issue and leaving a polite, detailed comment on issue #451920 is a good place to start.