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;
}
Related
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/.
So, I have an image that I sliced up in photoshop and want to add into a that is centered (with dreamweaver).
As the picture is 1024px wide and 768px high, I've created a box of that size, setting margins to auto.
The in itself is getting centered just fine, and I've pasted the code of the image in there... but the image itself is not getting centered at all ! It stays on the top-left of my webpage !!
I don't exactly understand what I'm doing wrong, so if anybody here as an idea about how to fix this, it would be very useful !
Thanks in advance :)
As others have said, without seeing your code, it's difficult to envisage what's happening. However, it's important to realize that HTML treats images as inline elements. In order to centre an image with CSS, you need to set its display property to block. For example:
img.centered {
display: block;
margin: 0 auto;
}
As long as your tag has a declared width, just apply the centered class to the image, and it will be centered inside its parent element.
For more details, see my article Centering web pages and other elements with CSS.
I have a layout that should have a sidebar on the right hand side of the content area.
The sidebar should display 100% height of its container (#content), but for an unknown reason this content area doesn't have any height, therefore the sidebar isn't appearing.
Any help is appreciated.
Thanks in advance,
Tom
Here's my code:
http://jsfiddle.net/tomperkins/G4f6u/
You are using height: 100% for all elements surrounding it, so it is inheriting the size from the html element. As it doesn't have any size specified, neither does any of the children relying on it.
Use this to make the html and body element fill the window:
html, body { height: 100%; }
I made a few changes dealing with the positioning of the sidebar - which I changed to absolute and added a min-height so that if the contents of it were empty it would still be visible.
Link
Not sure if this is what you were looking for - but it might help.
Set static height on your .content (in px) and you will see the sidebar
Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".
You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!
Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.
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?