A button inside the legend of a fieldset is not clickable when the fieldset is a flexbox, this only happens in mobile Safari:
* {
box-sizing: border-box;
}
fieldset {
display: flex;
}
legend {
width: 100%;
}
button {
width: 100%;
font-size: 2rem;
}
button:hover {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<fieldset class="col" data-un="u_SkwBump">
<legend>
<button>Click</button>
</legend>
</fieldset>
<script src="src/index.js"></script>
</body>
</html>
Here is also a CodeSandbox, since the snippet is hard to get running on mobile. Any ideas what could be causing this?
I found this flexbug, but I don't think that's the issue here, the flexbox works well on the fieldset as you can see, the columns are displayed side by side (at least on my phone). Just the button not being clickable.
Related
I have the following HTML:
pre {}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<div><code> return a+b</code></div>
</pre>
</body>
</html>
I need to have div elements because I would like the background color to span the width of my entire browser window. However, the div element also adds whitespace between the code elements, which I do not want. I tried adjusting the margins and padding of the div element in my CSS to 0, but this had no effect. I also tried playing around with the white-space property of the div, some of the options (like nowrap) would remove the whitespace, but would also remove the spaces before my return statement, which is also not desirable.
I don't understand why div is adding this whitespace. Div is a block element and following the box model, all whitespace should be accounted for by either the margin or padding. Why is this happening, and how I can fix it?
Pre can contain phrasing content i.e. not divs - you need to put the pre inside the divs
You need to reset all the elements (you can limit yourself to pre, code and div if needed
Here the <pre> is enough so we can remove the <code>
* { margin:0; padding:0;}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="uncovered"><pre>def f(a, b):</pre></div>
<div><pre> return a+b</pre></div>
</body>
</html>
Perhaps better alternative
We can have the code tag AND assign white-space: pre to it. Then we have semantic and visual consistency
* { margin:0; padding:0;}
code { display:block; white-space: pre;}
code.uncovered {
background-color: red;
}
<code class="uncovered">def f(a, b):</code>
<code> if a < b:
return a+b
else:
return b-a</code>
Please do not put nothing inside a CSS selector properties, e.g.:
pre {}
Next, negative padding values will not work, but margins will:
.box {
position: absolute;
width: 50px;
height: 50px;
padding: -20px; /* Will not work */
margin: -20px;
font-size: 8px;
background: #f1f1f1;
text-align: center;
}
<div class="box">You may not be able to see this box</div>
Finally, you can clean and fix the code.
div.uncovered {
background-color: red;
}
code {
margin: 0 !important;
padding: 0;
white-space: auto;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<code> return a+b</code>
</pre>
</body>
</html>
In HTML avoid using more than one space because HTML will ignore the rest. I replaced (whitespace), with the unicode alternative .
You can also apply display: block; + white-space: pre; and only use the <code> tag to achieve a similar result:
code {
display: block;
white-space: pre;
/* for more space between lines */
/* margin-bottom: 10px; */
}
code.uncovered {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<code class="uncovered">def f(a, b):</code>
<code> if a > b:</code>
<code> return a - b</code>
<code> else:</code>
<code> return a + b</code>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
I' m trying some simple exercise to improve my web development skills. I' m doing a simple translator. Of course for the front end I'm using HTML and CSS. For the backend I'm using Java Servlet.
I want to show two textarea one next to the other and two button under the text area on the left for translating and swapping the language(kind of google translate but with two buttons on the left of the first text area).
I achieved in a tricky way(I suppose?) what I want. But I think there is a better way to do it. Here is the fiddle. Someone can give me an hint, or any explanation on how do it or how works for align elements? Thank you!
Code here:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Translator</title>
</head>
<body>
<h1>Welcome to translator!</h1>
<div class="div1">
<form id="form1">
<textarea class="inline-textarea" id="text1" form="form1"></textarea>
<input type="submit" value="Translate" id="translate">
<input type="submit" value="Swap" id="swap">
</form>
</div>
<div class="div2">
<form id="form2">
<textarea class="inline-textarea" id="text2" form="form2"></textarea>
</form>
</div>
<script type="text/javascript" src="js/jsScript.js"></script>
</body>
</html>
style.css
body {
font-family: 'Open Sans', sans-serif;
}
.div1 {
float: left;
margin-right: 2px;
}
#translate {
display: block;
}
#swap {
float: right;
position: relative;
margin-top: -21.2px;
margin-right: 35px;
}
Here the fiddle:
https://jsfiddle.net/8e6s1d25/
First thing I am not sure if you need two forms. You are just better off with one single form. And I am going to use two columns inside the <form> so that there's the input on the left and output on the right, as how you see in the Google Translate.
Next thing is that, I am not sure why you needed to give the Translate button, a display: block, which is causing you the problem. Combining all the above said, I have made a simple snippet below, that looks like the preview below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
textarea {
width: 100%;
height: 5em;
border: 1px solid #ccc;
border-radius: 5px;
margin: 0;
}
.input, .output {
float: left;
width: 50%;
padding: 5px;
}
<h1>Welcome to translator!</h1>
<form action="">
<div class="input">
<textarea name="input" id="input"></textarea>
<input type="button" value="Translate" />
<input type="button" value="Swap" />
</div>
<div class="output">
<textarea name="output" id="output"></textarea>
</div>
</form>
Preview
Hope this is helpful. Feel free to ask any question to make yourself clear on the coding standards. What I have used is the one that's being used in live production sites. :)
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus · Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.