Can't figure out the way that the button would be shown the same in all systems and browsers, any help?
the screenshots:
https://www.browserstack.com/screenshots/550281a9fe2a9b7d36614ec53391db509557c4f9
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px; }
<div class='container' id="gavejai">
<button onclick="addfield();" type="button">+</button>
Browsers still have some inconsistencies in css rendering, even same version of browser between different operating systems, make sure you defined ALL the css properties of element, which may be different between them. here's the code:
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px;
/* add these styles */
font-weight: 300;
line-height: 35px; /* must be equal to height property */
display: inline-block;
vertical-align: middle;
}
[edit] I recommend using CSS Reset at the top of your css code which tries to remove this inconsistencies http://html5doctor.com/html-5-reset-stylesheet/
Related
I'm trying to write CSS to get this design
Here's my CSS so far:
.exp {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.exp:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0%;
border-bottom: 1px solid #219b65;
}
HTML:
<h1 class="exp">Experience</h1>
And here's the JSFIDDLE
Any idea how to go about doing this? I did it a few years ago but couldn't get it to work again!
Here's a complete answer for you. Adjust widths to you needs.
.FromTheFounder {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.FromTheFounder:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #219b65;
z-index: 1;
}
.FromTheFounder:after {
content: "";
position: absolute;
width: 300%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #ccc;
}
https://jsfiddle.net/vjhg7mna/
Brett's answer will work perfectly if you know the width of your container, or want the underline to only span a certain width. If you want the underline to fill the available space, you'll need two elements - one for the full-width underline, and the other for the highlighted underline.
This would also be possible with one element using ::after in place of exp-title and setting the content property to "Experience", but that's not very user-friendly.
Note that I've made the underline significantly fatter (5px) so the effect is more obvious.
.exp {
position: relative;
font-style: italic;
border-bottom: 5px solid #ccc;
}
.exp-title {
display: inline-block;
border-bottom: 5px solid #f00;
font-weight: 300;
padding-bottom: 15px;
margin-bottom: -5px;
}
<h1 class="exp">
<span class="exp-title">Experience</span>
</h1>
For what it's worth, another option here is to use a linear-gradient background on a pseudo element, instead of an actual border.
The disadvantage here is that this option doesn't have the flexibility to automatically match the width of any arbitrary length of text in your h1. But then again, if you've got several headers, and you want the highlighted portion of the underline to be the same width for all of them, regardless of text length, this may be the way to go.
.some-container {
position: relative;
padding-bottom: 15px;
}
.exp {
font-weight: 300;
display: inline-block;
margin-bottom: 0;
font-style: italic;
}
.some-container::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0%;
background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}
<div class="some-container">
<h1 class="exp">Experience</h1>
</div>
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
In my project,I use bootstrap and less. Although when I test the template, it look beautiful, but when test it using ieTest, I found something wrong.
The pictures are, from top to bottom, Chrome 22, IE9 and IE6:
I found all I can find, eg "three pixel jog", but I still can't solve it.
here is the html code:
<p class="top-tag">
<span class="floatbutton">
<
>
</span>
down
ask phone
time /
rate
<b>1,10</b>
</p>
here is the css:
p.top-tag {
margin-top: 25px;
font-size: 12px;
width: 100%;
a.down, a.ask-detail {
display: inline-block;
height: 25px;
text-align: center;
line-height: 25px;
border: 1px solid #dddddd;
color: #2f2725;
}
a.down { width: 44px;}
a.ask-detail {
width: 90px;
margin: 0 43px auto 20px;
}
b {
margin-left: 284px;
display: inline-block;
}
span.floatbutton {
float: right;
width: 39px;
//display: inline-block;
overflow: auto;
zoom: 1;
//for the IE6
//---
//_overflow: hidden; zoom: 1;
//---
height: 25px;
margin: 4px -3px auto 0;
a {
display: inline-block;
vertical-align: top;
width: 13px;
height: 13px;
border: 1px solid #ddd;
padding-left: 4px;
padding-bottom: 4px;
}
a.left-button {
float: left;
display: inline;
border-right-style: none;
*margin-top: 1px;
}
}
}
I use the bootstrap.css and css.less at the beginning of the template.
The question is why the pixel under the IE, they can't work. And the IE6 they can't display, and float far.
Thanks!
I have a problem with the Firefox browser. You can see it here. Unminified version of css (using LESS): here.
All browsers display it very well, but Firefox moved the form in the pink lane to the top of the page. Do you know what the problem might be?
Thank you!
Adding
clear:both
on #formPruh will solve this please check if its work fine in all browser
after applying Clear:both on #formPruh
please change margin-top:250px to 55px; in #kategories
See this quick firebug solution shot
try this in your css
#formPruh {
width: 100%;
height: 120px;
form label {
font-weight: bold;
color: white;
}
form table {
position: relative;
margin-left: 60px;
top: 210px; /* changed----------- top: 15px;*/
tr {
height: 40px;
border: 1px solid red;
td.popis {
text-align: right;
padding-left:5px; /* changed----------- padding-left: 30px;*/
}
td.input input, td.input select {
width: 150px;
height: 25px;
padding: 0;
margin: 0;
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: Verdana, Arial, sans-serif;
font-size: 105%;
}
}
}
}
You have to clear your floated DIV (logo, actions, user). Write like this:
#formPruh {
clear: both;
height: 120px;
width: 100%;
}
I am trying to hide one DOM element with CSS (by hovering on its sibling) but it is not working correctly.
In the .cta_call class I have hover effect to change the background-colorbut it is needed to hide the element .cta_telf when the user does that interaction.
Here one example:
.cta {
width: auto;
padding: 0px;
margin: -30px 0px 0px 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf{
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color:red;
position: sticky;
text-align: center;
}
.cta_call{
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf{
visibility: hidden
}
<p class="cta_telf">xxxxxx</p>
<p class="cta_call">¿HABLAMOS?</p>
Any clue what am I doing wrong?
Thank you.
The ~ selector targets subsequent siblings in the markup. You cannot target an element's previous sibling with CSS, see this answer.
However, you could change the order of the markup and then use position, float, display:grid, or similar to move them visually.
An example using position:absolute:
.cta {
position:relative;
padding-top:1em; /* Space for absolute .cta_telf */
}
.cta_telf {
position:absolute;
top:0;
left:0;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
font-size: 12px;
color:red;
text-align: center;
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf {
visibility: hidden;
}
<div class="cta">
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
As you know now, ~ will only target sibling elements after the current one in the HTML flow.
There is no CSS selector to target an element's previous sibling.
Anyway, I suggest you to reorder your elements in the HTML, and use display: flex.
That way, you can use the order property to achieve what you want.
(The order property make it crystal clear to understand!)
Working snippet:
.cta {
display: flex; /* Added */
flex-direction: column; /* Added */
width: auto;
padding: 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf {
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color: red;
position: sticky;
text-align: center;
order: 1; /* Added */
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
order: 2; /* Added */
}
.cta_call:hover {
background-color: red;
color: white
}
.cta_call:hover~.cta_telf {
visibility: hidden
}
<div class="cta"><!-- Added -->
<!-- Changed order below -->
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
Hope it helps.