I wanted to know why my image isn't showing up in the Buildfire platform when i place the code into the source area.....I've tested it on everything else and it works perfectly...dreamweaver and everything.... Need help to help get the image to show up in buildfire. The code i am using is below:
<p class="bf-wysiwyg-hide-app bf-wysiwyg-top"><img src="blob:https://pluginserver.buildfire.com/890db794-346d-4428-be1f-aa8dd5f5efdc" style="display: none;" onload="typeof buildfire !== 'undefined' && buildfire.dynamicBlocks.execute(this);" data-type="dynamic-expression" /></p>
<div id="bf_mce_layout_2" class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-bf-layout="%7B%22id%22%3A%22bf_mce_layout_2%22%2C%22cssUrl%22%3A%22layouts/bf_mce_layout2.css%22%2C%22htmlUrl%22%3A%22layouts/template_a.html%22%7D" data-layout-name="bf_mce_layout_2"><!-- This template should not be changed once is live -->
<div class="bf_mce_img-container"><img src="https://dallasexaminer.com/wp-content/uploads/2023/01/Preparing-for-Legislative-Session.jpg" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute("data-execute"))), ()=>{})" data-bf-image="%7B%22originalSrc%22%3A%22https%3A//s3-us-west-2.amazonaws.com/imageserver.prod/71e97b33-4374-11ec-9fe6-12a56cc33887/karen-bass.jpg%22%7D" data-execute="%7B%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D" /></div>
<div class="bf_mce_copy">
<h1>Current News</h1>
<p class="bf_mce_caption">Check out the current news from The Dallas Examiner today by clicking the button below</p>
</div>
<button class="bf-btn bf-btn-primary" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute('data-execute'))), ()=>{})" data-execute="%7B%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D">Current News</button></div>
<p class="bf-wysiwyg-top bf-wysiwyg-hide-app"> </p>
<style class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-layout-name="bf_mce_layout_2">
#bf_mce_layout_2 * > span{
color: currentColor;
}
#bf_mce_layout_2{
font-size: 16px;
margin: 1rem;
border-radius: 1rem;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0 .5rem 1rem rgba(77, 77, 77, 0.5);
}
#bf_mce_layout_2 .bf_mce_img-container{
position: relative;
left: 0;
top: 0;
height: 200px;
width: 100%;
}
#bf_mce_layout_2 .bf_mce_img-container img{
width: 100%;
height: 100%;
object-fit: cover;
}
#bf_mce_layout_2 .bf_mce_copy{
padding: 1rem;
}
#bf_mce_layout_2 .bf_mce_copy h1{
margin-top: 0;
margin-bottom: .5rem;
}
#bf_mce_layout_2 .bf_mce_copy .bf_mce_caption{
font-size: .75rem !important;
margin-bottom: 2rem;
}
#bf_mce_layout_2 .bf_mce_copy p{
line-height: 1.5;
}
#bf_mce_layout_2 button{
position: relative;
margin-bottom: 2rem;
min-width: 150px;
z-index: 1;
}</style>
[[[enter image description here](https://i.stack.imgur.com/MAJs2.jpg)](https://i.stack.imgur.com/kIJKs.jpg)](https://i.stack.imgur.com/hM7uY.jpg)
I placed in a code that works perfectly in dreamweaver into the source code area of Buildfire and for some reason the image is not showing up. I need help with this The code is below:
Your code seems to run just fine, screenshot below:
Maybe a problem retrieving the image? I'd check the network traffic in Safari or Google Chrome and see if the image being requested or not.
If it is being requested then check if you're getting any status code errors. If it is not being requested try adding more information.
Related
I have a section with 2 rectangles inside a flex container. One of the rectangles simply has a margin-top: - 17%, which is ignored by Firefox. Is there any way to assign a percentage margin in Firefox? (the rectangle slides nicely when the window is resized vs doing nothing if I use pixels as a margin).
Here is a Codepen Example: https://codepen.io/SergiOca/pen/wdQYad
<div class="import-flex">
<div class="export-rectangle">
<h1> Asesoramiento. </h1>
<p>
Test
</p>
</div>
<div class="import-rectangle">
<h1> <span> Oportunidad. </span></h1>
<p>
Test
</p>
</div>
<img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="" class="import-footer-image img-responsive">
</div>
.import-rectangle {
transition: ease-in-out 1s;
position: relative;
width: 471.7px;
height: 409px;
background-color: #454044;
box-shadow: 0 0 20px 20px rgba(44, 42, 44, 0.1);
z-index: 5;
color: white;
padding: 40px 50px;
margin-top: -17%;
}
.export-rectangle {
position: relative;
width: 471.7px;
height: 407px;
margin-right: 5%;
background-color: #c97c60;
z-index: 5;
color: #454044;
padding: 40px 50px;
}
.import-flex {
display: flex;
position: relative;
}
.import-footer-image {
width: 430px;
height: auto;
margin: 0 auto;
position: absolute;
top: 93%;
left: 30%;
z-index: 100;
}
Firefox has struggled with a bug when using percent for some time, bugzilla bug, so may I suggest you use viewport units instead.
margin-top: -17vw;
Updated codepen
If you need to adjust towards a parent element, CSS Calc might come to rescue if the parents size/position is somewhat fixed.
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/
I'm trying to figure out why padding is included in this scrolling content for Chrome (Mac Version 27.0.1453.110) but not in Firefox (Mac 21.0). I'm using the box-sizing: border-box; When I hit the bottom the scrolling content the padding is there in Chrome, but in Firefox the last element is the bottom, there isn't any padding below. Should I be using margin instead? Is this a bug for 1 of the browsers?
I have an example on codepen
CSS:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
background-color: #222;
}
p {
padding-bottom: 20px;
}
.boxy {
background-color: #111;
border: 4px solid #FFFFFF;
height: 442px;
overflow: auto;
position: relative;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 722px;
}
.inside-boxy {
background-color: #ff6000;
height: 160px;
padding: 12px 50px 50px 28px;
position: absolute;
overflow-y: scroll;
}
.in-links {
background-color: #fff;
height: 132px;
margin-top: 22px;
width: 600px;
}
HTML:
<html>
<head>
<title>Paul Irish Box Model FTW</title>
<meta charset="utf-8">
</head>
<body>
<div class="boxy">
<div class="inside-boxy">
<p>...</p>
<p>...</p>
<div class="in-links">links!</div>
</div>
</div>
</body>
</html>
.inside-boxy has a fixed height. I would not issue the padding through that container. Instead, I would issue the padding and margin properties of the components inherent to .inside=boxy. I re-wrote your CSS below. Let me know if you have any issues.
p {
padding:20px;
}
.boxy {
background-color: #111;
border: 4px solid #FFFFFF;
height: 442px;
overflow: auto;
position: relative;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 722px;
}
.inside-boxy {
background-color: #ff6000;
height: 160px;
position: absolute;
overflow-y: scroll;
width:100%;
}
.in-links {
background-color: #fff;
height: 132px;
margin:20px 0 20px 0;
width: 100%;
}
I am injecting this code
<!-- IF postrow.S_FIRST_ROW -->
<div style="float: left;">
<script type="text/javascript"><!--'
google_ad_client = "pub-X";
google_ad_slot = "X";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div><!-- ENDIF -->
in viewtopic_body.html just before,
<div class="content">{postrow.MESSAGE}</div>
However, the post content wraps on the right side of the Google Ad but not below the Ad. I have tried many variations of float but the bottom part of the Ad is always blank.
I want to know how this wrapping issue can be fixed WITHOUT touching any other file in the PHPBB3 forum software except viewtopic_body.html. (PHBB3 Ver. 3.0.7-PL1)
You can the see the described problem at http://www.aawartan.org/viewtopic.php?f=14&t=2
for the first ad for the ins use
display: block; border: medium none; height: 200px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 200px;
for the second ad use for the ins tag..
style="display: block; float: left; clear: left; border: medium none; height: 200px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 200px;"
Example: http://img686.imageshack.us/img686/6889/screenshot1bu.jpg