I have a couple other pages on the website that have no problems with resizing to height using overflow auto.
The thing I have noticed is the pages work fine with one div. The page that is not working has two or more div and also I have tried it with a container but I still get the vertical and horizontal scroll bars.
<div class="content">
<div class="container">
<div class="a">
<div class="left">List Items</div>
<div class="right">List Items</div>
</div>
<div class="b">
This div is a FORM.
</div>
</div>
</div>
When a css works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
made an IE only style sheet and changed the .content to overflow: hidden. also took the width off of a couple of classes to make the content fit correctly as it does already in other browsers.
Related
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
I have a built a site for a New Zealand non-profit. It's based on Bootstrap 3 with responsive features disabled. It's working well... except for the way that the background images for outer divs display on mobile Safari.
Here is an example of the code:
<div class="top">
<div class="container">
<div class="row">
<div class="columns go here">
<p>Content</p>
</div>
</div>
</div>
</div>
.top {
height: 47px;
background-color: #000;
}
But when I view the site using mobile Safari the wrapper div (.top) does not appear to fill the full width of the screen.
Here's the site: http://betterbroadcasting.co.nz/
And here's a screengrab from mobile Safari: https://dl.dropboxusercontent.com/u/35912963/IMG_2746.PNG
I'd really appreciate any insight into what I may be doing wrong here. Thank you.
Do you have a meta viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
Otherwise experiment with changing min-width as suggested in this thread.
i have this example layout using twitter bootstrap:
<div class="container">
<div class="row">
<div class="span8">
<h1> Hello MOBLE WORLD</h1>
</div>
</div>
</div>
they all look the same in all device.
when i put the meta viewport on the section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
on the iphone it looks well different almost as if its cut in half(horrible), i want to know why that happens and what changes and does margins or padding have to do anything with it. thanks
What you want to do is use the fluid grid which basically means using a class of row-fluid instead of row on the wrapper.
I'm stumped. I've got a paragraph on my page that, when clicked, causes some nearby text to shift up when I browse the page with IE8. I've stripped everything out to get a good repro. In my repro case it's actually worse. If I click some other text it will cause the text to shift back down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>IE8 text shift</title>
</head>
<body>
<div style="margin: 100px 0;">margin</div>
<div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
<div>
<!-- This HTML comes from an external system. I cannot remove -->
<!-- the <div style="clear:both;"></div>, which is always included. -->
<p>Click on this first paragraph and the "abc" text jumps up.</p>
<p>Click on this second paragraph and the "abc" text jumps down.</p>
<div style="clear:both;"></div>
<!-- End External HTML -->
</div>
<div>abc</div>
</body>
</html>
I'd happily delete the <div style="clear:both;"></div> except that it is out of my control. Everything outside the area indicated by comments is in my control.
Works fine in chrome and firefox.
Edit: It seems I was wrong about the first paragraph needing to be long. In fact, if it is too long, I lose my repro. I've updated my repro to use a shorter first paragraph.
Edit: It has something to do with the top div's margin. If I add more paragraphs, the shift goes away. But if I then increase the margin on that div, the shift returns.
Update: I confirmed this does not repro in actual ie 8 (had to use my old XP computer). This is an IE9 in IE8 mode issue only. Also, I figured out I am able to fix it by adding style="overflow: hidden; to the parent div of the paragraphs.
This issue is specific to IE9-in-IE8-mode. The solution is to hide the overflow of the parent div.
<body>
<div style="margin: 100px 0;">margin</div>
<div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
<div style="overflow: hidden">
<p>Click on this first paragraph and the "abc" text no longer jumps up.</p>
<p>Click on this second paragraph and the "abc" text no longer jumps down.</p>
<div style="clear:both;"></div>
</div>
<div>abc</div>
</body>