I'm using the latest Zurb Foundation (4.0.4 at time of writing).
I would like Internet Explorer to work with it. Is this possible?
I tried changing around the CSS quite a bit but nothing seems to make it's layout like in Firefox.
I tried changing the columns display to inline but it broke the layout even more.
The main html that I want to look like in FF looks like this:
<div class="row">
<div class="large-6 columns">
<label for="amount">Amount:</label>
<input id="amount" type="text">
</div>
<div class="large-6 columns">
<label for="isbn">ISBN:</label>
<input maxlength="13" id="isbn" type="text">
</div>
</div>
There is partial support for IE in Foundation 4 that can be found on the Support Page. They also mention a gist that allows better grid implementation on ie8.
Maybe this can be improved by switching out Zepto for jQuery? Also, you can always use foundation 3.2.5 which has better ie support. See the F3 Support Docs. It says there is IE 8+ support out of the box, without modifications, but no mention of IE 7 or below.
There's also a good fix for IE7 as well:
https://github.com/Schepp/box-sizing-polyfill
It can make the Foundation 3 grids work on IE7 and 8, not tried it with 4 yet but it's worth a shot!
Here is a link to the updated grid-fix that will help with IE8. https://gist.github.com/hatefulcrawdad/5068210#file-ie8-grid-foundation-4-css
Related
I am having a strange issue while implying a transform effect at firebox browser.
Demo Link
"http://codepen.io/uzess/pen/zvOgmd"
Issue Explanation
1) The code works fine for chrome and safari, but the transform effect is not showing properly at Mozilla Firebox
2) The code also works fine for three images in all the browsers, but it didn't work properly at Firebox for four and more images.
Any help will be highly appreciated :)
Regards,
Biplab
It seems like when you add more than 3 items, there occurs errors ( irregularity ).
It is due to the css display properties.
Use
<div class="col-md-2" style="display: list-item">
or
<div class="mane1 contact" style="display: list-item">
Main thing here is display: list-item.
Please see fixed version here http://codepen.io/codersantosh/pen/yYLOvP
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I have a layout issue in my web page where I have (for example:)
<div style="position:relative;width:500px;min-height:300px;background:red">
<input type="text" style="position:absolute;top:20px;">
<input type="buttton" style="position:absolute;bottom:2px;right:2px">
</div>
The positioning is slightly different in different browsers (say about 2-4 pixels). For example, the above button is a few pixels apart from the border in chrome or safari than firefox, seamonkey and opera. Is there a solution to this problem so that the layout looks almost same in different browsers?
Reset and unify your CSS first.
Checkout http://html5boilerplate.com/ for a good start on this.
Has anyone noticed a change to the rendering in the latest Chrome on Windows (22.0.1229.94 m)?
On page
http://worldwide.espacenet.com/
we had until recently (and have in IE8/9, FX16/17, Safari 5)
and in Chrome (22.0.1229.94 m):
The CSS starts with YUI Reset CSS version: 2.5.1
Here is the relevant html
<div class="epoBar epoBarAction">
<div class="secondary">
<div class="epoBarItem">
Clear
</div>
<div class="epoBarItem epoBarItemForm">
<div class="formElement">
<span class="inputsubmit">
<input type="submit" class="submit" name="Submit" value="Search">
</span>
</div>
</div>
</div>
</div>
Weird behaviour: If I inspect element and toggle the float:left below twice, the buttons align as they should
div.epoBar div.epoBarItem {
float: left;
min-height: 1.67em;
padding-bottom: 0.42em;
}
Also if I add width:150px to the div with class="secondary", it also aligns.
Is there anything obviously weird or is there a known new bug I have missed in Chrome?
Hope someone will be so kind and inspect the page
Font rendering
Google chrome renders fonts differently to other browsers on windows to allow it to install without needing admin privileges. A pain, I know, but they outweigh ease of install over needing admin rights for antialiasing. That said, the font may be overflowing the width of the container you are putting it in, and should fixable by adding a larger width to the container, or removing it entirely. Also using ems rather than px will give different font sizes across browsers.
I'm using the Blueprint CSS framework to develop my website to ensure cross-browser compatability...except, it looks completely different in IE.
The site is http://rtwilson.com/academic-new/ and looks fine in Firefox and Chrome, but completely messed up in IE. The main body is not centred, the image is in the wrong place and the text is rather weird.
Does anyone have any idea how I can sort this? I thought the whole point of Blueprint et al. was that it sorted the problems with cross-browser (particularly IE) compatibility. I have included the correct IE style file - so any other ideas?
Blueprint is fine (although I have recently switched to Twitter Bootstrap)- regardless of the complexity of the site, and it does do all of the things for you, as long as your markup is correct and the classes are used correctly.
One place to start, other than the doctype (which should be added, as well - as mentioned by Michas), would be to add a "last" class to the div that contains your navbar div. The way you have it written right now is that you have a span-24, containing another span-24 immediately followed by a span-15 and a span-9.
You have:
<div class="span-24 last">
<div class="span-24">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
You should have:
<div class="span-24 last">
<div class="span-24 last">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
As it is written now, I would not be in the least bit surprised that IE can't figure out that there shouldn't be 48 spans in a single row.
If I am being honest, I wouldn't use blueprint css - a site simple as yours I would simply just create a seperate stylesheet for IE, and link it like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->