The problems can be seen here: http://www.skicoloradorentals.com/secondary.html
1) the gap below the contentBorderImg
2) contentBorderImg reduces to 69 pixel height instead of 87 (18 px diff = same as gap)
3) the content div doesn't sit over the contentBorderImg even though I assigned a high z-index to it
contentBorder - this is the wrapper/border for the content area with a 1-px border
contentBorderImg - this is the rounded corner image which is displayed over the top part of the wrapper
.content - actual content div that I want to reside over the contentBorderImg
I was able to make the same concept work in the left column. I tried duplicating that code to no avail. I appreciate your help immensely.
Try giving contentBorderImg's
Z-index = -1;
and then for #contentBorder use
border-radius:9px 9px 0px 0px;
I have used border-radius to mold the border as per the rounded corner image.
Related
I have the following fiddle: http://jsfiddle.net/VyXWp/1/
#wizard li {
display: inline;
min-width:100px;
float:left;
}
The second divs width should be calculated based on the text width.
In IE7 and IE8 it is messed up.
For some reason the 'a' element gets the width of the span2 div instead of the text.
Edit:
After more digging i noticed that the problem was not width but float. If i set no width, the float doesn't work. It doesn't limit the width to that of the text.
Edit 2:
Couldn't find any pure css solution that worked and kept the width auto, so in the end i calculate the width with javascript.
The CSS width property takes a fixed parameter when passing precise values, but in terms of percentage, if you set the width of an element to 50% or 100% it will take the percentage of the width its parent element is.
so if you have a div with a width of 500px and p tag inside with a width at 50% the p tag would be 250px, vice versa with a 100%.
i short my suggestion is to make sure that the parent element either has a fixed width or percentage
you might also find this helpful
http://learnlayout.com/percent.html
Couldn't find any pure css solution that worked and kept the width auto, so in the end i calculate the width with javascript for old browsers.
I am allowing users to edit their profile icon,so that the users can adjust their icon to what part of the image to display.
I have a fixed <div> with width 50px and height 50px; .This size will be used when users are editing icon.The image will be larger and users can drag and set what to show.In coding part i had taken width,height,top,left.Top and left is used to determine what to show.Hope you understand that.
My problem arises when the edited icon is shown in the top bar. I had set the width of the div as 30px X 30px. When converting 50px size to 30px i had subtracted 20px from the obtained width so that it fits inside the 30px div as expected by the user.The actual part where what part of the image is to be displayed causes problems, the top and left obtained is for 50px div using the top and left for 30px div the expected part is not displayed as you can guess that.
I want to show the part that is selected by the user.Check this jsfiddle: http://jsfiddle.net/4mDQf/
How can i do that?
Thanks!
I had figured out a solution:
Cut the part to be displayed in 50px and shrink the cut image to 30px using php.
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I have a div width lets say width:900px; height:300px; overflow:hidden;
Into the div there are some images with height:300px and different widths and a small right margin/padding of 10px;
So there will be 2 or more images visible in the holder.
I need 2 buttons which slides the images to the 0 point (left:0;).
So when I press on the next arrow the next image (which can be already be visible for a small part) slides to the left at the 0 point.
I can't find any sliders which works like that :(
EDIT FOUND IT!
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
I just discovered strange behaviour of Firefox.
If I have a table cell of 100px height, and add 20px padding to it - it's total height should become 140px.
All browsers act correctly, Firefox 8.0 ignores the padding:
http://jsfiddle.net/8wDde/
Anyone knowing a fix?
It seems the best cross browser solution may be to set the full height of the table row equal to height and padding of the cell:
tr {height: 140px;}
See: http://jsfiddle.net/8wDde/19/
that is a strange behave. add display:block; can fix the problem. tested in FF8.01 see:
http://jsfiddle.net/8wDde/1/
But I also do not know why?
I searched in https://developer.mozilla.org/en-US/search?q=table+padding, but did not find anything. May be you can also try to search in there.
UPDATE:
http://jsfiddle.net/8wDde/7/
add overflow:hidden to avoid the td change line.
I couldn't find any information about this on Google, so one way to fix it for Firefox would be to use a CSS hack.
#-moz-document url-prefix() {
td{
height:140px !important;
}
}
Obviously, if the height was 200px, then you'd change that to 240px to account for the missing 20px on top and on bottom.
That targets all Firefox versions, I'm not sure if theres a FF8 specific css hack.
You can see this demo here: http://jsfiddle.net/charlescarver/8wDde/2/
Edit: I like Giberno's answer more
This is a fuller description of a couple of comments I made on another question, hopefully a little bit clearer. Note that Opera has the same behaviour as Firefox.
In the diagram above, the total cell area is the dark box, and the text My Text is the content of the td, and it is that that defines the Cell Box (C).
Now, the CSS 2.1 spec says:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells. A 'height'
value of 'auto' for a 'table-row' means the row height used for layout
is MIN. MIN depends on cell box heights and cell box alignment (much
like the calculation of a line box height). ...
In CSS 2.1, the height of a cell box is the minimum height required by
the content. The table cell's 'height' property can influence the
height of the row (see above), but it does not increase the height of
the cell box.
So td { height:100px; } affects the Row Height (R) (it will be at least 100px high) but does not effect the Cell Box (C).
On the other hand, td { padding:20px; } applies to the Cell Box (C), so if the height of (C) + Top Padding + Bottom Padding is less than 100px, the row height is not affected and is still 100px.
If (C) + Top Padding + Bottom Padding is greater that 100px, the row height will expand to accommodate the full height of (C) + Top Padding + Bottom Padding.
Then td { background-color:blue } applies to the full row height (R) and cell width.
You can see this in action at http://jsfiddle.net/Ez7xz/
The final confusing factor is the value of the computed height of the td in Firebug. What seems to be happening here is that it is assuming that the height is the result of content-box box sizing, and reporting the value of R less the top and bottom padding. While this seems odd, it's not obvious what other value it could reasonably report.