Tried this in every major browser (Chrome/Safari/IE/Edge) and Firefox. Works in everything but Firefox where the text gets nudged down.
.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}
<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p> <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
<button class="colour-dark-pnk">Order now</button></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>
What it looks like in FF:
What's even weirder is that the problem disappears as soon 'Inspect Element' is used, meaning it's very hard to see what's going on. Looks like an actual Browser bug?
http://jsfiddle.net/c3bfzLhj/
Change all height:100% to min-height:100%
This is a Firefox bug. I had faced this problem two weeks ago while working on my web app.
Related
I've got an <li> with a custom bullet background-image. Now, I'd like to have the text in the bullet be outside the marker, using the list-item-position: outside in CSS. However, it does not seem to be working. The second line still starts at the start of the container (under the image). My html looks like this:
<ul className={styles.missieTxt}>
<li className={styles.bulletsMissie}>
... lorem ipsum lorem ipsum lorem, {" "}
<span className={styles.focusMissie}>100% </span>lorem
</li>
<li className={styles.bulletsMissie}>
... lorem ipsum <span className={styles.focusMissie}>lorem</span>
, lorem ipsum lorem ipsum
</li>
<li className={styles.bulletsMissie}>
... <span className={styles.focusMissie}>lorem</span> lorem ipsum
<span className={styles.focusMissie}>lorem</span>
</li>
</ul>
the css for this looks like this:
.missieTxt {
display: flex;
flex-direction: column;
}
.bulletsMissie {
list-style-type: none;
position: relative;
font-size: clamp(0.8rem, 1.3vw, 1.5rem);
margin-right: 1rem;
list-style-position: outside;
}
.bulletsMissie::before {
content: "";
display: inline-flex;
height: 20px;
width: clamp(25px, 3vw, 48px);
background-image: url(../images/overOns/bulletsImg.png);
background-repeat: no-repeat;
background-size: 100%;
align-items: center;
margin-right: 0.5rem;
}
.focusMissie {
color: #78c0a8;
font-weight: bold;
}
If screens are smaller, and the text overflows to the second line, it just starts under the image, which I do not want. Does anyone have a solution to this? :(
Thank you in advance!
Try this and see if it works.
.missieTxt {
display: flex;
flex-direction: column;
}
.bulletsMissie {
list-style-type: none;
position: relative;
font-size: clamp(0.8rem, 1.3vw, 1.5rem);
margin-right: 1rem;
list-style-position: outside;
display: block;
padding-left: clamp(25px, 3vw, 48px);
}
.bulletsMissie::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 20px;
width: clamp(25px, 3vw, 48px);
background-image: url(../images/overOns/bulletsImg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.focusMissie {
color: #78c0a8;
font-weight: bold;
}
you might want to consider changing: list-style-type: none;
in .bulletsMissie
to list-style-image: url(../images/overOns/bulletsImg.png);
and the list-item-position: outside, will work.
I have a non-scrolling page with a content div that I want to scrolling dynamic to the length of the list as it grows.
The webpage is scubapolice.com/echo.php
See code below
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 100%;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
<?php include 'menu.html';?>
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
<?php include 'echolist.html';?>
</div>
</div>
</div>
</div>
<?php include 'footer.html';?>
</body>
Problem: I have a scroll bar inside the loadin div but the content still runs below the bottom of the page and I cant actually scroll.
There is no problem with your overflow, the problem is your 'loadin' height,
try this snippet with a fixed height :
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 100px;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
</div>
</div>
</div>
</div>
</body>
If you need to fixed your content then you need to specify height like 500px;
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 500px;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
<?php include 'menu.html';?>
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
<?php include 'echolist.html';?>
</div>
</div>
</div>
</div>
<?php include 'footer.html';?>
</body>
I am having some issues to add a background color in the 3 sections created in html. Could you please have a look and let me know what I am doing wrong with the coding? I can only see the background color when I write in html style="background-color:whatever color". Looks like the CSS is not applying the changes I am trying over and over.
* {
margin: 0px;
padding: 0px;
}
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
header {
border-bottom: 1px solid green;
background-color: #e7e7e7;
}
#logo {
float: left;
margin-top: 20px;
}
nav {
float: right;
margin-top: 20px;
}
nav li {
float: left;
display: inline;
list-decoration: none;
padding: 20px 20px 20px 20px;
}
nav li a {
color: #333333;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
--------- #firstpart {
margin-top: 40px;
height: 300px;
background-color: fuchsia;
}
.cajaslider {
margin-top: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid navy;
height: 400px;
width: 55%;
}
#twitter {
padding-top: 5px;
margin-left: 40px;
float: right;
height: 300px;
width: 38%;
}
#columns {
width: 65%;
}
#secondpart {
padding-top: 20px;
height: 425px;
background-color: #e44d26;
}
#secondpart h3 {
font-size: 20px;
text-align: left;
}
.text {
float: left;
width: 30%;
padding-right: 25px;
text-align: justify;
}
.text a {
text-decoration: none;
color: white;
}
.text1 {
float: left;
width: 30%;
padding-right: 10px;
border-right: 1px solid maroon;
text-decoration: none;
}
.text1 a {
text-decoration: none;
color: white;
}
.text1 p {
text-align: left;
color: white;
}
.text p {
text-align: left;
color: white;
}
.button1 {
padding: 5px;
margin-top: 5px;
border-bottom-color: maroon;
}
#formright {
float: right;
width: 32%;
height: 350px;
padding: 15px 10px 15px 10px;
background-color: #666666;
color: white;
margin-right: -45px;
border-radius: 5%;
border-right: 5%;
}
#entries {
margin-left: 15px;
margin-top: -25px;
}
#entries input[type=name] {
padding: 4px;
height: 25px;
width: 250px;
}
#hr1 {
margin-top: -40px;
}
------- footer {
margin-top: 20px;
}
#socialmedia {
margin-left: 250px;
margin-top: 30px;
}
#socialmedia li {
float: left;
list-style: none;
display: inline;
width: 20%;
padding: 20px 5px 20px 5px;
}
<!------------------------About page--------------------->#aboutsect {
height: 300px;
background-color: yellow;
}
.caja {
margin-top: 20px;
height: 550px;
border-bottom: 1px solid green;
}
#mainimg {
float: left;
width: 35%;
background-color: white;
}
#content {
float: right;
width: 45%;
background-color: white;
}
-------- section h2 {
margin-top: 20px;
margin-bottom: 20px;
}
section .button1 {
margin-top: 20px;
}
.caja2 {
margin-top: 20px;
padding-left: 150px;
margin-bottom: 20px;
}
.person {
float: left;
margin-left: 30px;
width: 30%;
margin-bottom: 40px;
}
section img {
border-radius: 50%;
height: 100px;
width: 100px;
}
section h3 {
font-size: 15px;
margin-left: 10px;
margin-top: 20px;
}
section p.centrado {
font-size: 15px;
margin-left: 5px;
margin-top: 20px;
}
section p {
font-size: 15px;
margin-left: -40px;
margin-top: 20px;
}
------- #clients {
height: 200px;
background-color: yellow;
}
#clients h3 {
margin-top: 60px;
}
#cajaotra {
margin-top: 20px;
height: 200px;
border-bottom: 1px solid green;
margin-left: 150px;
}
.client1 {
margin-top: 30px;
padding: 10px;
margin-right: 70px;
}
------ <!------------------------Service page---------------------!>#services {
height: 300px;
}
#cajafoto {
height: 300px;
border-bottom: 1px solid blue;
}
.equip {
height: 200px;
width: 80%;
margin-left: 100px;
margin-top: 20px;
}
----------------- #fraccion {
height: 400px;
}
#cajaourservices {
margin-top: 50px;
height: 200px;
}
#ourservices {
float: left;
width: 60%;
}
#wantmore {
float: right;
width: 30%;
}
----------------- #serviceimages {
height: 400px;
}
#cajaimagenes {
height: 300px;
margin-top: 30px;
}
.train {
width: 25%;
margin-left: 20px;
padding: 30px;
float: left;
}
<body>
<header>
<div class="container">
<div id="logo">
<a href="http://www.elpais.com">
<img src="bottle2.jpg" title="bottle" height="50" width="50"></a>
<p>Drink Me</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Wines </li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="aboutsect">
<div class="container">
<div class="caja">
<div id="mainimg">
<img src="circle.jpg" alt="the team">
</div>
<aside id="content">
<h2>Title</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button class="button1" type="submit">Read More</button>
</aside>
</div>
</div>
</section>
<section id="meet">
<div class="container">
<h3>MEET THE TEAM</h3>
<hr>
<div class="caja">
<div class="caja2">
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<br>
<br>
<div class="caja2">
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>
<section id="clients">
<div class="container">
<h3>OUR CLIENTS</h3>
<div id="cajaotra">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
</div>
</div>
</section>
<footer>
<div class="container">
<ul id="socialmedia">
<li>Facebook<img src="facebook.png" height="24" width="24"></li>
<li><img src="facebook.png" height="24" width="24">Twitter</li>
<li><img src="facebook.png" height="24" width="24">LinkedIn</li>
</ul>
</div>
</footer>
</body>
Remove all ---- lines and <!-- xxx --> lines from your CSS, as these are not valid CSS and may prevent your CSS from being properly applied. CSS comments usually use the C syntax (/* comment */).
I am working in wordpress on a webpage. I have a box made with css where some text is displayed. What is strange is that I have no
Anyone can see what the poblem may be ?
And why is the space so big, it is bigger than the height of a letter.
code:
<style>
.bottom2 {
display: flex;
flex-direction: column;
}
.bottom1 {
width: 70%;
}
.bottom2 {
width: 30%;
}
.publicationright {
width: 250px;
height: 180px;
border-radius: 25px;
padding: 15px;
background: #559BBC;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
.publicationbottom {
width: 250px;
height: 90px;
border-radius: 25px;
padding: 15px;
background: #769DBD;
margin: 0 auto;
margin-bottom: 5%;
margin-top: 5%;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 0px;
text-decoration: none;
}
.textpub {
color: #365A6B;
font-size: 14px;
}
</style>
<div class="publication">
<div class="bottom2">
<div class="publicationright">
Title!
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<div class="textpub">
Name Surname, Name Surname, Name Surname, Name Surname
</div>
</div>
<div class="publicationright">
Title!
<p>
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<p>
<div class="textpub">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
</div>
You have to remove the default margin of paragraphs, set by browsers by default;
p { margin: 0; }
EDIT I restructured your html (set correct indents), you'll see you actually open up <p> tags, but don't close them. Either remove them, or close them properly on appropriate places.
EDIT 2 As you're using wordpress, most probably wpautop is messing with you. Try to put this in wp-content/themese/YOUR-THEME/functions.php
function my_theme_init() {
remove_filter('the_content', 'wpautop');
}
add_action('init', 'my_theme_init');
NB: if you're not using a child theme you're doing it wrong. So when I say YOUR-THEME above, of course I mean YOUR-CHILD-THEME
How to align image and content inside div under div. tried with float left but not working
Js fiddle link for quick overview
here is the CSS:
.container {
clear: both;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.profile1 {
background-color: #CCF;
}
.profile2 {
background-color: #CFC;
}
.profile3 {
background-color: #FCC;
}
#media only screen and (min-width: 480px) {
.span_1_of_3 {
width: 32.2%;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
}
HTML:
<div class="container" style="border:2px solid black;">
<div class="col span_1_of_3 profile1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile2"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile3"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
</div>
Floating image to the left seems to be working just fine: http://jsfiddle.net/rTZJ9/.
.col > img {
float: left;
}
DRD's aswer is good and You may also use align="left" inside img tag.
<img src="http://placehold.it/100x100" align="left"/>
#Sharanpreet The align attribute of is not supported in HTML5. Use CSS instead.