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>
Related
I would like to understand why the img in the first div is moving a little to the left when deselecting "display:none" in the second div.
I am using chrome for my tests
<!doctype html>
<html>
<head>
</head>
<body>
<button onclick="let img=this.parentNode.querySelector('div:nth-of-type(2)>div>img');img.style.display=img.style.display?'':'none'">toggle</button>
<div style="width:100%">
<div class="width:1200px">
<img src="//static.aujardin.info/img/menu/logo-aujardin.png" width="260" height="120" style="margin:0 auto;display:block">
</div>
</div>
<div style="width:100%">
<div style="width:1200px">
<img style="display:none" src="https://static.aujardin.info/cache/th/adb/detox-eau-citron-menthe-600x450.jpg" width="600" height="450"/>
</div>
</div>
</body>
</html>
I am trying to find a solution to avoid this!
Does your browser add a vertical scrollbar when your second image is displayed?
That would be why if so. The first image is set to center itself in the available width, which the scrollbar takes a piece out of.
Thanks to LandarVargan I fixed this problem on my website by adding
body{overflow-y:scroll}
Then the vertical scrollbar is always displayed and so my logo is no more moving when a page is displayed.
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 been messing around with trying to get a sidebar to stay fixed to a center div, and I have it mostly working in Firefox and IE, but for some reason it is not working in Chrome. My issue is that when I resize the window the left sidebar no longer extends to the bottom of the page in chrome. All the code is included below, so you can see what I am seeing in your own browsers.
My question is: why is Chrome acting this way and is there a way for me to fix this? My Chrome version is 28.0.1500.95.
Thanks.
HTML:
<html>
<header>
<link rel="stylesheet" href="test.css"/>
</header>
<body style="margin:0">
<div>
<div class="width main table">
<div class="relative-float-left" style=" width:0px; height: inherit; ">
<div class="relative-float-left sidebar table">
--Some lorem ipsum here--
<br style="clear: both; " />
</div>
</div>
<div class="relative-float-left content">
--Some lorem ipsum here--
</div>
<br style="clear: both; " />
</div>
</div>
</body>
CSS:
.relative-float-left {position:relative; float:left;}
.width {width:33%;}
.table {display:table;height:100%;}
.sidebar {width:30px;right:45px;background-color:yellow;}
.content {margin-left: 10px; width: 95%; background-color: orange;}
.main {background-color:blue; width:50%; margin:auto;}
Edit: I want the center div to dynamically size with the sidebar to be fixed. Content inside the sidebar can't be clipped and I want any content that can't fit onto the page to be pushed down and make the page bigger (thus I do not want to use inner scrolling for the content (orange) div. Sorry for the messy code, it was just easier to test out a proof of concept.
I have also rewritten the code to give it a stylesheet for easier readability. I would really like this answered as I have no idea why this is happening. It may have something to do with this answer.
You have <header> in your source instead of <head>. This causes the document to be invalid, not because you can't have a header in that position - the browser automatically inserts a <body> start tag there and then puts the header inside it - but because there is a <link> in it which should be in the head, not in the body. And then there is a <body> start tag while the body is already open, which is disallowed too.
Edit: I see you edited your comment now, so does that mean you no longer believe this is the cause of the problems?
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.
The HTML code below consistently results in TEXT A and TEXTB not being horizontally aligned but removing <div style="display:none;"> </div> fixes the alignment. I discovered that using div elements instead of p elements fixing this issue, but am wondering what is actually going on. I saw this behavior in in Opera, Firefox, IE (IE actually puts TEXTB on a separate line), and Chrome.
My expectation was that a div with display:none would not have any impact on formatting.
<html>
<body>
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A<div style="display:none;"> </div>
</p>
<p style="float:left;">
TEXTB
</p>
</div>
</body>
</html>
div is not a valid child of p, so the browser applies error correction to the HTML to end up with this:
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A</p><div style="display:none;"> </div>
<p></p>
<p style="float:left;">
TEXTB
</p>
</div>
(HTML taken from Chrome's Inspector)
Note the extra p element.
First off, you can't put a 'div' inside a 'p'. So use a 'span' instead and see what happens