Consider the following code: http://jsfiddle.net/A98vk/
The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.
The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.
Can anyone please tell me what's the problem with it?
I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.
Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.
There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.
You can add overflow:auto (or hidden) to the .header div and fix the cropping.
See this demo
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'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.
http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/
Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).
How about background-clip: padding-box;?
Demo
i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either
if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck
CSS background fills the area of the border, with the border-color layering over this.
As you have a transparent border, it is displaying the background-color behind it.
With plain HTML/CSS, I'm not sure there is a way around this.
This jsFiddle demostrates this:
http://jsfiddle.net/hq65C/8/
try this:
<span style="background: red">link</span> test test test <br/>
test test test
notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.
I'm encountering something I've never really come across before in IE7. I have a wrapper div with a background image applied to it. This image is supposed to repeat all the way until the end of the wrapper div. In IE7 there seems to be a scrolling issue where if I use the scroll bar to see parts of the page that aren't initially visible, the background image will 'cut off' and not repeat in the last 100px or so. This only happens if I have to scroll to see more content. It's like it doesn't fully load the background image for areas that aren't immediately visible.
What's strange is that if I use the mouse wheel to scroll up and down the page, the background image repeats just fine and as it should. If I use the scroll bar though, it will break randomly (never more than 100px but sometimes just the last 20px, 30, 40 etc).
I've tried the following to trouble shoot so far:
1) Added background color to the div as well. The background color breaks as well so it's not just a background image repeating issue.
2) Added a min-height of 1% to the wrapper div.
3) Added a position: relative to the div. I read somewhere that this fixes a weird IE7 background bug. This didn't help.
Thanks for any help. I'm unsure if there's some hiccup somewhere else in my code that is causing this (which I'll continue to look into) or if it's some well known IE7 issue. Again I just find it odd that using the scroll wheel on a mouse let's the background render as it should. Clicking, holding, and using the scroll bar causes it to break.
EDIT: Here is a link to a screenshot of the horrific problem in action. http://skitch.com/flight/dspeh/ie7bgerror
The top one is with the error. The bottom screen is how it should load.
Another additional thing I noticed: If I minimize the window while it has the broken background and then maximize it again the background image corrects itself.
My guess is that the 3 boxes at the bottom are floating div's. Try this:
#backgroundDiv { overflow:hidden; min-height:100%; height:auto!IMPORTANT; height:100%; }
IE6/7 sometimes bug with min-height. This piece of code will cause IE6/7 to default to 100%... IE sometimes likes to use the last declaration instead of following the !important call; whereas every other browser will use the !important call when displaying the page.
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!