I have a chunk of html that is dynamically generated. We show it both directly in a page and embed it into an iframe. The strange thing is the div block shown in two places has different height even through all styles are the same. The code is below and the live result is shown in the codepen(http://codepen.io/anon/pen/bdKVqX). Anybody have ideas why this is happening? much appreciated.
Html content
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
The same content as above, but inject into an iframe
var html = '<style>.height-diff {background-color: green;}</style>
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>';
var doc = window.document;
iframe = doc.createElement("iframe"),
style = iframe.style;
iframe.setAttribute("src", "about:blank");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowFullscreen", "true");
doc.body.appendChild(iframe);
var contentDocument = iframe.contentDocument;
contentDocument.open();
contentDocument.write(html);
contentDocument.close();
UPDATED ANSWER: Your iframe html does not have a <doctype> declared and it is going into quirks mode. See codepen with doctype added. I can't believe I didn't notice that earlier.
This appears to be happening because you have not specified a line-height.
See this codepen with line-height added. This also seems to be a rendering bug. It appears white space is being added before the span in the primary document but not in the iframe. It is strange but Height is calculated correctly if you add other characters around the span or set the span to display:block;. Edit: Not strange, just quirks mode.
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
<br />
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px; display:block;">
<span style="display:block;">Barlett Knit</span>
</span>
</div>
It isn't exact answer, but i found when both element height will be the same. Add some characters (non white characters) directly to div element which you write to iframe.
I don't know why, but in opposite to the div element written by JS, div element in the HTML see characters inside it. Therefore adjust height of element to font-size;. It happen even if there is no direct characters inside.
Related
I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap
There are scads of questions on this, but after 2 hours of looking, I haven't found an answer:
I have a div that has a canvas inside it. (Although I've also tried with just ordinary text).
<div class="gpdialog" style="width: 90%; display: block; position: fixed; left: 23.25px; top: 41.95px;">
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
<h1 class="centered">
Color Scheme Picker
</h1>
<div class="widget_container">
<canvas id="color_picker_canvas" ;="" height="600" width="500"></canvas>
<div class="yui3-g">
<div class="yui3-u-1-1"></div>
</div>
</div>
</div>
</div>
I draw on the canvas, and the drawing extends down below the page. The scrollbar shows up on the right hand side, but isn't activated. This happens in both Chrome and Firefox. (Haven't tried any other browsers.) There is no access to the bottom of the page (where there are buttons). I'm not sure what else to look for.
TIA.
Your syntax is wrong.
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
Should be..
<div id="colorSchemeEditor" ;="" style="overflow :scroll;">
You forgot the semi-colon. But what's up with ;=""?
There are multiple factors here, and I haven't tested all cases but:
(1) The 'overflow: scroll' probably should be in the immediately enclosing div
(2) The div with the scroll needs to have height and width specifiers.
(3) The height and width specifiers need to be IN THE SAME STYLE ELEMENT with the overflow specifier.
Thus:
<div style="height: 300px; width:300px; overflow :scroll;">
But NOT
<div height="300px"; width="300px"; style="overflow: scroll;">
Icon fonts are an increasingly popular alternative to image sprites for embedding icons in webpages.
One capability of images that I can't find an equivalent for is sizing the icon relative to the container element.
With an image, I could do something like:
<div style="width: 200px">
<img style="width: 100%"/>
</div>
but I haven't found any equivalent for glyph icons. Has anyone found a technique for sizing glyphs relative to the container?
This can't be done with CSS font-size, as the inherited size relating to glyphs is the parents font-size, and not it's box width.
It can be done with Javascript as mentioned here.
Matthew Riches put some code on JSFiddle to demonstrate this. I'm adding it here too so SO also has it:
<div id="container" style="width: 200px; background: #cccccc;">
<span id="container">M</span>
</div>
and some js:
$(document).ready(function() {
var fontSize = parseInt($("#container").height())+"px";
$("#container span").css('font-size', fontSize);
});
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.