I just switched to ZURB Foundation 4 after much consideration (switching from Twitter Boostrap 3 RC1) and it's all good and fine mostly but I am concerned that I may already be running into some bugginess in it -- but the bugginess may be in my way I'm using it perhaps?
Basically, I am setting up a block grid within which are a series of images. Initially it works as expected: the images are automatically scaled into the width of their column, makes sense since they have max-width:100% and height:auto.
Now, when I add class="th" to each of the anchors for the images suddenly the images overflow their containers and are not size constrained at all but are the dimensions of the image file itself.
Inspecting this in Firefox I find that the only difference that could be causing this is that the th class has line-height:0. I'm somewhat new to all this stuff so I don't quite understand why they are setting the line-height to zero but as far as I can tell that's what is breaking everything in my usage. Is this a bug or am I missing something?
Here's a code example:
<ul class="large-block-grid-4">
<li>
<a class="th" href="http://placehold.it/800x800.jpg">
<img src="http://placehold.it/800x800.jpg" />
</a>
</li>
</ul>
i.e. it overflows all over the place but if I just remove the th class, it's fine.
It looks like a bug to me but before I submitted it I wanted to make sure I wasn't an idiot and missing some important point.
I've been using just the default CSS (v4.3.1) and not SASS with the same issue. Only for me it occurred in IE 10/9 exclusively. In comparing the style sheet used for the docs and the one included in the download, I found one difference.
Add the below to the 'a.th' style:
max-width: 100%;
it shouldn't overflow. http://foundation.zurb.com/docs/components/thumbnails.html
are you using sass or just working on top of their css?
Related
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).
FIRST TIME:
SECOND (AND LATER) TIME:
I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?
EDITS
Thanks for all the feedback. Just to clarify a few things. The CSS is standard Bootstrap 3.0 only, there is no other styling or CSS. The URL is https://www.acls.net/index-exp120.php and this is Chrome Private mode with all extensions disabled. I only see this issue in Chrome, have updated title to reflect that.
Ok - the issue depends on multiple things
only might happen with an empty cache
depends on the loading speed of font-awesome & bootsrap - if they load faster than your logo or not...
So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.
You cannot easily fix the loading race condition but fixing your css should work :
add class pull-left to your logo
clear the floated area by applying class clearfix to the page-header
Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded
So here it is:
<div class="page-header clearfix">
<a href="/" class="logo pull-left"">
<img src="images/logo.png" height="62" width="232" alt="">
</a>
Hope that helped.
Some main issues to look into.
Browser size.
Is it wider at one point than the other?
It's obviously within the same browser but just in case, I would test this in multiple browsers, because you do want your code to be cross compatible.
To me it looks like a width problem.
Perhaps you have a #login div, or some oddly named, at the top right that contains that content and floats it, and being that the content is not responsive, but the div itself is. When the div shrinks a little the content itself doesn't and pushes the rest of the content down.
I'm using HTML5 Boilerplate css and I would like to apply the ir class to my footer menu.
The menu is in a list, and I use inline-block to display this list horizontally.
Here is the fiddle of the code. You can see that the image replacement works, but the text menu element after (that has no image) is translated to the bottom. This is due to the .ir:before css rule that simulate a block element which takes some room.
Is there a way to use the HTML5 Boilerplate technique without this side-effect ?
If not, I will go back to the text-indent:-9999px technique.
Bonus question : what are the benefits of the HTML5 Boilerplate technique compared to the text-indent one ?
The text-indent: -9999px method has some drawbacks. The main are:
does not work in IE6 and IE7 on inline-block elements.
1st gen. iPads have proven to have performance issues with this technique, with page rendering slowing down quite a bit.
Even if we don't see it, any browser in any device has to draw a huge div (more than 9999px) that overflows the screen. This is bad for performance as it adds page load time and requires more memory resources.
The .ir technique in HTML5 Boilerplate has proven much more performant and reliable. You're doing the right thing.
Having said that, I'm not 100% sure of what you're trying to achieve in your code. I have restructered the html a bit in this fiddle.
As you can see I have put red borders to understand where exactly elements are and how much space they take up. Every image/text is now in its own <li> which is semantically logic (one link/one list item), like so:
<ul>
<li>facebook<li>
<li>twitter</li>
<li>example page</li>
<ul>
I've also removed the float:left to the nav as you need to float the elements inside it, not the container itself. Hope this clears it up a bit and helps you get to where you want. I'm ready to edit this answer if any improvement is needed or if I have misunderstood what you're trying to achieve.
I am trying to solve a bug in ie7/ie8 for multiple background images...
I know that in originally it doesn't support in ie's but i have googled some interesting stuff on web, for example, Cross-Browser Multiple Background
Basically it is of two images background but i want to have 3 images with the defined position and size of the images via css...
Fiddle code is not working in ie7/ie8...
http://jsfiddle.net/CsKhy/4/
Can anyone help??
Use nested divs for a crossbrowser-compatible solution.
Demo:
http://jsfiddle.net/CsKhy/5/
Note: background-size is not compatible in IE8 or lower, so maybe it's better using images instead of backgroundimages.
I use
<style>
.bgImage{width:100%;}
</style>
Right after the body tag and before any other code insert this
<img src="yourimage" class="bgImage"/>
Not ideal solution but is compatible and works, I have used it many times. (make sure your image is a large image to begin with otherwise it will distort on larger screens)