Many pages on sites I run have localised links in the form of http://www.site.co.uk/index.php#calendar. These work as expected - taking the browser to the calendar part of the web page index.php in IE and Chrome, however the newer versions of Firefox seem to have an issue in that they are only displaying the chosen id area on the page.
For example; I have a page with the following HTML content (assume name is index.php ):
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<meta charset="utf-8">
<title>Control Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="canonical" href="http://www.site.co.uk/avail/index.php" >
<!-- JAVASCRIPTS -->
<script src="/includes/js/jquery-1.11.0.min.js"></script>
<!-- STYLE SHEETS -->
<link rel="stylesheet" href="/includes/css/normalize.css">
<link rel="stylesheet" href="/includes/css/sitewide.css">
<link rel="stylesheet" href="/includes/css/control.css">
</head>
<body>
<main>
<nav>...</nav>
<h1>A Heading</h1>
<section>
<h2>Heading H2 one</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
<section>
<h2><a id='text1'></a>Section 2</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
</main>
</body>
</html>
So, when the page is visited at index.php then the whole page - 2 headers and 6 paragraph blocks - are displayed. When the page is visited with index.php#text1 only the second header and paragraph blocks are displayed on Firefox.
I have noticed this across several different sites on HTML5. Some points:
The rendering of the page only begins at the DOM level the id tag occurs. such as if the id tag occurs in a <section> then only that section and all parent elements are displayed.
This is not effected by the deprecated anchor name attribute.
This is not effected by where or in what element the id tag is positioned.
This effect does not seem to be influenced by CSS/JS base stylers such as normalize.css or bootstrap. There is a minor difference in modernizer where the page loads with the problem but then refreshing the page displays the whole page but does not focus the browser window on the id tag area.
When viewing the site through Firebug the entire site source code is present (but is not displayed), firebug also does not seem to show any display:none; that I have found.
My pages are W3C HTML5 valid according to the Nu-HTML checker linked from W3C validator.
So, to conclude:
After reading this can you tell me how to side step or even solve this issue? Or if there is some syntax mistake I've made that's causing this issue, What can I do to correct this behaviour?
Finally: A test page featuring the problem as it presents itself to me can be found here on a test site page: http://www.walberswick.org.uk/index.php
The problem seems to be with your css. On click you get some weird overflow bug in all browsers. I played for awhile with it and after changing these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
margin-bottom: -2500px;
float: left;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
margin-bottom: -2500px;
float: right;
width: 48%;
}
to these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
display: inline-block;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
display: inline-block;
width: 48%;
vertical-align: top;
}
all worked fine.
A thing to note. Use display: property instead of float: property or flexbox. Make sure to have only one main element per page and include it's role="main".
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
color: #fff;
background-color: #5995DA; /* Blue */
padding: 20px 0;
display: flex;
justify-content: center;
}
.menu {
border: 1px solid #fff;
width: 900px;
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='/css/style.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Aug 19, 2016</div>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</body>
</html>
this is my html it works fine in my browser my biggest issue is my css when i try checking that my code works in my google browser only my html shows up no matter when i do but when i past the code in the stack overflow snippit it works i dont understand it. im still new to coding.
Go the inspect page section and check whether the css file is imported properly.
Right click on the text that is displayed on the web page and click Inspect
Elements Tab
Select the Elements tab as show in the image
On the below Please select the Style Tab. There you can see the CSS style that you used in the css file.(Not the whole will be displayed. Only the HTML used inspect will be displayed.)
Style Tab
Additional note:
style image
If you are seeing like this(check the above image) click that and it will take you the css file. If it's now displaying then check the import of the css file in the tag.
Check the CSS file Name - style.css
and check the page and folder name - **/css/style.css
Please like the answer
You can view the css currently in use by the loaded webpage in the developer tools of your browser by right-click and inspecting the opened page.
You can see what, if any, css file is loaded, experiment with different values, and figure out where to go from there
Case 1: Without initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
I open this page with Chrome on a desktop browser. Then I right click the page and select Inspect. Then I click the mobile icon in the inspector and select Galaxy S5 from the dropdown. I see this:
The same result is reproducible with Chrome on actual mobile phone. The <div> element is not as wide as the page.
Case 2: With initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Here is the output now. The page seems okay when it loads but as we scroll right, we see that the <div> is still not as wide as the entire width of the page.
Output in both cases remain the same even if I add width: 50% to the .header in the CSS.
Question
Why does this issue occur? How can I fix it such that the <div> element is really as wide as the page and the entire long word is visible to the right (it is okay if the user has to scroll right to see the long word)?
You are dealing with overflow here; the element the text is in doesn’t extend its width - so child elements inheriting this width, don’t become wider either.
Solution (or workaround, depending how you want to see it) is to force such long words to break, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
If you check the browser compatibility table further down that page, you’ll see that the value anywhere doesn’t have browser support yet, expect for Firefox 65+ - but for most cases, break-word should do.
(You can also check out the similar property https://developer.mozilla.org/en-US/docs/Web/CSS/word-break Sometimes a combination of both can lead to better results in older browsers.)
Not sure if this is possible or not, my requirement is something like this - I have a web page having three div which are wrapped inside another main div having display:flex so that all the three div can appear adjacent to each other. Now the issue is that in the middle div I am extracting some data from my database which itself contains DIVs. the divs may not be properly closed i:e few might not be closed with /div. So when the data appears on the middle div, the third div sometimes goes out of the flex box causing issue in the layout. Is there any possible way to avoid this ? Hope I am able to explain my issue.
As a rule, we never inject user generated content into a page without properly sanitising it to help prevent security vulnerabilities such as XSS. Please research HTML sanitisation and make sure you're processing this user generated content safely.
With that being said, browsers are quite forgiving of improperly formatted markup and will try their best to render what you give them. So to prevent this user generated content messing with your page you're going to want to isolate these documents from the rest of your page.
Instead of dropping this user generated html directly in the page you could provide it as a srcdoc to an iframe like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>foo</title>
<style type="text/css" media="screen">
.container {
display: flex;
}
.one, .two, .three {
height 200px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.inline {
border: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
</div>
<div class="two">
<iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
</div>
<div class="three">
<iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
</div>
</div>
</body>
</html>
I currently have a responsive image on my website and when I view it on a mobile browser, I get a broken icon (NOTE: viewing on PC in responsive view works!)
HTML:
<div id="headerwrap">
<header class="clearfix">
<div class="container">
<h1><img src="assets/img/headerImage.png"></img></h1>
<p>Welcome to the site!</p>
</div><!-- /container -->
</header>
</div><!-- /headerwrap -->
CSS:
#media (max-width: 979px) {
#headerwrap {
margin-top: -120px;
padding-top:140px;
}
#headerwrap h1 {
font-size: 50px;
line-height: 60px;
letter-spacing: 2px;
}
#headerwrap p {
font-size: 18px;
line-height: 30px;
letter-spacing: 3px;
}
}
#media screen and (max-width: 30.6em) {
.cbp-qtrotator {
font-size: 70%;
}
.cbp-qtrotator img {
width: 80px;
}
}
When I load the page, the image LOADS then after a second or two switches to the broken link. This happens every-time the page is refreshed.
Troubleshooting done so far:
Made sure <meta name="viewport" content="width=device-width, initial-scale=1"> was present
Took the <img> tag out of the <h1> element, still didn't show up. Also moved the image outside of the headerwrap, still nothing
Removed most of the CSS regarding #media (max-width..)
Opened the page on PC, and changed the resolution to the same as my phone, result was that the image DID show up
Viewed the page in Desktop View on my phone, didn't show up.
If anyone can think of something I'm missing here, I'd really appreciate it!
As per #hellojebus the src of the image was being changed by a script I had running in the background.
Rather than the img src showing up as:
<h1><img src="assets/img/headerImage.png"></img></h1>
It loaded as:
<h1><img src="assets/img/headerImage#2x.png"></img></h1>
Resulting in a 404
Thanks again #hellojebus
I've created a HTML page and I'd like to make it responsive.
I've looked at the w3schools but didn't figure out how to make it responsive.
I've just add the line
<meta name=viewport content="width=device-width, initial-scale=1">
but it doesn't make the text responsive. I know I have to add something, but can't figure out what.
Here's my code:
<!doctype html>
<title>Test page</title>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;}
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
</head>
<article>
<h1>This is a test page</h1>
<div>
<p>
Test page that I made for fun. I would like to be able to code. Send me an email (not working)</p>
<p>— Alessio</p>
</div>
</article>
EDIT:
At the moment I'm playing with the line
<meta name=viewport content="width=device-width, initial-scale=1">
Without this line, the entire text fit on a mobile device, but very small. So the page is zoomed out to fit the screen.
With the line, the text is a good size, but it doesn't fit the screen.
I need something so that I can keep the text size, but make it fit depending on the screen dimension.
I don't want to use library. I'd like to write the code directly in the page (if possible).
EDIT 2:
following the suggestion of #elhampour and #gavgrif I've investigated more the bootstrap. I'm doing a course at freecodecamp.com and now I'm understanding more about this suggestion.
At the moment the code is
<!doctype html>
<title>Coming Soon</title>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<div class="container-fluid">
<h1 class="text-primary text-center">We’ll be online soon!</h1>
<img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz">
<p>If you need to you can always contact us, we’ll get back to you shortly!</p>
<p>— LiveTogether Team</p>
</div>
Now I'm looking to make the text responsive
What exactly do you want to add? Comment on my question if the following does not answer your question.
First of all, html pages are already responsive. Your divs will change their size as the page's size changes. Text size cannot be made to fit the screen by default, however you CAN use a library like this: https://plugins.jquery.com/textfill/If you want to, you could have an event in your javascript which will fire when the document's size is changed, or when it is loaded, and it will customize your page for you, based on your input. This would be done by selecting elements individually and setting their .styles.Also, css code can be changed as the page is changed. Look into http://www.w3schools.com/css/css3_mediaqueries.aspGood luck with your project, and have a good day!
You will need to use media queries in your CSS to change the sizings etc in different viewports. The following will set the h1 to a 50px size on screens above 768px and to 30px for screens at or below 768px:
#media (max-width: 768px) {
h1 { font-size: 30px; }
}
#media (min-width: 769px) {
h1 { font-size: 50px; }
}
As mentioned by #elhampour - investigate Bootstrap and then you can change the layout as well as the sizes etc:
<div class="col-sm-6 col-md-4 col-lg-3">
<p>test content 1</p>
</div>
This will display as the full viewport of a mobile (col-xs-), half the width of a small viewport (tablet), a third of a medium viewport (laptop) and a quarter of the larger viewport (descktop screen).