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.
Related
Can anyone please point me out, or name some tecnhiques that may exist in order to achieve this effect, on a properly way:
Like this:
and again:
As you may notice, the point is to connect both lines. Some of those lines come from text boxes, that, since we wish to properly use EM unit for font-size, the box around the text, may change.
I have never done this before, I would appreciate any point outs, in order to investigate this "effect" further please.
Thanks in advance.
It doesn't matter if the fonts in the text boxes are in EM. If the font size change, the text boxes size will change, but that it doesn't mean that the space between them also has to change (it could has a fixed height -the background height-).
Here's a really basic example (try changing the body font-size):
<html>
<head>
<style>
body { font-size: 12px;}
.text { border: 1px solid #999; padding: 15px; font-size:1em; }
.line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; }
</style>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="line"></div>
<div class="text">
Eum, quis consequuntur culpa ex eius totam nemo.
</div>
</body>
</html>
If you do want the space between boxes height changing if the font-size change, you should set it height to EM and use a background images that's, lets say, doubled the container original height (so when the height change, more background it's revealed). You can see this changing height: 50px; to height: 7em; on the .line {} rule (the example image I've used it higher than the container).
This a really basic example. The markup depends on the design. If you need something more accurate (like: you need that the line starts and ends in specific spot), you should probably use absolute/relative positions.
I'm trying to adjust a CSS page layout using min-width and max-width. To simplify the problem, I made this test page. I'm trying it out in the latest versions of Firefox and Chrome with the same results.
<!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">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
div{float: left; max-width: 400px; min-width: 200px;}
div.a{background: orange;}
div.b{background: gray;}
</style>
</head>
<body>
<div class="a">
(Giant block of filler text here)
</div>
<div class="b">
(Giant block of filler text here)
</div>
</body>
</html>
Here's what I expect to happen:
With the browser maximized, the divs sit side by side, each 400px wide: their maximum width
Shrink the browser window, and they both shrink to 200px: their minimum width
Further shrinking the browser has no effect on them
Here's what actually happens, starting at step 2:
Shrink the browser window, and as soon as they can't sit side-by-side at their max width, the second div drops below the first
Further shrinking the browser makes them get narrower and narrower, as small as I can make the window
So here's are my questions:
What does max-width mean if the element will sooner hop down in the layout than go lower than its maximum width?
What does min-width mean if the element will happily get narrower than that if the browser window keeps shrinking?
Is there any way to achieve what I want: have these elements sit side-by-side, happily shrinking until they reach 200px each, and only then adjust the layout so that the second one drops down?
And of course...
What am I doing wrong?
The reason they're "dropping down" is due to the changing size of their parent element (in this case body). Put a wrapper div around them with a width of 400 pixels or more and you can keep them sitting side-by-side.
I think (and this is just from my own personal experience), that max-width applies to the content inside the div. So if there was only 1 word inside the div, it would be 200px wide but if there were 300 words in a div, the width would be 400px wide.
I think there is a way to do what you want to do. This article might relate to it:
http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/
Good luck.
To answer at least a bit:
min-width really is about when the browser should show a horizontal scroll bar for the page.
Whilst experimenting floats only really work well when they have a width set, so I'd use a parent div with a min and max width set and add width: 50% to the child divs. This solves all your problems apart from the divs changing layout. For this I'd probably refer to javascript.
<!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">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
div.cont {max-width: 700px; min-width: 400px;}
div.a, div.b {float: left; width: 50%; }
div.a{background: orange;}
div.b{background: gray;}
</style>
</head>
<body>
<div class="cont">
<div class="a">
Morbi malesuada nulla nec purus convallis consequat...
</div>
<div class="b">
Vivamus id mollis quam. Morbi ac commodo nulla...
</div>
</div>
</body>
</html>
I have a bunch of child <div>'s of variable width, which I want to right-align within a parent . I also want the parent <div> to be no wider than it needs to be to contain the children. (I don't know in advance how wide the children will be -- they'll contain dynamically generated content.)
Here's an example that works correctly in IE 8.0 but not in Firefox 3.5 (child <div>'s aren't right-aligned):
<!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 type="text/css">
#parentDiv{float:left; text-align:right; background-color: gray;}
.childDiv{clear:both; border: 1px solid black; background-color: white;}
</style>
</head>
<body>
<div id="parentDiv">
<div class="childDiv" style="width: 25px"> </div>
<div class="childDiv" style="width: 50px"> </div>
<div class="childDiv" style="width: 100px"> </div>
</div>
</body>
</html>
If I add float:right to the childDiv's CSS, then it works in Firefox 3.5 but not in IE 8.0 (parentDiv's width is no longer determined from the width of its children).
Is there a way I can get the desired behavior in all major browsers?
UPDATE: Apparently the adding float:right to the child divs only produces the error in IE when I'm hosting the page in my IIS localhost. (Which is what I was originally doing.) Perhaps this is an issue with some IIS setting? I'm running IIS 6.0
UPDATE #2: So it turns out IIS 6 was causing the page to load in IE7 Standards mode. So the above code (with float:right added to the child divs) works for IE8 and Firefox, but apparently not for IE7.
I guess that makes the question: Is there a simple way to make this work in IE7? (Besides just using a conditional comment or CSS hack to load a different stylesheet in IE7, I mean.)
Edited Jan 21, 2010 # 21:00 MST : You need to float the parent div to the right. Originally I also floated the child divs right, but this caused trouble in IE7. If you have Firebug, take a look at this test page, which has the result you're after. I tested in Firefox 3.5, IE7, IE8, Chrome, and Safari 4.
Here is the relevant CSS and HTML (I added some margin/padding and background colors so you can more easily see the effect):
<style type="text/css">
#parent {
margin:0;
background:#ccc;
float:right;
padding:20px;
}
#parent div {
background:#eee;
margin:0 0 20px;
text-align:right;
}
</style>
...
<div id="parent">
<div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div>
<div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div>
<div>Lorem ipsum dolor sit amdolor.</div>
</div>
My guess as to why the original didn't work is that IE7 has a number of documented bugs (see here for a list, which includes links to several float bugs). If you float both the parent and child elements to the right, you get the desired results in IE8 and other modern browsers, but in IE7 the parent's width won't collapse to the width of the widest child (enter mischievous bug).
IE7 behaves as expected if you float both the parent and child elements to the left, however (but this isn't what you were after).
Have you tried floating all the child divs to the right, then adding a separate footer with width:%100 and clear:both? I believe this will make IE properly scale the parent as it will have an element within it that is the proper width as well as in the document flow (floated objects are removed from the flow.) You may require display:inline on the clear as well.
Try adding position: relative; to the parent and float: right; to the children
You need position: relative; on the parent, and most importantly, you need to clear those floats.
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
I am sure sure if this is even possible due to the nature of CSS and being cascading, but I will try anyway.
I am creating a Terms and Conditions box which will contain some key elements that the user will select. Since the T&C's will have form components (radio buttons, check boxes). I don't really want to go through the trouble of putting it into an IFrame and getting the user input that way.
I figured using a with the overflow: auto property added, I could create an scrolling box with the T&C's and have the user select their options that way.
Well, because the T&C's have some mark up which would be directly affected by the sites css, I need to figure out a way to have this div not use the main CSS of the site.
Here is some sample code which would be similar to the approach I am trying:
<html>
<head>
<style>
div
{
border: solid 1px #000;
}
div small
{
font-size: 17pt;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 500px; height: 300px;">
<small>This is small text</small>
<div>
<small>This is small text</small>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla.
</div>
</div>
</body>
</html>
The result of this is a pretty little black box with some text and then a sub box with more text and the key item in here is the text wrapped in <small/>.
Is there a way to have anything under a certain div NOT inherit the CSS? Maybe I need to take a completely different approach with this.
Thought? Ideas? Suggestions?
Thanks in advance!
Instead of working directly with tag names, keep two sets of classes ("inner" and "outer") and work with those.
So you can have a div.inner definition, and a div.outer definition, and work on them separately. The inner one would have to explicitly undo the settings outer has, though.
Something like
<div class="outer">
<div class="outer">Some content. <small>Small text.</small></div>
<div class="inner container">
<small>Blah blah blah</small>
More content
</div>
</div>
And in your CSS define whatever you need,
div.outer {
border: 1px solid black;
}
div.outer small {
font: 17pt;
}
div.inner {
border: none;
}
div.inner small {
font: 15pt;
}
div.container {
overflow: auto;
width: 500px;
height: 300px;
}
don't think there is a way to not inherit css. i think the only way is to 'reset' all the styles set on its parents explicitly. see eg http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ for a list of default properties.
There is, as second notes, no way to inherently prevent the cascade of styles, it's the cascade that defines CSS after all. So you are reduced to using the .inner and .outer approach that Welbog suggested.
So you're reduced to defining your styles for the main document as you normally would. However to override those styles for the same elements under the T&C div you would have to explicitly override/re-style. You could use two stylesheets to retain clarity, but you'd have to remember, in the t_and_c.css to explicitly preface every declaration with the id of the enclosing div, for example:
#t&c p {...}
#t&c a:link,
#t&c a:visited {...}