CSS - border-width issue in Safari + Opera [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My top navigation is short by 2 pixels, but only in Safari and Opera.
http://orbitprint.com/canvas/
The ul has a box-shadow, so you can see that the last li is short. I can't figure out why for the life of me!
Is anyone able to throw some light on this for me please?

Well you use percentages in a pixel layout. Your Panel is 969px wide and 8Buttons with 12,5 percent (=> 969/8 = 121.125px) which have to fit into a natural numbered pixel. So the best would be to use display: table for the menu and display: table-cell for the buttons. That should split the given space as evenly as possible.

Related

Responsive design and margins [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?
You have a negative margin on #page-header of -16px which is pulling the links back up...
Float your logo to force margin-bottom to work or use padding-bottom instead.

How to make a curved edge container in css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is it possible to create those "curved edge text containers" from css without setting any image as background ? Can anyone give me an example or point me to some website that uses something similar?
Thanks !
You can use CSS3's border-radius property to add rounded corners.
div {
border: 2px solid;
border-radius: 25px;
}
For more advanced shapes you will need to use CSS's 2d transformations.
The picture above can likely with a combination of border-radius, skew, and background-image.

Css Chrome zoom breaks layout [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
zooming in on chrome dispositions elements by >= 1px
yeah, by zooming in on divs which are a set size, you're not guarenteed to get a fixed size back from zooming in on them, and your layout must be very tight and unforgiving if your layout breaks

Margin right ignored in bourbon neat? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
http://cdpn.io/ezIxj
I'm working on a portfolio site and would like each project box to span 4 columns on all layout sizes. Their width seems to be correct based on the column grid shown. But why do the right margins get ignored by the browser??
Because .project is indeed the last child in .project-container div.
I'm not massively familiar with Burbon - just switched those ( .project and .project-container ) classes around
so now .project:last-child properly applies to the last-child
Have a look: http://codepen.io/VarinderS/pen/kwgms

SVG Circle vs HTML border-radius 50% [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am writing a mobile/web app which has coloured clickable and movable circles.
I am aware of the fact that I can draw them in two ways:
A div using border-radius
A <circle> in a <svg>
Now considering the fact that with svg I can take advantage of doing cool animations, why one over the other?
It seems to depend on what you're going to do with the circles.
If they're just buttons for a link, stick with a div, But if you're going to do all sorts of animation or create a game, I might go with SVG as it's more flexible but not supported by some old or mobile browsers.
I will update this answer with more info if you answer my question comment.

Resources