Code:
http://www.webdevout.net/test?0U
Demo:
http://www.webdevout.net/test?0U&raw
This works in most modern browsers (Safari, Chrome, Firefox, IE8/9), but doesn't work in IE7: what gives? I basically want to let the content dictate the size of the container, and I want the header to block display and take up the fill width of the container....
So if you notice, the box on the left has content, and the green box stretches to accommodate it... make sense?
I'm doing text-indent because the green boxes have text in them and are being replaced with a background-image sprite... so that part needs to stay.
Try to style the header with position:absolute and because it is going to be a background image, you can add z-index:999 to the text.
Get rid of the height declaration in your header style. If you want to change the height of the box change your font-size property.
Related
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
I have a list of items, like a menu, where the current item has a background image that is kind of like a big pointer to the right. This background image pointer thing should escape the bounding box of the div it's contained within. Here is a screenshot of how it appears in Chrome and FF, which is as i expected it to appear:
I've set up a jsfiddle with the code, minus the background image thing as I can't be bothered uploading it anywhere. But I've set the background colour so you can see what I'm referring to
The code is here: http://jsfiddle.net/V8TNm/
So in Chrome and FF, the yellow background of the active item will stretch past the grey gradient box. But in IE9, it's cut off.
Any ideas why, and what an easy fix may be?
Simply add position:relative.
#nav_mod_list div.current {
position: relative;
}
http://jsfiddle.net/V8TNm/3/
The selector #nav_mod_list div.current has a width of 210px as well as padding and margin where as the container is 200px. Change the 210 to 200 and remove the margin and padding.
Edit:
You could also just remove width property altogether. That way it will simply extend the width of the container.
I'm creating a web application where I need to do some design tweaks. Please check this one http://jsfiddle.net/rkumarnirmal/5w3FG/9/
When I hover, it shows the border in gray. What I need is I want to fit the border box to fit the width of the text. I tried to set the width:auto but still its not working, showing the border box to the page width size.
How can I do it?
Thanks!
Set text-preview to inline-block:
#text-preview {
display:inline-block;
zoom:1; /* if you need IE7 support */
}
Inline-block will cause the element to render as if inline rather than occupying all of the available horizontal space, but will lets you set inner dimensions and padding as a block element would.
Note that IE7 doesn't support inline-block unless you force the hasLayout property. The easiest way to do that is with zoom:1;.
width:auto on a div translates to width:100% because a div is a block level element.
If you want to have it size to the text you'll need to either use a more appropriate inline tag like a span or depending on the semantic meaning of the data, a definition list (dl).
You can also change the display property of your wrapper div to be inline or inline-block but that is not semantically correct.
I'm using an image which must auto-scale inside a div whose height is defined by the root div.
The scaling is fine in all major browsers, using height: 100% on the image itself.
But it seems that on some browsers, the image container doesn't adapt its width accordingly to its content (the image).
Check by yourself the live demo.
This demo uses an image container with a blue background.
Expected behavior: This background shouldn't display since the container width and height should be the same as its content (the image).
Actual behavior:
On Chrome 11, Safari 5 and IE9, the behavior is as expected.
(source: imgh.us)
On Firefox 3.6/4.0 and Opera 11, the behavior is not as expected: the blue background is displayed.
(source: imgh.us)
What is the root cause of this strong difference between major browsers?
In the case of Firefox, this looks like a bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=653739
You can work around by removing the overflow:hidden unless you actually need it.
Those later browsers interpret inline-block more strictly (correctly).
That is, your element is positioned inline (like a span), but the element's contents are laid out as if the element were a block.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.