I am currently prototyping a website using Foundation 5. I have a HTML5 section which contains an image, header and repeated background. This displays fine locally but as soon as I move the site over to my web server everything in the section tag disappears. It appears for a split second then disappears.
<section id="banner">
<div class="row">
<div class="large-12 columns">
<img class="logo" src="img/logo.png" alt="Logo">
<h1>Heading</h1>
</div>
</div>
</section>
Does anybody know why this is occurring? Seems odd that it only happens on the server.
Thanks in advance!
Please check the Stylesheet (CSS file) has been kept in right folder and CSS path is correct. I have used section tag in my own HTML5 Tutorial website and it is working perfectly. You can visit http://www.html5tutorial4u.com and check the source code of home page. I hope that it will help you a bit.
Related
You can see an example on the live website here: http://fryert.uk/dp.php
Essentially the page will jump to an iframe once it loads, and I'd rather it didn't do this, could anyone please help?
The site is using Bootstrap V4.1.3.
I originally thought it was only happening on Google Doc embeds, but this seems to be most/all iframes. I've removed the ones that I can, but have to keep these in place.
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<iframe src="https://xd.adobe.com/embed/6f696869-d9ae-4617-5f01-8f5644bcf23d-1958/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Expected result is that the page loads without scrolling, but it jumps to the last iframe to load.
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
I've started my asp.net WebPages site using the "Starter Site" template. It contains a layout page, _SiteLayout.cshtml, that is referenced in Default.cshtml.
In _SiteLayout, there is this HTML:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"></p>
</div>
It originally had one of the images that "came with" the site instead of "something.png" but since I did not see the original image in the browser when I ran it, I changed it first to ~/Images/orderedList7.png and then to "something.png" in an attempt to raise an err msg or warning. But no! Tolerance, your name is html! (or is it vice-versa?).
At any rate, why am I not seeing the image specified in the layout file when I run the site?
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="~/Images/something.png" /></p>
</div>
Try that, you are using an anchor instead of an image tag.
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.