There is an 8px margin on my body element that I don't want to have there because it makes the navigation look a bit strange. I can set the margin-top to be 0 pixels, or set a negative 8 px margin on the navigation, which is better and why does Susy have this in the template anyway?
This is not actually related to Susy at all. Susy does not apply any 8px margin to the body, but most browsers do by default. You can use a reset ("#import "compass/reset";" would be one way), or simply override the margin setting on the body by hand. I would not use negative margins to fix it, unless you really want 8px margins everywhere else.
Related
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I was really inspired by the layout of this site http://sassandcompass.com/ which is said to be using Susy and I want to make the layout for my new website with the same idea. What I want to have is a layout which spans fully across the browser width but also at the same time stays responsive. I used 'fluid' container style in Susy but I don't know how to maintain the fixed gutter width. Here is my settings:
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$container-style: fluid;
$tablet: 8;
$desktop: 12;
Could you please tell me what's wrong with my settings and what possible settings that site is using?
Thank you!
The site you linked to does not maintain a fixed gutter width. Susy 1 doesn't have any support for that, but Susy 2 (currently in alpha) does. You might be able to fake it in Susy 1 by setting gutters to 0, applying border-box box-sizing to all your grid elements, and then adding you gutters manually as padding.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have added CSS box-shadow to <img> in a blog post. The imgs have max-width:100% set so that they fill the column when it is resized.
The shadow spills out into margins due to box-shadow rendering outside of border in the CSS box model. I want to give the images some extra margin so that the shadow sits inside of the column. However if I use margin this will make the imgs wider than the column.
Is there a nice way to make the shadow sit inside without affecting the width as above?
Thought of wrapping in another element but it's a shame to do that.
If I had used solid borders I could have used box-sizing:border-box; to achieve this but it doesn't have any bearing on box-shadow?
How about max-width 98% or alightly lower and then the shadow should be just inside?
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #page to 0.
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.
For fixing this you could set a overflow:hidden to #iframe
I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.