After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:
<!doctype html>
<html>
<head>
<style type="text/css">
#fold
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
</style>
</head>
<body>
<div id="fold">
</div>
<div id="features">
</div>
</body>
</html>
When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.
This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.
So, am I going nuts or is anybody else getting this? Any idea how to work around it?
It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.
The quick answer - add a negative margin to one of your elements. See this JSFiddle.
The relevant portion is this:
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
margin-top: -2px;
}
You can target this using media queries.
Related
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.)
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
So my problem is why does it do that? I tried everything including 'display: block', not using 'position: absolute' (Which worked but i don't know how to flush it without this), and even 'position: fixed' (Same thing as absolute).
Can anyone tell me why it does that? I do know that 'absolute' destroys your document NORMAL flow but I thought it would still respond to display: blocks? Why is it not listening?
EXTRA:
If possible could anyone link me to any good html and css positioning tutorials? I've done about a good 100+ queries of search on google and could not find any that explains the 'deep core' of how css works.
ANSWER:
Why does this work?
CSS:
#font-face {
font-family: Clash;
src: url(supercell.ttf);
}
body, html {
margin: 0;
padding: 0;
}
#navContainer {
background-color: #3a5795;
width: 100%;
float: left;
}
#contentContainer {
display: block;
clear: both;
}
#navHeader {
font-family: Clash;
color: #ffd700;
}
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
Problem with this:
Whenever I try to put a navigation bar it makes the entire container enlarge which I do not like.
Question for this:
When I type 'float: left' it expands up top and bottom doing the effect I want it to. Which is a bit odd to me as I thought float: left only moves to the left. Why does it expand up when I do float: left? And this just emphasizes the fact that I do not understand 'css' at it's 'deepest'.
I did not completely understand what you were asking (probably because it's pretty late) but I played around with your code a bit. Here is what I can tell you (if I'm wrong hopefully someone will correct me):
Browsers have default values for elements. The reason your container gets larger when you use float: left is because it is moved outside of the document flow. The default padding and margin value on the h1 element are what enlarges the container. (Notice that the asd outside of the nav container doesn't seem to move. This is because of the margin on the h1 element.)
The same explanation goes to why your nav container grows when you try to put a navigation bar into the container. If you are trying to make a horizontal navigation bar, try using display: inline-block on the h1, ul, and li elements. This will make them readable from left to right. (Hopefully this is what you were trying to do.)
As for web tutorials. Try the following:
w3schools --> A great website for learning about web development.
Treehouse Web Tutorials --> Sign up for their free 14 trial and go into their front-end web track. you will learn ALOT.
I'd like to apologize if I gave a pretty bad response. Hopefully this could be of help to you in some way!
I have a website that is here: http://www.southwoldholidayhomes.com/ and as you may see there is a ~25px gap at the top of the page before the content begins.
The original code / layout has been inherited from the previous web design company, and is not up to my standard but works well enough, aside from this issue.
I want to reduce this top-of-page gap, but I can't find what is declaring it.
I have set rules in place on the body / html elements to give margin/padding of zero.
I have viewed various similar questions on SO which all seem to state it is setting of the margin/padding as per point one. I do not see that this is the cause, in this case.
FireBug can not select that area of the screen but does confirm my DIV, Body and HTML elements have padding/margin of zero.
The Gap is cross browser appearing on Chrome, Firefox and IE (so it's not a firebug / firefox specific issue)
I have removed various hidden elements such as <script> for google analytics at the top of the page and <div> for microdata content at the top of the page, but these do not change this layout issue.
Below is the CSS and HTML layout in a slightly simplified form. The page layout does use lightbox but that CSS does not appear to interfere with the page layout CSS which is in a single file.
CSS
html {
margin: 0 !important; ///used for problem solving, not on original.
}
body {
font-family: 'Source Sans Pro', sans-serif;
margin:0;
padding: 0;
color: #111F35;
font-size: 16px;
font-weight:400;
/*line-height: 1.4;*/
background-color: #BACDC7;
}
.containX, .container {
width: 61.875em;
max-width:990px;
background: #FFF;
margin:0 auto; ///used for problem solving, not on original.
padding: 0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
...
</head>
<body>
** GAP APPEAR HERE **
<div class="containX" id="container">
<script type="text/javascript">
/** Google analytics stuff only ***/
</script>
<div itemscope itemtype="http://schema.org/LocalBusiness" style="display:none;">
<span itemprop="image">http://www.southwoldluxuryholidayhomes.co.uk/images/head1.jpg</span>
<span itemprop="name">Far View Holiday Homes Southwold</span>
<span itemprop="description">Far View are a high quality 4 star experience, with a Gold Award from Visit England. These Self-catering apartments overlook Southwold Common, on the Suffolk Heritage Coast.</span>
</div>
<div class="header" >
EDIT:
I knew it was something silly that I missed, but for future readers - check the top-margin CSS of all lower page elements!!
If you inspect with Chrome dev tools, you can see that there is margin being applied to the h1 in the .header. Removing that margin fixed it for me.
Put this in your CSS:
.header h1 {
margin-top: 0;
}
This is being caused by the H1 in the header. To fix,
.header h1 {
margin-top:0;
}
The h1 tag inside immediately inside of your header div has a margin top of 1.em... This is what is pushing your content down
style rule margin-top: 0.6em; for selector .header h1 at http://www.southwoldholidayhomes.com/css/stylesdw2.css line 73
This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
that is because you mix up percent & em in the position.
For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block, and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera