http://jsfiddle.net/wzew9/
#menu {
width: 1001px; height: 34px;
padding: 0; margin: 0;
background-color: #d9e4ea;
}
#menu ul {
float: left;
padding: 0 20px 0 203px; margin: 0;
list-style: none; line-height: normal;
}
#menu a {
display: block; border: none;
margin: 0 47px 0 0; padding: 5px 9px 4px 9px;
text-decoration: none;
font-size: 18px;
}
As you can see in the fiddle in Chrome the menu container's height is 34px and the ul's is 30px so when I hover the link there's a 4px wide space. However, if I open it in Firefox the ul is 32px wide and I only get 2px space. I tried adjusting padding of every object but with no luck. So why is Firefox stealing my 2 pixels?
Your problem lays in line-height:normal. Both web browsers have different concept of normality :).
Set line height to relative (ie. 1.2) or absolute (ie. 20px) value and rendering will be the same.
Related
I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1. I want a blue circle on the month item on hover.
I'm expecting this:
But instead, I'm getting this:
Why it is oval and not perfectly round. I'm using border-radius: 50% !important.
Here is my datepicker.scss
.ui-monthpicker-month {
border-radius: 50% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
padding: 0px 20px 0 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4;
color: white;
}
Please correct me.
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.
Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%
padding: 0px 20px 0 20px;
Try by removing padding, or if you want that padding then keep same padding for all 4 sides
Please try this one
width: 50px;
height: 50px;
I'm terrible at styling but after making these changes in css:
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
I'm getting this:
but the month name is still somewhat pushed towards top, how to make this in exact mid position?
Try to remove margin-top: 10px; to margin-top: 0;
I'm pretty sure this is fairly easy, but i'm stumped.
I am working on a responsive layout design. Regardless of the size of the page, I always want there to be a 10px margin on the left and a 10px margin on the right. I am able to achieve the 10px margin on the left, but I can't figure out the right margin. How would I do this with css? I can estimate the % width based how much space I want on the right, but obviously as the page size scales so does this margin. How do I always keep margin-right? Here is an example of my code:
form {
width: 100%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
'form' sits inside '#wrap' and '.left' all of which have the same margin-right applied:
#wrap {
width: 95%;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
-moz-box-shadow: 0 0 3px 3px #CCC;
-webkit-box-shadow: 0 0 3px 3px#CCC;
box-shadow: 0 0 3px 3px #CCC;
background-color: #fff;
display: inline-block;
text-align: center;
}
.left {
float: left;
text-align: left;
padding-right: 10px;
padding-left: 18px;
font-weight: lighter;
font-size: 12px;
color: #777777;
padding-top: 10px;
width: 100%;
margin-right: 10px;
}
This will do the magic:
form {
width: auto;
display: block;
margin-left: 10px;
margin-right: 10px;
}
The problem is that the form ends up being 100% the width of its parent container plus the 20px for the two margins.
It would be easier to set the form inside a parent element and put padding on that. e.g.
body{
padding:0px 10px;
}
form {
width: 100%;
display: inline-block;
}
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
I have a page with a header, content, and footer element. The wrapper arround these elements is 70% of the window width. What I'm looking for is a way to set a minimum width for this wrapper. In my first fiddle it shows how it is right now: http://jsfiddle.net/fwqZX/
HTML:
<div class=outerWrapper>
<nav>
<ul>
<li class='active' id=tab1>Test1</li>
<li id=tab2>Test2</li>
<li id=tab3>Test3</li>
</ul>
</nav>
<section class=content id=content>
<div>
sdflnsdfskdjfisahdfosad
</div>
</section>
<footer>Footer</footer>
</div>
CSS:
html {
overflow-y: scroll;
font-family: Trebuchet MS;
color: rgba(57,58,54, 0.8);
text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
font-size: 150%;
}
header, nav, footer{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space: nowrap;
cursor: default;
}
body {
margin: 0;
text-align: center;
background: url('dark_wall.png'), #393A36;
}
.content, footer, nav li {
background-color: #fff;
box-shadow: 0 0 10px -1px #000;
}
.outerWrapper {
width: 70%;
display: inline-block;
min-width: 500px;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
}
nav li {
transition: all 0.2s linear;
padding: 0.8em 0.5em;
display: inline-block;
min-width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
margin-right:10px;
}
nav li:not(.active) {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
background-color:#eee;
cursor: pointer;
}
nav .active {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}
.content {
padding: 1em;
text-align:left;
overflow: hidden;
/*transition: height 0.2s ease-in-out;*/
}
.content div {
transition: all 0.2s ease-in-out;
}
.content .hidden {
opacity: 0;
}
footer {
font-size: 0.8em;
padding: 0.8em;
text-align: left;
margin: 20px 0;
}
In this fiddle it shows how I want it to be: http://jsfiddle.net/gkZL4/
The difference between this is only a min-width value on the .outerWrapper class.
The problem with the second fiddle, is that I have a hard coded min-width value. I would like the minimum width of the .outwrapper to adapt to the width of the navigation(the tabs).
I want to prevent using javascript for this. If it is not possible without, I will use a hard coded min-width value.
Any help with this would be greatly appreciated.
You need to give a min-width in stead of a normal width.
Make it like this:
.outerWrapper {
min-width: 70%;
display: inline-block;
}
else, if still want it to be width:70%; or any size that feets content (width:auto;/* wich is equal to not give width at all */) + margin:auto;
Use display:table instead.
Using display:table will allow you not too mind how many tabs or how much content. The CSS is then , reusable within any similar structure and class names.
demo (no width/width or min-width and 3/4 tabs content wider/smaller)
http://jsfiddle.net/gkZL4/2/
.outerWrapper, .nowidth {
display: table;/*or inline-block*/
margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
width:70%;
}
.minwidth {
min-width:70%;
}
If you think display:table is inapropriate for old browser, you should first watch for display:inline-block .
IE6 applies width as min-width, IE7 will applie width given or full width. (any display:inline-block rules used on block-level element will need to be adapted for those two IES => haslayout with: display:inline; and zoom:1;
You may add a max-width and overflow-x:auto; to #content to avoid it to become to large on width .
see jsFiddle example here
I'm applying padding-top to an li to try to align the text nearer to the bottom. But it's just making the li bigger, even though there seems plenty of room to fit the text.
Any ideas?
<ul>
<li class="padded">x</li>
<li>x</li>
</ul>
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding: 3px 0 0 0;
text-align: center;
}
I get the same results in IE7 and Chrome, not checked any other browser.
The li.padding is growing larger because you have a height of 25px plus a padding-top of 3px.
The you should decrease the height of the li.padding if you want to increase the top-padding, yet have it remain the same height as the plain list item. So to have a 25px high block with 3px padding-top, you should set the height to 22px with a padding of 3px.
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding-top: 3px;
height:22px /* original height (25px) minus padding-top (3px) */
text-align: center;
}