I have a problem with IE8 in quirks mode. I have an outer div element that wraps two inner divs.
<div style="margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background:blue;">
<div style="position:relative; float:left; width:10px; height:10px; background:orange;"></div>
<div style="position:relative; margin-left:10px; margin-right:0px;height:10px; background:green;"></div>
</div>
The inner divs should span the whole of the wrapper div, and it works fine in firefox and chrome. But when I view this in IE8 there is a strange gap between orange div and the green div. Does anyone know how to fix this (or to work around it)? Also, I can't put a doctype declaration anywhere in the document.
Use absolute positioning on the content and relative positioning on the container for quirks mode:
<html lang="en">
<head>
<title>Quirksmode Tests</title>
</head>
<body>
<div style="position:relative; margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background-color:blue;">
<div style="position:absolute; top:0; width:100%; right:0; height:10px; background-color:green;"></div>
<div style="position:absolute; top:0; left:0; width:10px; height:10px; background-color:orange;"></div>
</div>
</body>
</html>
References
CSS - Quirks mode and strict mode
What happens in Quirks Mode in web browsers?
Related
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
I'm a beginner and use Bootstrap 4.
I've done this page: https://www.bitballoon.com/sites/stoker-austin-77536
I would simply like to have some white space between images.
I have tried countless tricks (none work) ie some of them:
Trying to use spacing of Bootstrap 4
Added a space between an image and a div using bootstrap
I also tried adding Padding on .img .img-fluid (I have now removed it)
my HTML:
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="add-padding" class="p-b-2">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="add-padding">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
My CSS:
.p-b-2 {
padding-bottom: ($spacer-x * 2) !IMPORTANT;
padding-bottom: ($spacer-y * 2) !IMPORTANT;
}
.add-padding {
padding-bottom: 20px !IMPORTANT;
margin-bottom: 20px !IMPORTANT;
}
.row .col-md-9 .add-padding{
padding-bottom: 20px !IMPORTANT;
}
img *{
padding-bottom:20px !IMPORTANT;
}
Thanks so much #Skelly: I've corrected the rookie errors (you've pointed to) and it now works :)
So the HTML corrections are:
"class attribute should only be used once in a tag
and remove semicolons in the img tags"
I created my Codeply:
http://www.codeply.com/go/ZZaV7zlnVO
My only CSS is now:
.col-md-9 {
padding-bottom: 40px !IMPORTANT;}
The problem came from the HTML errors mentioned above. I had unnecessary CSS (because I had tried so many CSS tricks, not knowing that HTML was the source of the issue). I have now simplified the CSS (see above).
Note: I have only used Bitballoon a week and did not know it was password protected - sorry.
I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: http://i.imgur.com/1k1QTE4.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:
<article>
<br>
<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
There's not really anything (yet in the css) that pertains to this. Thanks!
Edit: Full CSS and HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}
body {background-image:url("background1.jpg");
background-size:1700px 850px;
background-repeat:no-repeat;
}
.white_bg {background-color:#ffffff;
padding: 1px;
}
.col-split-3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 450px;
}
.col-split-3 > div {
display:block;
}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>
<div>
<ul>
<li><strong>HOME</strong></li>
<li><strong>CONTACT</strong></li>
<li><strong>GALLERY<strong></li>
<li><strong>STORE</strong></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
</section>
<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>
</body>
</html>
Edit 2 - Columns Centered
I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto:
.col-split-3 {
margin-left:auto;
margin-right:auto;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 500px;
}
.col-split-3 > div {
display:block;
}
Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:http://i.imgur.com/wxe79tS.jpg
There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.
Example 1
.img-left {
float: left;
}
.img-right {
float: right
}
.center {
text-align: center;
border: 1px solid black;
}
<br />
<div class="center">
<div class="img-left">
This is the left image
</div>
Text
<div class="img-right">
This is the right image
</div>
</div>
Example 2 (edited)
This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.
.col-split-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
text-align: center;
width: 300px;
}
.col-split-3 > div {
display: block;
}
<div class="col-split-3">
<div>Image 1</div>
<div>center text</div>
<div>Image 2</div>
</div>
These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.
I try to create a price tag with dom pdf. The price tag consists of some div containers. One of these containers have a max-height, but this is not working. Because if I change the text of this container to a text with 200 words instead of 100, the price tag is scaling higher.
But I need a fixed height.
Is this an issue?
HTML:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="tag">
<div class="header">
Product
</div>
<div class="article">
<div class="info">Lorem sd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="barcode">
<p>Barcode</p>
</div>
</div>
</body>
</html>
CSS:
.tag {
border-style: solid;
min-width:11.5cm;
max-width:11.5cm;
max-height:3.5cm;
margin:0.1cm;
padding:0.1cm;
}
.header {
min-width:11.5cm;
max-width:11.5cm;
font-size:35px;
font-weight:bold;
}
.article {
min-width:11.5cm;
max-width:11.5cm;
}
.info {
float:left;
text-align:left;
min-width:7.5cm;
max-width:7.5cm;
min-height:2.0cm;
max-height:2.0cm;
font-size:10px;
}
.barcode {
text-align:center;
min-width:11.5cm;
max-width:11.5cm;
}`
The .info class and the .tag class are important. max-width is working correctly.
If you want fix height, just use height and give it a fixed value and use overflow: hidden to hide extra data.
Change in CSS:
.info {
overflow: hidden;
float:left;
text-align:left;
min-width:7.5cm;
max-width:7.5cm;
height:35px;
font-size:10px;
}
See working example here: FIDDLE
I found the solution. It is a little bit confusing.
max-height and min-height are not working. If I use a solution only with height it is correctly working.
#Aayushi Jain:
Your solution is working, the only problem was that my browser uses the old css from cache instead of the new version.
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}