ie 8 is adding unnecessary padding to a div. I cannot see any unusual styling here. Can somebody help ?
Html
The div highlighed in blue is the one in context.
.block {
clear: both;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content {
padding: 0 18px 0 0;
}
Here is the html code that will reproduce this issue. Sorry about the length. But if you copy this to a html file and open it in ie8, you'll be able to reproduce it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.block {
clear: both;
}
div.block .inline:last-child {
float: none;
overflow: hidden;
}
div.content-root {
padding: 0 0 0 18px;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content.input-container {
padding-right: 0;
}
div.content {
padding: 0 18px 0 0;
}
</style>
</head>
<body>
<div id="contentPane" style="background-color: transparent; display: block;">
<form>
<div class="block content-root">
<div class="block">
<div class="block">
<div class="block">
<div class="inline">
<label>
<div class="block">
<div class="inline content input-container">
<input type="checkbox" />
</div>
<div class="inline">
<div class="block">
<div class="block">
<div class="inline" style="float: left;">
<div class="block content">
<p>
<span style="font-family: arial; font-size: 11pt;">C. </span>
</p>
</div>
</div>
<div class="inline">
<div class="inline">
<p><span>Correct</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The paragraph tag has its own margin by default.
If you write
<p style="margin:0px;">
the 'padding' above and below the word 'Correct' goes.
Related
.surveyform-class {
background: yellow;
margin: 0 25%;
width: 50%;
border-right: 40px solid yellow;
}
.main-div{
background: lightgrey;
width: 50%;
height:100%;
margin: 0 25%;
border-right: 20px solid yellow;
border-left: 20px solid yellow;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 400px;
}
form >div {
margin-top: 1em;
}
form >div >div {
padding-left: 95px;
}
label{
width: 90px;
text-align: right;
display: inline-block;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div style="
text-align: center;">
<h1 class="surveyform-class">Survey Form</h1>
<div class="main-div">
lwt us know how we can improve freecode camp
<form >
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div >
<label>
which option best describes your current role
</label>
<select >
<option>student</option>
<option>engineer</option>
</select>
</div>
<div >
<label>
Things that should be improved in future
</label>
<input type="checkbox" name="a">
<span> Front end projects</span>
<div>
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div>
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I am trying to align these select element and labels to start at same line.
Can someone help me ?
Here is jsfiddle link : http://jsfiddle.net/v650o2dL/2/
Use the css property vertical-align:top. Be sure to separate the containers of the left and right containers like I did below;
.yellow {
background: yellow;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.yellow>h1 {
text-align: center;
}
.grey {
background: lightgrey;
height: 200px;
}
.row {
width: 100%;
display: block;
margin-bottom: 10px;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
.input-group {
display: block;
margin-bottom: 10px;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="yellow">
<h1>Survey Form</h1>
<div class="grey">
<center>
Let us know how we can improve freecode camp
</center>
<br>
<form>
<div class="row">
<div class="left">
<label>
Which option best describes your current role
</label>
</div>
<div class="right">
<select>
<option>student</option>
<option>engineer</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label>
Things that should be improved in future
</label>
</div>
<div class="right">
<div class="input-group">
<input type="checkbox" name="a">
<span> Front end projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.
I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.
What have I tried?
.container {
display: flex; /* or inline-flex */
}
So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.
https://jsfiddle.net/d35g2mra/1/
Wrap only the wanted divs in div and dispaly:flex them (in the same way you can wrap the images section if you want to)
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}
<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>
You can do like this:
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Does anybody knows how to group two cells of two rows in a table, using CSS display property value table-row-group?
I know that in CSS rowspan doesn't exist but table-row-group is defined to be equivalent to tbody as I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.
In the following code, I used some divs to create a table using table as CSS display property value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2 and row3_cell2. I have tried to do it, but, without success, using the value table-row-group of the CSS property display:
<div id='table'>
<div class='row'>
<div class='cell'>
</div>
<div class='cell'>
</div>
</div>
<div class='row_group'>
<div id='row_2' class='row'>
<div class='cell'>
</div>
<div id='row2_cell2' class='cell'>
</div>
</div>
<div id='row_footer' class='row'>
<div class='cell'>
</div>
<div id='row3_cell2' class='cell'>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/framj00/2eN3U/
Can you help me please to resolve this problem? many thanks!
table-row-group works only with table element in HTML.So instead of divs use table.You can follow the Fiddle
<html>
<head>
<style>
.black {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
padding: 3px;
}
.tbl { display: table; }
.row { display: table-row; }
.cel { display: table-cell; }
.cpt {
display: table-caption;
text-align: center;
}
.thc {
display: table-cell;
background-color:#f2e8da;
text-align: center;
font-weight: bold;
}
.row:nth-child(odd) { background-color: #def; }
.row:nth-child(even) { background-color: #fff; }
.row:hover {background-color:#f2e8da; }
.tbody { display: table-row-group }
.thead { display: table-header-group }
input {
width: 100%;
background-color: inherit;
}
</style>
</head>
<body>
<div class="tbl black">
<div class="cpt"><input type="search" placeholder="search me"/></div>
<div class="thead">
<div class="row black">
<div class="thc black">name</div>
<div class="thc black">form</div>
</div>
</div>
<div class="tbody" id="data">
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="1"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="2"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="3"/></div>
</form>
</div>
</div>
</body>
</html>
I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.
What css changes do I need to make in order to display the third column correctly?
View in this JSFiddle
CSS
.test .repeater {
border: none;
margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
width: 33%;
float: left;
display: block;
}
.test .wizard-controls .indent1 .control:first-child {
margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
width: 30%;
float: left;
border: 1px solid red;
display: block;
}
HTML
<div class="test wizard-parentcontrol">
<div>
<div>
<fieldset></fieldset>
</div>
<div>
<div>
<fieldset>
<div>
<div class="repeater indent1">
<div class="wizard-parentcontrol">
<div>
<div>
<div class="controlkl">Column 1</div>
</div>
</div>
<div>
<div>
<fieldset>
<div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
</fieldset>
</div>
<div>
<div class="">
<p class="ctrlinvalidmessage"></p>
<fieldset>
<div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Check If you can do the following changes.
I just added class
.wizard-parentcontrol div
{
float:left;
}
and removed the hardcoded width's of 33% and 30% from your code.
Check the demo
Greetings Overflowers,
I have an HTML page as follows:
1. HTML, BODY, DIVs and SPANs are reset to have 0px border, padding, margin and outline
2. HTML, BODY and DIV elements has display: -webkit-flex and -webkit-flex: 0 0 auto
3. HTML and BODY with height: 100vh and width: 100vw
4. Inside BODY, a DIV named #slider with display: -webkit-flex and -webkit-flex: 0 0 auto
5. Inside this #slider, two DIVs #sidebar and #main with display: -webkit-flex and -webkit-flex: 0 0 auto for both, width: 10rem for #sidebar and width: 100vw for #main
Problem: I was expecting the width of #slider to be 10rem + 100vw, but it is only 100vw even if I change the width of #main to something smaller such as 50vw!
Am I missing anything in here?
Kind regards
/*
unicode-bidi: bidi-override;
-webkit-user-modify: read-write-plaintext-only;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 1s ease;
*/
body, div, html, span {
background: transparent;
border: 0px;
cursor: default;
direction: rtl;
margin: 0px;
outline: none;
padding: 0px;
position: relative;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
}
body, html, div {
background: black;
display: -webkit-flex;
overflow: hidden;
-webkit-flex: none;
}
body, html {
height: 100vh;
width: 100vw;
}
span {
background: white;
}
.stretch {
-webkit-flex: 1;
}
.vertical {
-webkit-flex-flow: column;
}
body>.slider {
/*-webkit-transform: translateX(10rem);*/
}
#main {
width: 100vw;
}
body>.slider>#west {
width: 10rem;
}
#filter-sort.region, #filter-sort-options.region {
width: 10rem;
}
#doc>#east {
background: orange;
height: 6rem;
width: 6rem;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#doc>#center {
background: green;
}
#header, #doc-types {
height: 2.75rem;
}
#preview {
max-height: 6rem;
max-width: 6rem;
}
#search.button, #filter-sort.button {
background: red;
width: 3rem;
}
#doc-type {
background: blue;
width: 5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body ng:controller="Docs">
<div class="slider">
<div id="main" class="region vertical">
<div id="header" class="region">
<div id="search" class="button"></div>
<div id="center" class="region stretch">
</div>
<div id="filter-sort" class="button"></div>
</div>
<div id="doc-types" class="region">
<div class="slider">
<div id="doc-type" class="button"></div>
</div>
</div>
<div id="docs" class="region">
<div class="slider stretch vertical">
<div id="doc" class="region">
<div id="east" class="region">
<div id="preview" class="region"></div>
</div>
<div id="center" class="region stretch vertical">
<span id="title" class="label"></span>
</div>
</div>
</div>
</div>
</div>
<div id="west" class="region">
<div class="slider">
<div id="filter-sort" class="region vertical">
<div id="header" class="region">
<span id="title" class="label">Filter and Sort</span>
</div>
<div id="grades" class="region">
<div id="center" class="region stretch vertical">
<span id="grades" class="label">Grade</span><br />
<span id="grades" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="doc-topic" class="region">
<div id="center" class="region stretch vertical">
<span id="doc-topic" class="label">Doc Topic</span><br />
<span id="doc-topic" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="course" class="region">
<div id="center" class="region stretch vertical">
<span id="course" class="label">Course</span><br />
<span id="course" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="sort" class="region">
<div id="center" class="region stretch vertical">
<span id="sort" class="label">Sort</span><br />
<span id="sort" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
</div>
<div id="filter-sort-options" class="region vertical">
<div id="header" class="region">
<div id="back" class="button"></div>
<div id="center" class="region stretch">
<span id="title" class="label">Options</span>
</div>
</div>
<div id="grades" class="region">
<div class="slider vertical">
<span id="grade" class="label"></span>
</div>
</div>
<div id="doc-topics" class="region">
<div class="slider vertical">
<span id="doc-topic" class="label"></span>
</div>
</div>
<div id="courses" class="region">
<div class="slider vertical">
<span id="course" class="label"></span>
</div>
</div>
<div id="sorts" class="region">
<div class="slider vertical">
<span id="sort" class="label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See http://codepen.io/anon/pen/fluKI which works as you would expect (Chrome 27)
As far as I can tell from your description, you need to set the width and height of your flex container (#slider). Using flex: 0 0 auto; on #slider won't do what you expect since it is a flex container and not a flex item itself (read: it is not in a flex container).
Also please note that flex: 0 0 auto; is the same as saying flex: none; which removes the item's flexibility.