I'm making a page that uses a WYSIWYG editor. Like most editors, it puts everything in "<p>" tags.
This gives a formatting problem when an image has 100% height and width.
The following html shows the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No doc type</title>
<style type="text/css">
/* css reset */
* {
vertical-align: baseline;
font-family: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html{
font-size:100%;
height: 100%;
}
body{
height: 100%;
font-size:62.5%; /* Reduce to 10px base */
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="margin:0;">
<div>
<div style="width: 500px; height: 200px;">
<div>
<div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
<p>
<img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
In firefox, the p tag actually overflows the div. This makes the image at 100% height be more than 100% of the div.
If I remove the doctype the problem is fixed. I don't really understand doctypes, but I think the one I used was a good one (I googled it). I think it's bad not to use one.
Anyone know how to get this to display correctly with a doctype?
Thanks
I'm not sure what else you may be doing with the page, but adjusting the paragraph height will correct the output.
div p{ height: 100%; }
As Zurahn wrote, setting the height of p will solve the problem.
To understand this (and arrive at other variations that might better serve you):
1. The image is natively 311 x 137
2. Because the p has no height, the image can figure out the width, but not the height, of the bounding element (the p).
3. The image therefore becomes as large as the width, and scales the image - creating a height of 219px
4. The p in turn then stretches to fit the image.
5. Giving a height to the p allows the image to know the height it should be getting 100% of. It can then scale the image accordingly.
ouch, that was not written so well:
But now the q is - why doesn't it get the height from its ancestor - the same way that it got the width from the ancestor?
And the answer to that has to do with the way height is mangled by the browser, which in turn has to do with the allowances given by the browser for things overflowing to the height before allowing an overflow to the width.
I think I have the same problem as you. The doctype html adds a spacing at the bottom of the page. Here is a few solutions. You can add one of the attributes to the image.
style="display:block"
add align attribute like align="absmiddle"
add float like style="float:left"
Related
I'm trying to make a list of slide divs that will have content within them, something quite similar to what the Foo Fighter's have going on, on their website: http://www.foofighters.com/us/discography
The main thing I'd like to figure out is how to have each "slide" auto-adjust to be the proper height when the browser is resized. You can check it out yourself on the discography page I linked. Is there a way to accomplish this? I'm assuming it would be a javascript/jquery thing.
It's important to know that to have a 100% height on a block element, all of the parents must also be set to 100% height.
For example, my if html looks like this:
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
The CSS required to make myDiv 100% height would be
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
Notice all of the parents of #myDiv are also set to 100% height. This is the key to achieving 100% dynamic height for block elements.
An example of getting a div to resize to browser window height:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Tested in Chrome, IE9, Firefox and Opera, all running on Windows. IE9 required the DOCTYPE to be specified in order to work correctly, the other browsers didn't seem to care.
JQuery alternative: Set DIV height dynamically based on viewport height
In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
html, body, div {height: 100%; margin: 0; padding: 0; }
#main {
width: 320px;
background:#7C7497;
height : 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>
Q1. Can anyone explain why?
Can anyone explain how to remove it?
Q2. Can anyone explain why there is a cushion of whitespace above the div? Can anyone explain how to remove it?
Add this:
p {margin: 0; }
Your p element has some margin on the top.
Let me recommend using a CSS reset file. I like the YUI one.
According to firebug it is margin in <p>. At least in 3.6 setting margin-top to p solves problem.
p {
margin-top: 0;
}
It's the paragraph.
If you add
p { margin: 0px; padding: 0px }
all gets well, including the scroll bar.
Why the paragraph feels entitled to leave its parent element like that, I'm not entirely sure yet.
A1. You are getting a scroll bar because the div has a size of 100% of i browser window not 100%. Because the div is the same size as the browser window but is shifted down a scroll bar is needed to display the bottom of the div.
A2. The whitespace above the div is the top margin of the p element.
How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?
I was playing with it last night but didnt went too far.
When I went with divs, they overlaped each other or second image was displayed underneath first.
When I went with table, table become wider than screen resulting in vertical scroll bar.
I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.
I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can't apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.
Sorry for my english, if something is not clear, please ask.
Thanks
I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...
I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}