I have already asked this question but I didn't get a specific answer. so I thought to ask a simplified version of the question
I am making a website and want to place the div at a specific height. I cannot set the margin-top in px terms as if the browser window re sizes, the div remains at that px. I have specified this in %. if the margin-top is in px, it is fine in all browsers but if it is in % then IE9 IE10 and FF behave crazy.
The code below is very simple with nothing difficult. I even tried reset css but didn't get it right. can anyone please spare few moments and help me in this.
and i am currently loading the page from the harddisk not from the internet.
Thanks
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
div.content {
height:200px;
visibility:visible;
border-style: none;
display: block;
position: fixed;
text-align: center;
z-index: 1;
padding-top: 0px;
border-top: 0px;
padding-bottom: 0px;
border-bottom: 0px;
background-color: #00FFFF;
font-family:Arial,sans-serif;
overflow: auto;
margin-left: 23%;
margin-right:25%;
font-size:150%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</body>
</html>
If you mean by it 'behaves crazy', that the div doesn't adjust dynamically it's position when you change the browser size, the reason is the way you position it.
you have set position to fixed, that means you define the exact position by top, bottom, left, right and not with margins.
HTML:
<div class="wrapper">
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</div>
CSS:
.wrapper {
position:relative;
top:0;
left:0;
width:1020px;
height:760px;
}
.content {
position:absolute;
top: /* you set it */
left: /* you set it */
/* other props */
}
As I noted, the margin-top directive seems to calculate it's percentage from the width of it's parent element. But not so for the top directive. So, simply change:
margin-top: 40%;
To:
top: 40%;
I tried this on Firefox, Chrome and IE8, and they all worked the same.
Related
Consider a page (full source below) where you have:
A containing div, styled so its border is visible.
A contained box, which content can't be made smaller than a certain width. Here we'll use an image for this.
This renders as follows, and as expected the div "contains" the image:
However, if you make the browser window smaller, you get to a point where it is not large enough for the image: part of the image won't be visible, and the browser needs to add a scrollbar. So far so good. However, the div size is still based on the viewport width, and consequently the image gets outside of the div:
Instead, I would like to have the div always be "around" the image, and become wider if containing box can't be made narrower. Interestingly, this is exactly what happens in Quirks mode, here as rendered by IE8:
How can I get, by adding CSS, the exact same result I get in Quirks with IE8, but in standards mode? And for reference, here is the full source of this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Styling */
div { background-color: #999 }
body { font-family: sans-serif }
div { margin: .5em 1em; padding: .5em }
</style>
</head>
<body>
<div>
<img src="http://placekitten.com/g/400/100"/>
</div>
</body>
</html>
Try this:
CSS:
Old answer, Truncated
HTML:
Old answer, Truncated
Demo
EDIT:
After much tinkering, this is what i could come up with:
CSS:
.table {
display:table;
background-color: #999;
width:90%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
margin: .5em 1em;
padding: .5em
}
HTML:
<div class="table">
<div class="row">
<div class="cell">
<img src="http://placekitten.com/g/400/100"/>
</div>
</div>
</div>
Accompanying fiddle: http://fiddle.jshell.net/andresilich/Q4VnF/
I'd go for div { display: table-cell; }
EDIT: I don't think this can be done with the markup as given. You can get close using div { display: table; width: 100%; } but it doesn't like having a margin. If you use two block elements then you can put { display: table; width: 100%; } on the outer element and { display: table-cell; } and the margin, padding and background on the inner element.
With display: inline-block it also works.
I'll jump to an example.
<!DOCTYPE html>
<head>
<title>Transposing div using CSS</title>
<style>
div#wrapper {
}
div#menu {
border:blue solid 1px;
}
div#main {
border:red solid 1px;
}
</style>
</head>
<body>
<p>How do we show the menu div immediately after the content div?</p>
<div id="wrapper">
<div id="menu">Menu</div>
<div id="main">Content</div>
</div>
</body>
</html>
In a browser, the menu div will come first in the flow. Now let's say that I need to change the layout so that "Menu" follows the content div content. How can this be done using CSS only. That means no change to HTML (no user agent detection stuff) and no JavaScript code.
The main CSS technique to position elements is to use the float:right|left attribute. It works well to move elements with respect to their bounding box, but I'm looking at moving an element at the end of its successor element in the normal flow.
And here's the use case. I want a web site to show up optimally on small screen browsers like on an iPhone. The web site currently has the menu at the top and content below, a very common layout but on an iPhone, the real estate is so limited that it would be preferable to have the menu following the main text content.
The solution only has to work with iPhone and Android mobiles (WebKit-based). So no need for taking into account Internet Explorer hacks and such.
If your menu has a fixed height (which most likely it does) you could use the same principles as the sticky footer: apply position relative on the wrapper, and a bottom padding of the same height as the menu. In code:
div#wrapper {
height: 100%;
padding-bottom: 100px;
position: relative;
}
div#menu {
border:blue solid 1px;
position: absolute;
bottom: -2px; /*to offset the border pxs*/
height: 100px;
width: 100%;
}
div#main {
border:red solid 1px;
}
You can view it in action here: http://jsfiddle.net/3ZheQ/
I haven't tried this on mobile phones yet, but I often did this on regular sites. I usually did it so that I wrapped both .menu and .menu_section into the .header div. Then you set some basic margin-top to the .menu div and add position:relative to the .header. Now header is your last relative for .menu and .menu_section.
Now just set position:absolute to the .menu_section, and you can set the top margin to 0. The .menu is going to be offset by the top margin while the .menu_section will be absolutely positioned at top of header.
If the design requires it, you can solve any overlapping with z-indexes (but you're not working for Internet Explorer oldies anyway, so that probably won't bother you).
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"
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'm using css style like this
text-align:center;
its working in IE and doesn't work with Safari..
any suggestions.
thanks,
Centering textual content has as far as I know no specific browser/doctype issues. So it look like that you're trying to center something else than text. If you actually want to center a block element, give it a fixed width (in pixels) and apply margin: 0 auto; on it as well.
Here's an SSCCE
<!doctype html>
<html lang="en">
<head>
<title>SO question 1897444</title>
<style>
#center {
margin: 0 auto; /* top and bottom 0, left and right expanding. */
width: 300px; /* Required to have a reference point to center. */
border: 1px solid black; /* Not required, just presentational. */
}
</style>
</head>
<body>
<div id="center">Centered block element</div>
</body>
</html>
This however won't work in IE in quirks mode. Just ensure that you're using a strict doctype.
It depends on what you are trying to style. You are probably trying to center a block level element like a DIV or UL. In that case, you center using
div {
margin-left:auto;
margin-right:auto;
padding-left:<some fixed size>;
padding-right:<some fixed size>;
width:<some fixed size>;
}
Validating your html and css is the first step to figuring out any rendering issues (even in craptastic browsers like IE 6).
I got the point I made that code:
width: 190px;
padding-left:23px;
height: auto;
text-align: left;
line-height: 18px;
and its working right now
thanks for all trying to help me