In every browser I've used, except ie8, an absolutely positioned element can be positioned according to the closest parent with relative positioning.
The below code shows two divs inside a table. The top div has position: relative, however, the nested, absolutely positioned element does not respect its boundaries (in ie8, it gets positioned at the bottom of the page instead of the bottom of the parent div).
Does anybody know a fix for this?
<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
<tr>
<td><div id="top"> Div with id="top"
<div id="position_me"> Div with id="position me" </div>
</div>
<div id="bottom"> Div with id="bottom"
<p>Lorem ipsum dolor sit amet.</p>
</div></td>
</tr>
</table>
Declare a doctype. I'd encourage you to use the HTML5 doctype:
<!DOCTYPE html>
Add this:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
It forces IE8 to compute position correctly in quirks mode.
There are many ways to get it:
//zoom: 1;
//writing-mode: tb-rl;
See http://haslayout.net/haslayout
That's becuase you're not using the document type. And IE working in the "quircks" mode.
Try this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
i´d always use the HTML5 doctype, but in my case the only problem was that the parent element needed "position:relative;" specifically set. after that, it worked perfectly fine.
You can also use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This fixed my problem!
Microsoft Says :
In most cases, we recommend that websites use the HTML5 document type
to support the widest variety of established and emerging standards,
as well as the broadest range of web browsers. This example shows how
to specify the HTML5 document type.
For more Info
Related
When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
Why is that?
Here's the code:
<html>
<head>
<style>
div {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="border: 5px solid;width:100px;height:100px">
<div style='border:2px solid green;width:46px;height:46px;float:left'></div>
<div style='border:2px solid
green;width:46px;height:46px;float:right'></div>
<div>
</body>
</html>
Personally, I'd much rather use display: inline-block than much around with floats.
Anyway, the most likely cause of the problem is the empty whitespace between the two <div> elements. It could be shifting the second one down. Try removing it (ie. <div...>...</div><div...>...</div>)
OK I found a solution to the problem.
What you have to do is you have to add the Doctype declaration e.g.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It doesn't seem to be because of the ie box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
As this behaviour would result in smaller elements...
I'm really confused...
I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)
All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.
I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.
replace image with img on your style
Put your "a" and "img" tag inside a div like this
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body, a, head, img
{
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body>
</html>
All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).
In IE6, IE7 and FF2 the .outer div below is stretching out to the right edge of the document. Here is a complete test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.outer { position:absolute; border:1px solid red; }
.outer .floater { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
</body>
As I understand position:absolute, the outer div should be removed from the flow of the document and (without a width specified) should take up the minimal amount of space needed to display its contents. However float:right on any child breaks this.
Expected output (IE8, FF3+, Chrome 2+, Safari 4, Opera 9+):
Actual output (IE6, IE7, FF2):
How do I get the outer div to not stretch? This is only happening in IE6, IE7 and Firefox 2.
Requirements:
.outer cannot have a width set (it must be left as "auto")
.outer must remain absolutely positioned
.floater must remain floated to the right
Update:
I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same:
There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this)
The div from 1) has width="auto"
There is an element inside this dialog that is floated to the right.
See it here. Again, IE6, IE7 and FF2 are the only problematic browsers.
This replicates the conditions inside my application. I tried boiling down the problem to what you see above this Update, but I'm getting the sense that people could use a real-world example where my requirements make sense. I hope I've done this.
Apologies for the negative answer, but I don't think there's a way around this. The CSS implementation for those older browsers is simply incorrect when it comes to the case you've outlined, and I don't believe there's any way to hack around this via other CSS properties within the constraints you've given us. As a limited fix you could in theory set a max-width on the outer div to limit the degree to which it stretches... but unfortunately max-width isn't supported in all of the 'old' browsers mentioned anyway.
I know it's not what you're wanting to hear, but I think you're going to have to bite the bullet and either change the markup or relax your style requirements (e.g. give up on the float).
You need this to stop it overflowing the edge of the page:
body {margin:0;padding:0}
However it will still take up the whole width of the page, it just won't overflow
float should have a width in this case, and from another point of view you should have top:0;left:0; for the positioned element they should not kept like this.
note: this is logic only for the design if you wont the code please ask :)
.outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
.outer .floater { float:right; }
Lorem ipsum
It's really simple, you only must set the overflow and clear properties to every object that has floated childs.
If the parent is also floated, you only need to set your object to float.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
.outer .floater { float:right; }
.outer .floater .child { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum
<span class="child">HI!</span>
</div>
</div>
</body>
If got any questions, just ask!
Regards & GL. ;)
If you change float:right to clear:right, you will get the requested output in your example, but it will not work as expected if you actually have content outside the floater div.
The css2 spec has some information about how a user agent “should” compute width, but reality is not the spec: http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins.
I definitely recommend going with a strict DOCTYPE instead of a transitional one, http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD.
Without specifying a margin for your .outer div, the user agent will determine the width using width: auto, which looks like it varies depending on the user agent.
Why do you not want to specify a width for the parent div?
If you can, specify a width for the parent div, even if it's width: 100%. You may want to also place * { margin: 0; padding: 0; } in the stylesheet to avoid user agent differences in those attributes, especially if you specify width as 100% for .outer.
This may be trivial, but you should be able to shorten the statement .outer .floater to just .floater.
If you need the “shrink-to-fit” effect around the inner floater and need to maintain float-right, then add direction: rtl; to the .floater class; otherwise you should be able to use float-left;
Yeah for absolute positioned elements, width is undefined (as is top and left). Some browsers do elastic table-style width in this case, and some do 100% width, but it's up to the browser. Best to be explicit in this case.
Tables are really the only good way to get elastic width in a cross-browser fashion. A single celled table is just as good as a DIV as long as your remember the cellspacing=0.
<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
<tr><td>Lorem ipsum</td></tr>
</table>
Your .outer div is empty, therefore we get different results. As soon as you add content to it, atleast in my test it seems to work exactly the same (my test was Chrome 3.0 as the 'working as intended', and IE7 as the broken one).
<div class="outer">
<div class="floater">Lorem ipsum</div>
Lorem ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit
</div>
Since you mentioned the .outer div has content, try removing the float div from it and it still gets very similar output.
Edit
To reproduce your code without stretching (understand here that you'll have different problems to deal after you have this working equally, like margins/padding/vertical stretch) you can introduce a relative 'wrapper'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; }
#outer { position: absolute; border:1px solid red; }
#wrapper { position: relative; }
#floater { position: absolute; right:0; border: 1px blue solid; }
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="floater">Lorem ipsumX</div>
</div>
Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
</div>
</body>
Since I see in your working example you're using jquery you could calculate the width of the container first, before floating the floater like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<style>
.outer { position:absolute; border:1px solid red;}
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
<script type="text/javascript">
$(".outer")
.css("width", $(".outer").width());
$(".floater")
.css("float", "right");
</script>
</body>
Putting a width on the outer div makes it behave in all the other browsers
I don't have IE6, IE7, or FF2 to test on, so I'm going to take a stab in the dark on this one. If my memory serves me, you're going to want to float:left on .outer. This will minimize the width of .outer while maintaining your inner div's proportions.
On an ASP.NET GridView, I have a field that prints a string from the database. This data can range from 10 to 100 characters. When it is longer than normal, the field word-wraps the data, making the row take up more vertical space than the others. I want to truncate any data that does not fit on the row, and then have a "..." next to it to indicate there is more. I don't need to allow them to resize, I just don't want any rows of different height. I'm hoping this can be done dynamically on the client-side, for SEO purposes.
See the ActiveWIdgets Grid here, and resize the company name so that it does not fit. You will notice that it does not wrap the contents, but it instead does exactly what I want to do.
How can I apply this technique to an ASP.NET GridView? I assume some Javascript is involved. If that is true, I would prefer to NOT use a library like jQuery (don't ask why -- I am not allowed to use an external dependency for this project).
Table of contents
Illustration of problem
Illustration of one solution
Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div, td
{
width: 100px;
border: solid 1px black;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div>
content content content content content content
</div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
content content content content content content
</td>
</tr>
</tbody>
</table>
</body>
</html>
Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.
Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.
Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and Internet Explorer 7):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td
{
border: solid 1px black;
}
div
{
width: 100px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div>
content content content content content content
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you know your user is using Internet Explorer, you can use the following IE only CSS:
td.nooverflow
{
text-overflow:ellipsis;
}
Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)
Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:
Here's one for Firefox.
Here's another for Firefox
Here's one using jQuery