Just done a new lightweight responsive html website in CSS Grid with a bit of flexbox - working perfectly.
Converted a test page (with a bit of everything in it) to AMP, validated in Google DevTools.
Woo-Hoo me thinks - until I look at the page in a couple of browsers.
Content all present but certainly not correct - all the 'grid-template-areas' jumbled up.
Removed all the AMP stuff and page displays perfectly.
Any comments please? Can't provide a link as the site is still local.
Thank you.
I'll try again but without the named 'grid-template-areas'.
Should have realised that it was going uncommonly well :-)
Related
I am very, very new, so please pardon my ignorance.
I was away (thus using PC's) and have learnt to use embedded css and had my practice website going ok, then I came home to face my Mac.
(I have not learnt to use a separate CSS, because that was hard to do on borrowed computers so I only know embedded and in-line CSS)
No matter what I do (the file was already formatted to be plain text, saved as html), I cannot get any CSS property "linked" to my html. The html codes are showing, but the CSS seems completely lost. I took a screen shot of the very simple example. The right part is the what shows on the browser. Can you please enlighten me?
Did you try other browsers?
There are some similar issues in this page css not working in safari.
After you try other browsers with the newest version, you can locate the problem. If other browsers also don't work, the problem might arise from your code.
ok, first time poster, long time user of the site (when googling for clues).
I'm just starting coding, and made this site (all on plain HTML and CSS - made one in Bootstrap but didn't liked the usability - will test Foundation and Sass+Susy later on).
http://limakeppler.com.br/teste/areas.html
But I got two stupid (I believe) problens.
First: Can't made one css ref to work on mobile and browser window resive (got two entries on the html for the same external css). Ready about proper media-query usage, but can´t make it at all. Some pointers for just having one media-query wich work for both would be nice.
Second: Even with the same css (wich needs some work by the way), in mobile size, I got different results opening the site in Chrome Iphone simulator, or just rescaling the browser window? How can I fix this?
Thanks in advance, and sorry for my english. If needed, just ask and I will post the relevant code (but for what I saw here, a hosted page would work).
This is a bit of a general question. Different browsers render things differently but usually within a reasonable range. Often major differences in rendering across modern browsers are due to a lack of proper prefix code. If that is the case you can try something like https://autoprefixer.github.io/.
If you're referring to your <H1> elements overlapping on mobile device width, it's the padding:1em; that is crushing the text together. Instead you could try using % to replace em.
found the problem. As I found out, Iphone browser got some weird resizing going on. So I just add
<meta name="viewport" content="width=device-width,initial-scale=1">
and everything works as expected. Damn, maybe that's why a framework is not a bad idea :P
thanks for the help anyway.
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.
I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.
But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.
Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.
SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!
MY WEBSITE:
http://solitairethahalo.com/
You should look deeper into the inability to use Javascript. Which host are you using?
If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.
Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.
Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)
$('#myModal').modal(options)
You can find the bootstrap documentation here http://twitter.github.com/bootstrap
hope it helps!
I inherited a webpage to manage at work. I needed to add a new button so simply edited the existing jpeg to include the button and added a hyperlink to the jpg to open the link.
In Chrome, Firefox etc. all is well but now I get a weird formatting on IE.
I am NOT a web developer and am perplexed.
Thank you in advance for your help and advice.
The website is www.kimberleyjackson.com.
Sincerely,
Jason
That page is not really HTML, it's using Word-generated VML which as you see is ancient and deprecated technique.
The only thing I can suggest is to rewrite the page using "pure" HTML without all this fancy and deprecated stuff.
As you're not a web developer I fear you'll have to hire one - web page should be developed by web developer, not by document processing software.
Like above people have said, this is not going to be an easy page to maintain. That being said... is your new image the same size as the old image? If not, that may be causing misalignment. What changes exactly did you make?