This is tricky to explain, see fiddle here. Works in Chrome, not in Firefox.
I need to display a number of images within a fixed sized container and vertically align them to the middle. I have followed the examples given in this question (How to vertically align an image inside div) which works great. But using this in my markup it is not working in Firefox.
Depending on the context of the image the html markup can be slightly different:
For example:
Working:
<div class="print-wrap">
<ul>
<li class="img">
<span class="img-valign-helper"></span>
<img class="ls img-valign" src="http://placehold.it/200x105">
</li>
</ul>
</div>
Not working:
<div class="print-wrap has-size">
<ul>
<li class="img">
<div class="table">
<div class="table-cell-50 img-wrap">
<span class="img-valign-helper"></span>
<img class="ls img-valign" src="http://placehold.it/200x105">
</div>
<div class="table-cell-50 info-wrap">content</div>
</div>
</li>
</ul>
</div>
Looking at this in Firebug I can see the <span class="img-valign-helper"></span> is slightly greyed out - I am not sure what this means?
The result is the image is vertically aligned to the top. So the img-valign-helper is not working. Yet works fine in Chrome. I do not see anything in my html markup which would cause this to break. The css is almost identical too.
What is going wrong here?
You need to add height: 100%; to your .table-cell-50. That way it can pass through the height to your helper span.
Updated fidddle
Related
I'm getting a strange behavior in Microsoft Edge for my footer.
I have extracted the problem into a fiddle so it's easier to help.
<body>
<div class="container">
<div class="inner-container">
<div class="slide-footer">
<div class="slide-icon active">
<img src="..." />
</div>
</div>
</div>
</div>
</body>
I have a footer which is positioned via flex-box to always stick at the bottom.
inside of that footer there is another flex-box which is basically used for centering of the footer-elements.
The elements inside the footer have an image inside which takes 80% of the footers height and are therefore resized.
In chrome / firefox the footer-element takes only the space which the resized image needs but in edge the element takes as much width as the original image would need and therefore breaks the layout.
Note: this does not happen all the time so here is an screenshot of what I mean:
How can I fix this?
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
This question already has answers here:
Background color doesn't work after float
(3 answers)
Closed 9 years ago.
Explanation of code:
I'm creating a bar with three links. I made the bar, and tried to space out the links using the float, text-align, and width. (I'm trying to get the center link centered and the other two equidistant from it, and equidistant from the sides.) However, when I originally did it with 3 divs (the divs other than the "I" divs), the background color disappeared. So I messed with it and realized the float on the third link's div was causing the problem. So I added another div(the final div), and that worked with a little text. However, since I had to put text in it, it threw off my spacing. So I made a div on the other side(the first one) to balance it out. It still throws off my spacing without float however!
Question(s):
Why does having the floatproperty on the final div in a line cause the background color to disappear?
<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
You have to clear floating by adding for example another div below your final div:
<div style="clear:both;"></div>
Add overflow: auto to your outer <div>:
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
The problem is that because you are floating elements within another element that isn't floated causes the wrapping element to be rendered as if it is empty.
To fix this, you can add some widths and a float:left; on the wrapping div
Check out this jsbin example which seems to be what you are looking for.
Basically your first div should be like;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
Then you just need to change the widths, and remove any margins or padding.
p.s. You really should consider moving away from inline styles and use an external stylesheet with Id's and class names.
I have a page that looks great in every browser except IE 7, where the table in the center overlaps the grey section below. I have a fixed height on the center section for continuity between pages, so that needs to stay in place.
http://www.bikramyoga.cz/rozvrh.htm
I have tried to add a min-height, max-height, etc, !important declarations and the like, and nothing seems to keep the table within the 510px container.
I have run into this problem a couple of times. Try adding:
<div style="clear: both;"></div>
Right after:
<ul id="legend">
<li><img class="rozvrh" src="img/dot.png" alt="czech class">Česká lekce</li>
<li><img class="rozvrh" src="img/box.png" alt="english class">Anglická lekce</li>
<li><img class="rozvrh" src="img/dud.png" alt="babysitting">Česká lekce s hlídáním dětí</li>
</ul>
</div>