I am displaying some content using dangerouslySetInnerHtml in Reactjs for a blog page, but bullet points are not showing, however the same code and page is being used in another project and that is perfectly working fine. Unable to get whats the problem here i will be attaching the code. The renders fine, the only problem here is that it does not shows bullets for tags. May be some alternative to dangerouslySetInnerHTMl can solve the problem for me.
Here is how my Content looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#font-face {
font-family: 'DuplicateIonic-Regular';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DuplicateIonic-Medium';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url(""), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DuplicateIonic-Bold';
src: url("") format("embedded-opentype");
src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
font-weight: normal;
font-style: normal;
}
body {
padding-right: 8px;
padding-left: 8px;
}
img {
max-width: 100%;
}
.textbody {
font-size: 15px;
color: #6B6767;
line-height: 130%;
font-family: 'Helvetica', Arial, sans-serif;
}
.textbody hr {
margin: 20px 0 30px 0;
border: 0;
border-top: 1px solid #ccc;
}
.textbody a {
color: red;
}
.textbody h1,
.textbody h2,
.textbody h3,
.textbody h4 {
color: #E2051B;
font-size: 18px;
font-family: BurlingamePro-Bold, Arial;
margin: 0;
line-height: 140%;
}
.textbody h1.grey,
.textbody h2.grey,
.textbody h3.grey,
.textbody h4.grey {
color: #666;
}
.textbody h2 {
font-size: 16px;
}
.textbody h2.dark {
color: #555;
font-size: 18px;
}
.textbody h2.dark-thin {
color: #333;
text-transform: uppercase;
font-family: BurlingamePro-Bold, Arial;
font-size: 20px;
margin-bottom: 10px;
line-height: 130%;
}
.textbody h2.pink {
color: #F16A7C;
text-transform: uppercase;
font-family: BurlingamePro-Bold, Arial;
font-size: 20px;
margin-bottom: 10px;
line-height: 130%;
}
.textbody p {
margin-bottom: 25px;
}
.textbody table {
width: 100%;
border-collapse:collapse;
}
.textbody table,
.textbody th,
.textbody td {
border: 1px solid #6B6767;
padding: 3%;
line-height: 120%;
font-size: 15px;
}
.textbody a {
color: #E2051B;
}
.textbody a.btn {
color: #fff;
}
.textbody .special-info {
border-top: 2px solid #ededed;
border-bottom: 2px solid #ededed;
padding: 20px 0;
margin-bottom: 30px;
}
.textbody .special-info h2 {
margin-bottom: 10px;
}
.textbody .caption {
color: #666;
display: block;
text-align: center;
font-style: italic;
}
.textbody .embed-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
margin-bottom: 25px;
}
.textbody .embed-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.textbody ul,
.textbody ol {
margin: 0;
padding: 0 0 0 25px;
text-align: left;
}
.textbody ul li,
.textbody ol li {
margin-bottom: 10px;
}
.textbody ol {
padding-left: 40px;
}
.textbody ol.no-indent {
padding-left: 25px;
}
.textbody .qns {
color: #E2051B;
font-family: BurlingamePro-Bold, Arial;
margin-bottom: 10px;
}
.textbody .ans {
margin-bottom: 30px;
}
.textbody .no-margin li {
margin: 0;
}
.textbody ol.alpha {
list-style-type: lower-alpha;
}
.textbody .table-wrap {
width: 100%;
overflow-x: auto;
}
.textbody .bluebar {
background-color: #0070b9;
}
.textbody .pinkbar {
background-color: #ef4270;
}
.textbody section.border-bottom {
border-bottom: 1px solid #ededed;
padding-bottom: 25px;
margin-bottom: 25px;
}
.textbody section.border-bottom.no-border {
border: 0;
padding-bottom: 0;
}
.textbody .height300 {
height: 300px;
}
.textbody .height200 {
height: 200px;
}
/* 12 Points Style */
.font30{font-size:30px;}
.offers-bg{background-image:url('https://www.frasersexperience.com/files/images/frx1212-bg2.jpg');}
.date-container{text-align:center;margin-bottom:35px;}
.date{
display:inline-block;background-color:#F5C046;border:3px solid #000;padding:15px;
font-family:DuplicateIonic-Bold;color:#000;}
.deal-2column{margin-bottom:20px;}
.deal-img-wrap{display:inline-block;position:relative}
.tag{position:absolute;top:0;left:0;display:inline-block;width:42%;text-align:left}
.deal-2column{
margin-left:0;
margin-right:0;
}
/* End 12 Points Style */
*{
box-sizing: border-box;
}
.text-right {
text-align: right!important;
}
.text-center {
text-align: center!important;
}
.row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.order-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.order-last {
-webkit-box-ordinal-group: 14;
-ms-flex-order: 13;
order: 13;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-9 {
-webkit-box-ordinal-group: 10;
-ms-flex-order: 9;
order: 9;
}
.order-10 {
-webkit-box-ordinal-group: 11;
-ms-flex-order: 10;
order: 10;
}
.order-11 {
-webkit-box-ordinal-group: 12;
-ms-flex-order: 11;
order: 11;
}
.order-12 {
-webkit-box-ordinal-group: 13;
-ms-flex-order: 12;
order: 12;
}
.offset-1 {
margin-left: 8.333333%;
}
.offset-2 {
margin-left: 16.666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.333333%;
}
.offset-5 {
margin-left: 41.666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.333333%;
}
.offset-8 {
margin-left: 66.666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.333333%;
}
.offset-11 {
margin-left: 91.666667%;
}
.flex-row {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.flex-column {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.flex-row-reverse {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}
.flex-column-reverse {
-webkit-box-orient: vertical !important;
-webkit-box-direction: reverse !important;
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;
}
.flex-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.flex-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
}
.justify-content-start {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.justify-content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-center {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.justify-content-between {
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
.justify-content-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
}
.align-items-start {
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.align-items-end {
-webkit-box-align: end !important;
-ms-flex-align: end !important;
align-items: flex-end !important;
}
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.align-items-baseline {
-webkit-box-align: baseline !important;
-ms-flex-align: baseline !important;
align-items: baseline !important;
}
.align-items-stretch {
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.align-content-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important;
}
.align-content-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important;
}
.align-content-center {
-ms-flex-line-pack: center !important;
align-content: center !important;
}
.align-content-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important;
}
.align-content-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important;
}
.align-content-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important;
}
.align-self-auto {
-ms-flex-item-align: auto !important;
align-self: auto !important;
}
.align-self-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important;
}
.align-self-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important;
}
.align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important;
}
.align-self-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important;
}
.align-self-stretch {
-ms-flex-item-align: stretch !important;
align-self: stretch !important;
}
.mm-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mm-list .item {
width: 49%;
margin-top: 20px;
border: 1px solid #ccc;
padding: 2px;
text-align: center;
height: 250px;
position: relative;
}
.mm-list .item .tag {
position: absolute;
top: 10px;
left: 0;
background-color: #E2051B;
color: #fff;
padding: 5px 10px;
font-family: BurlingamePro-Bold, serif;
font-size: 14px;
}
.mm-list .item .thumb {
position: relative;
}
.mm-list .item .thumb img {
height: 150px;
width: 100%;
object-fit: cover;
}
.mm-list .item .thumb .promo {
background-color: #FFCC00;
position: absolute;
bottom: 0;
width: 100%;
font-family: BurlingamePro-Bold, serif;
padding: 5px 0;
color: #000;
}
.mm-list .item .thumb .promo .text {
font-size: 12px;
}
.mm-list .item .thumb .promo .code {
font-size: 15px;
}
.mm-list .item .storename {
color: #E2051B;
font-family: BurlingamePro-Bold, serif;
margin-top: 10px;
}
.mm-list .item .mall {
color: #666;
font-size: 12px;
font-family: BurlingamePro-Bold, Arial;
line-height: 130%;
display: table;
height: 55px;
width: 100%;
}
.mm-list .item .mall .text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.mm-list .item {
width: 32%;
}
.noapp{
display:none
}
-->
</style>
<script>
function sendToApp(obj){
var data = JSON.stringify(obj);
postMessage(data);
}
</script>
</head>
<body bgcolor='#eaeaea'><div class="textbody"><p>
Love to shop? It’s time you got rewarded for it!<br />
<br />
<br />
<br />
</p>
<p>
<img alt="" src="" style="; ;" /></p>
<p>
!</p>
<div>
<span style="color:#f00;"><strong>TERMS AND CONDITIONS</strong></span></div>
<div>
</div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div></body>
</html>
Here is how i am trying to display this:
<div style={{ paddingLeft: scale(11), paddingRight: scale(11) }}>
<div
dangerouslySetInnerHTML={{
__html: this.state.content
}}></div>
</div>
I am trying to make my grid layout divs to be the same height. Please see my sass code below, screenshots of website layout and html code. I want the common height to be the height of the grid element with the most content.
I am only able to provide a picture of my html, since I am using react and different elements.
Please advise on SASS settings. thanks!
SASS code:
// MAIN CONTENT
.grid {
display: grid;
width: 114rem;
grid-gap: 0.5rem;
margin:1rem;
grid-template-columns: repeat(
auto-fit,
minmax(20rem, 1fr)
);
align-items: start;
#include media(small) {
grid-gap: 3rem;
}
&__item {
background: $mainWhite;
border-radius: 0.05rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .05);
transition: $transition;
margin-bottom: 2rem;
&:hover {
transform: translateY(-.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, .1);
}
}
}
.card {
.card__img {
display: block;
width: 100%;
height: 18rem;
object-fit: cover;
object-position: top;
}
.card__content {
padding: 2rem 2rem;
a{
margin-bottom: 1%;
&:hover{
text-decoration: none;
}
}
.card__tools__header{
font-weight: 400;
margin-bottom: 0.2rem;
font-size: 1.2rem;
color:$mainBlack;
}
.card__tools__box{
display:flex;
flex-wrap: wrap;
flex-direction: row;
box-sizing: border-box;
.card__tools {
font-size: 1.5rem;
white-space: nowrap;
color:$mainGreen;
padding-right:1rem;
overflow: hidden;
box-sizing: border-box;
}
}
.card__header {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-weight: 500;
color: $mainBlack;
margin-bottom: 1rem;
}
.card__text {
font-size: 1.1rem;
letter-spacing: .1rem;
margin-bottom: 1rem;
}
}
.card__btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
text-align: center;
color: $mainBlack;
background-color: $mainWhite;
border: none;
border-radius: 0;
transition: $transition;
cursor: pointer;
margin-top: 5%;
span {
margin-left: 1rem;
}
&:hover,
&:active {
background: $mainGreen;
text-decoration: none;
color:$mainWhite;
span {
margin-left: 1.5rem;
}
}
}
}
You need to set the height with grid-template-rows on your container and tell the children to fill 100% of that height. Otherwise they will only take the space they need:
.grid {
//...
grid-template-rows: 1fr;
&__item {
//...
height: 100%;
}
}
I created a codepen for you to test this.
I created a sort of div banner element on the top of my page and had a second transparent element overlayed in an absolute position over it. The problem is that the words in this absolute element will not resize as the page size decreases, in other words, they are not very responsive. How can I fix this?
CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:15px;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
bottom: 20;
top: 20;
padding-left: 20px;
padding-right: 20px ;
margin-right: 250px;
margin-left: 250px;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top:15px;
font-weight: 900;
}
h4 {
position: relative;
width: 100%;
color: black;
font-size: 30px;
font-weight: 900;
padding-top: 95px;
padding-bottom: 25px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}
HTML
<div class="full">
<div id="section">
<h1 class="text-center">—News Feed—</h1>
<br>
<hr>
<div class="image">
<div class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>—Catch up on all the latest news regarding the world—</h4>
</div>
</div>
</div>
</div>
Is this closer to what you are looking for?
https://codepen.io/panchroma/pen/WEygZE
The key change I made was this:
h2 {
/* position: absolute; */ /* new */
position:relative; /* new */
}
Search the css for 'new' to see other less important edits.
This still needs work but hopefully it will get you unstuck.
Good luck!
I have an image slider but need to have a link on one side. I have currently set the link where I want it on the image but it doesn't scale down when the screen is resized.
How do I get this absolute positioned element to scale down with the screen size and move with the image resizing?
here is a JSFiddle https://jsfiddle.net/s0v6j04a/
<div class="sliders">
<div class="slider"><div id="promo1">
<div id="promo-link">
TEST LINK
</div>
<img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />
</div>
</div>
</div>
#slider{
position:relative;
}
.div1, .div2 {
min-height: 400px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div2 {
float: right;
background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 400px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 400px solid #D25A1E;
border-left: 50px solid transparent;
}
#promo1{width:100%; position:relative;}
#promo1 img{width:100%;}
#promo-link{
position: absolute;
z-index: 100000;
left: 25%;
top: 50%;
font-size: 30px;
padding: 20px 40px;
border: 2px solid #fff;
}
#promo-link a{
text-decoration:none;
color:#fff;
font-family:"Times New Roman", Times, serif
}
Here is my css for my footer. It is supposed to be at the very bottom of the page, but for some reason in IE 7 .. i am getting about 10px of extra margin. Any fixes?
/* FOOTER ********************************************************************************************************************/
#footer-bg { margin: 0px auto; padding: 0px; width: 100%; text-align: center; background: url(../images/footer-bg.jpg) top left repeat-x #123800; }
#footer { margin: 0px auto; padding-bottom:30px; width: 900px; font:11px Verdana, Arial, Helvetica, sans-serif; background: #123800 url(../images/footer.jpg) top center no-repeat; color: #b8ceae; text-align: justify!important; }
#footer .footer-nav { margin: 0px; padding: 160px 0px 3px 0px; font-size:11px; color: #789a47; }
#footer p { color:#f9ffe9; margin: 0px; padding: 0px; }
#footer .devby { margin:0px; padding: 15px 0px 0px 40px; height:20px; background:url(../images/prosites.png) left center no-repeat; }
#footer br { display: none!important; } /* nuke coded breaks*/
Use negative margins.