Given this little fiddle: http://jsfiddle.net/5Sw3h/8/
I have a navigation panel to the left, a content panel to the center and to give a little space on the right a panel there as well. These are placed using "display: table, display: table-cell" semantics.
I am currently experiencing that putting content in the left panel it seems to push the content in the content panel down by some, mostly for the image in there. However it seems to pus the content down a little in general.
I have tried things as setting padding to 0 on quite a few elements (as I first thought it was that), then I have tried vertical alignment on the content box, some relative positioning defining "top". But nothing has really helped...
I know I must have overlooked some obvious thing, just can't find it.
Can anyone help me find what I am missing?
Where you have display: table-cell, add vertical-align: top.
The initial value of vertical-align is baseline, which is causing the misalignment.
thirtydot already provided a great answer. However, you will face a new problem in Safari and Opera so you better be sure you have set the width to all table-cell elements. Another issue is the display table/table-cell support in IE 6/7 where you can use a HTC script written by Tanalin here http://tanalin.com/en/projects/display-table-htc/.
Related
Having an issue with content with floated images and text that is now deep inside a flex container (wasn't in previous site). See here for example: https://m2.alocalprinter.shop/products/flyers-leaflets/flyer-printing
Scroll down to the description below the products. The floated icons next to the text should be 60x60px with 20px right padding and variable bottom padding. But they are rendered at 40x40px. If I increase image width to 80px then it renders at 60px. For whatever reason flex is setting the image width to width minus padding. Only way I have found to correct this is to switch from padding to margin then it behaves as expected. For example, first icon using margin instead of padding:
Problem is that would require us to go through all the content to make this change. I've tried to reproduce this on CodePen but with a simple layout it doesn't happen. Must be something to do with the more complex layout of a real page. I've tried everything I can think of and have found but nothing other than using margin instead of padding fixes it.
Can anyone see a way to fix this flex bug with CSS rather then having to change all the content to workaround it?
Yes there are better ways to lay out the content but what's been done is what worked perfectly well before and suits the skills of staff that manage the content day-to-day.
#Adam Because there is box-sizing property applied by default. So in this case you can initialize image box-sizing: initial; by adding css for images.
so this will help you.
.category-below-description img {
box-sizing: initial;
}
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
here is the layout
http://timsegreto.com/cssmock/mock.html
i need the background image to scroll concordant with the text block in the right column.
ive tried many different ways with no success.
any ideas would greatly appreciated.
not sure if its possible or what t research to make it work.
thanks!
It seems to me that you have fixed positioning on the wrong element. Try making #framecontent position fixed and remove it from #maincontent.
EDIT It's 'quirks' mode that's causing you IE issues. Get rid of the:
<!--Force IE6 into quirks mode with this comment tag-->
from the beginning of your html. I'm sure this is supposed to be solving other cross-browser issues but it's ruining fixed positioning.
Have you adding an extra div and setting the background image on that instead of on the body? You could absolutely position this extra div in the body with top: 0 - it would scroll with the page then...
not sure if thats what you're looking for exactly...
Problem part 1: Basically I have the age-old IE problem of overflow: hidden; not working in IE. The fix (which does work, admittedly) is to also add "position: relative;" to the element/parent; however this causes a problem for me. Firstly I want to know if there's another way without appending position relative.
If this is the only solution though, I'll outline the problem it causes:
Problem part 1b: I'm using jquery 1.4.2 and jquery ui 1.8.4. The concept is basically for the user to pick up a card (draggable li item) from the pile (ul surrounded by div) and place it into the appropriate category (initially empty ul items). Because positioning each card on top one another in the pile with css with position: absolute; would cause problems with the interaction, I've let them all display one after eachother in a column and used a div of set height and width with overflow: hidden to obscure the rest of the cards instead. Works great in FF, but in IE doesn't work due to the overflow: hidden bug. If I put in position: relative, for both browsers the z-index of the card when it is dragged appears to be behind everything outside of its parent div. I've tried changing the z-index on every element on the page to specify the order, but this appears to be disregarded entirely. I'm really hoping not to have to get into the jquery to make changes. Any solutions?
Attached are pics which make this wall of text a little clearer. Picture 1 is how it should work and does in FF without position relative. Picture 2 is when position relative is added to the mix. Both pictures show a card being dragged to a position in a new column.
Picture 1: http://plldd.net.au/storage/overflowhidden.jpg
Picture 2 is at the same location and is called positionrelative.jpg
Thanks for any help you can offer.
can you try wrapping it all in another div with position relative? This div surrounding everything instead of the immediate parent.
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?