I have to transform a given webdesign into an template for an CMS.
While I was doing this, I realized, that the design did screw up in Firefox:
I'm not really deep into webdesign, but I was able to narrow it down to a div (.inside) which contains two further divs (.titel and .logo) and a <figure> that contains an <img>.
In Chrome (Version 33) and IE (Version 10) the image is rendered under the two divs (As it was intended by the designer) - in Firefox, the image is inserted right in line with the other two elements.
See the difference:
https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png
I prepared a jsfiddle:
http://jsfiddle.net/5zu32/embedded/result/
rough code:
<div class="inside">
<div class="titel"></div>
<div class="logo"></div>
<div class="main_image block">
<figure class="image_container">
<img src="foo" alt="img test" height="323" width="853">
</figure>
</div>
</div>
I tried to remove the "block" class (which only removes the overflow:hidden) but that screws up the original design. (It does not do that so clearly in the demo.)
(Picture of horses is a random internet image that happens to have the same size as my used image)
I hope somebody could help me? How can I fix this?
By the way: I'm new to the site, if I did anything wrong, please tell me :)
Try using
.main_image {
clear: both;
...
}
This will clear the float: left you used earlier.
BY adding a clear: both; to your main_image class you can clear out the problem with the display.
DEMO
Related
I'm trying to embed a Power BI report to my website in Wordpress using the HTML tool. Since when using the embedding version of the report of Power Bi, a button to share the report appears (and it really can't in this case), I found a solution here on how to "cut" the HTML element so that the down part wouldn't appear. I'm saying this just to explain why maybe the code down can look more complicated than needed. My problem now is that I'm trying to center this element on the page, but I don't know why I can't make it work in all PCs, since in mine it appears centered but in others that I tried it didn't.
This is the code that I have until now
<div id="content">
<div class="row-fluid">
<div class="aligncenter">
<div style="height:500px;width:400px">
<iframe width="600" height="400" src="LinkOfReport" frameborder="0" style="position: absolute; clip:rect(0px,1000px,344px,0px);
; zoom:162%;allowFullScreen=" true=""></iframe>
</div>
</div>
</div></div>
I don't understand much of HTML or CSS so if someone could explain me what I'm doing wrong I would appreciate it a lot!
I managed to understand what was happening. Basically, I copied part of the code from the question I mentioned in the post, since I needed to crop the HTML element. I understood that a part of it was forcing the element to start more to the left (the part of <div style="height:500px;width:400px">) and another one to keep the element fixed in the same place, independently of the size of the window (position: absolute)
I also changed the type of clip I was using, since from what I read, clip property is exclusive to absolutely positioned elements. So now I'm using clip-path property.
Summing up, this is my final code:
<div class="row-fluid">
<div class="aligncenter">
<iframe width="600" height="400" src="https://app.powerbi.com/view?r=eyJrIjoiYjE4ZDExNGQtNjgwYS00OTUwLTkzYjYtNjM1YjNjMGJkMjU4IiwidCI6ImU0YmQ2OWZmLWU2ZjctNGMyZS1iMjQ3LTQxYjU0YmEyNDkwZSIsImMiOjh9&pageName=ReportSection" frameborder="0" style="clip-path: inset(0 0 38px 0); zoom:162%"> </iframe>
</div>
</div>
Hope these explanations help anyone that is trying to start in HTML and CSS
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
I'm having what would seem a very basic css problem that shouldn't be an issue. I have three divs:
(Output directly from firebug. Each div contains a lot of content and nested form partials (rails) so below is an abbreviation)
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Divs with class tf-attribute should have a boarder:
div.tf-attribute{
border: medium solid #a5ac20;
border-radius: 10px;
padding: 20px;
}
Strange thing is that the border is being applied to the div of class symegrid. When I use firebug to inspect the computed attributes of the symegrid div, no border is listed. If I take the border off of tf-attribute, the one arround symegrid disappears.
I doubt anyone would be able to give me a difinitive answer on this but I'm running out of ideas. Has anyone seen this sort of behavior before? Any ideas/thoughts would be appreciated.
In response to comments I've gotten:
It's been quite fairly suggested that I post a reproduction of the problem in a fiddle or something like that. I'm currently trying to reproduce this in a fiddle but can't so far. Will post it if I'm able to do so (though I suspect reproducing it would likely give me the info I need to solve the problem)
You having missing closing div tag
See the fiddle: "https://jsfiddle.net/s48o7kr1/"
The code becomes:
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Change your html to
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
So for some reason the div.officer.tf-attribute happened to be sizing itself to include the exact boundaries of div.symegrid, leaving its own contents below. Therefore div.symegrid only appeared to have a border and because the content of div.officer.tf-attribute was sandwitched between two bordered divs, it appeared to have a border itself. (Still can't get it to do that in a fiddle but whatever)
Anyway, all I needed was to add
div.tf-attribute{
overflow: hidden;
}
And it was all better. :-P Thanks to everyone who was so kind to spend their time on this nonsense.
I'm helping a friend with a website and need some advice. We asked here before, and were told to update all the necessary jQuery files on the server, done that, but still broken.
Website: 3six-d.co.uk
If you go to the portfolio, you will see all the pictures are out of line, not the rows, but the columns.
I'm using this to set the spacing:
<div class="col-md-4">
<a class="fancybox-test" data-fancybox-group="thumb" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
Just to be clear I have upgraded from Bootstrap 2 to 3. But I have followed the instructions and upgraded all the syntax's. (I hope anyway) But still no luck, they just won't line up as they used to (Gaps between the columns and pictures of equal space).
I have done abit of research on this myself, and all that I can find is that they must all by in the container div, which they are.
This is driving me crazy, so I would love some help!
Thanks
You could just add the following CSS to your images.
.fancybox-test > img {
width: 100%;
vertical-align: middle;
}
The vertical-align: middle property removes the padding at the bottom of the images.
Your columns are set at 31.6% width each, which is coming out at 340px wide. The preview images are 460x300 so are all overlapping. Set them a size or better yet upload the correct size.
Is this what you expect? If yes, just add following rule to your CSS
.fancybox-test img{
width:100%;
}
<div class="col-md-4">
<a class="thumbnail" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
What's wrong with native thumbnail class of bootstrap?
There is a set of images (more than 3):
<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
If you don't apply any styles, they go in a row (if space allows to). That's fine, however I want the last 3 images always appear on the next line. Is it possible to make it using pure css?
I've found a close solution:
img:nth-last-child(3){display:block;}
However, it breaks the images in three lines (that makes sense as it is display:block for third image from the end).
jsFiddle example
Looking for a pure css solution.
Thank you.
use
clear:both in css for last three images
img {
float:left;
}
img:nth-last-child(3) {
clear:both;
}
DEMO