I wonder if anyone has a solution for this. I want a grid of images 6 columns by two rows. At the moment it works fine: http://oaeyewear.4pixels.co.uk/brands.html
and I'm using:
.gallery {
list-style-type: none;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
margin-right: 0px;
}
But I know IE8 won't recognise the nth-of-type selector. Is there a way of
Make IE8 play along. Selectivizr won't do this with jQuery and
I don't want to introduce another library
Using some other conditional CSS just for IE8
javascript?
Ideally the solution needs to work responsively as the site is based on the Foundation Framework. At the moment it works well as it sizes down to two columns and I can just change the <li> with a media query to work across 300px.
In this case I would use a negative margin approach.
.gallery {
list-style-type: none;
margin-left: -26px;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-left: 26px;
}
You could try using ie7.js | ie8.js | ie9.js instead of Selectivizr.
That does support adding nth-of-type for IE, without needing any other libs.
On the flip side, it also implements a whole raft of other features and fixes into IE, which may or may not be what you want. If you're using other polyfills, you'll need to check that it doesn't conflict. It's worth trying though.
Related
So in the past few months I've taught myself web design. Of course there's a ton more to learn, but I feel that I have a firm grasp on what I know so far. One thing that I've wondered about recently is how necessary the div is, especially when I end up using absolute positioning. For instance I recently I wrote the following code:
<section id="header-section">
<header class="main-header">
<h1>The Voice of Jeremy Donahue</h1>
<nav class="main-navigation">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</section>
When I read the source code on a lot of pages it seems to me that things are generally grouped like this or very similar. Of course my assumption is, as a designer you have artistic license and can arrange your page anyway that you want, while keeping the user experience in mind and keeping your code semantic.
However, many times I end up positioning my elements using the {position: absolute} property and completely disregarding the containing div. So my thought is if I have an H1 for example and I plan on positioning it as I've described, then why even bother putting it in a div?, and the same for any other element that I position it such a way. Why not have them as free standing elements? I'm wondering if it's still good to do so for semantic reasons, or if it's just considered best practice to group things this way. I hope that I've been clear in the way that I've described this.
Just to be as descriptive as I can, here is the css that I've applied so far to this particular iteration of this page. It's no where close to finished (obviously), but you can see a couple of the absolute positioning that I've applied to this header section.
/*global*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: rgb(234, 234, 234);
}
body, .container {
min-height: 100%;
}
.container {
background: white;
margin-top: 6.25em;
}
header {
position: absolute;
top: 0.625rem;
background: transparent;
text-align: center;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
/*typography*/
h1 {
font-family: 'Parisienne', cursive;
font-size: 2.5rem;
color: #2713e7;
position: relative;
top: 1.25rem;
}
/*lists*/
.main-navigation {
position: relative;
top: 2.5rem;
}
.main-navigation li {
position: absolute;
top: 10px;
display: inline-block;
margin-right: 10%;
font-family: 'Atomic Age', cursive;
font-size: 1.5625rem;
}
/*borders*/
.main-navigation {
border: 2px solid black;
}
.main-navigation li {
display: inline-block;
border: 2px solid black;
}
1. So in the past few months I've taught myself web design.
Good job! Keep it up.
2. However, many times I end up positioning my elements using the {position: absolute} property and completely disregarding the containing div.
Not good, you don't want to position your element every time from the canvas. Do you? position: absolute will position an element based on it's nearest relatively positioned ancestor, if it doesn't have one you will have to position it according to the canvas.
3 So my thought is if I have an H1 for example and I plan on positioning it as I've described, then why even bother putting it in a div?, and the same for any other element that I position it such a way. Why not have them as free standing elements?
There are many ways to skin a cat, do what you feel most comfortable doing, thus said. You will not find many web designers doing this type of set up. And positioning each element on the page separately, because you will end up adding many, many classes to your document and that is a big no-no.
.googlePic{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
This is an example of my class googlePic in my css file. It works out and prints out nicely on google chrome and safari. however, it doesn't work on firefox. Nth gets printed out. Please help :)
The content property works with ::before and ::after.
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
Read this:
http://www.htmldog.com/reference/cssproperties/content/
IE8 only supports the content property if a !DOCTYPE is specified.
I know this may be a late response, but i came across the same problem.
I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.
What worked for me, was creating an empty 'content' and using a background to show the image:
it works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
edit: forgot to put the :before after the classname
you have to write two css class in style
.googlePic
{ /*this for crome browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
.googlePic: after
{ /*this for firefox browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
and its works for me :)
The best way to handle images throughout all web browsers is to use the background css property with the background-size.
However, IE8 and lower version won't support it (represent 2% of viewer in 2014)
.googlePic{
background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
background-size: contain;
float:right;
height: 19px;
}
I simply added 'alt' and it was working with without using Pseudo classes
If you change the tag to a div and not a img , content should work in firefox.
This saved me. Remember to remove alt attribute from the img or you will find the alt and the actual image in Firefox.
.googlePic, .googlePic:after{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
Adding the alt attribute to the img tag and then using content="url('...')" will work in firefox. For e.g.:
<img class="my-image" alt="myImage" />
.my-image {
content: url("...");
width: 10px;
height: auto;
display: inline-block;
}
I had the same problem recently and none of the solutions above worked for me. I have resorted to the following work-around.
I included Bootstrap in my projects and used its img-responsive class.
After that, I simply include the image using the <img class="img-responsive"> tag. It displays and scales beautifully on every browser and every viewport size.
Hopefully this is helpful to someone.
I came across the same problem, in my case I was not able to show the image using content:url(). I wanted to display waiting gif in one div. I don't know the details of Mozilla support. But it is resolved in my case by the following code.
.img_div{
background-image: url("wait.gif");
height: 20px;
width: 20px;
background-size: contain;
border: none;
}
It is working on Chrome 73 and Firefox 66.
worked for me this way.had to put file/// and then url.
file///C:/user/s/desktop.......jpg
You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.
Here is an example: http://jsfiddle.net/zBgHd/1/
I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.
I have some alignment problem in my coding. In Windows, all the browsers seems okay. But when I checked it in Mac firefox, the alignment is not perfect. I can fix it by changing the value a bit. But it should be only for Firefox on Mac.
Is there any CSS attributes or something for this?
Example: http://jsfiddle.net/9chk5/
.notes {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 0 auto;
background: #abc;
}
.search-notes {
font-size: 14px;
color: #484848;
position: relative;
top: -20px;
margin: 0 25px 0 22px;
}
and the HTML
<div class="notes" style="top:2px"></div><div class="search-notes">This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. </div>
</div>
You can use classes to achieve what you want. Sniff out the user's Browser and OS and add a class to body for your specific case. E.g. apply macFirefox class to body if user is using Firefox on Mac, then in CSS use .macFirefox .yourClass { /*CSS rules*/ }.
However it will be better to apply styles in a way which are crossbrowser.
For example in your particular case changing style to
.search-notes {
font-size: 14px;
color: #484848;
position:absolute;
display:inline;
/* position: relative;
top: -20px;
margin: 0 25px 0 22px; */
}
should do the trick.
Updated your fiddle
You can step into the gray area of undocumented feature queries. This way you can target only Firefox on Mac:
#supports (-moz-osx-font-smoothing: auto) {
#firefox-on-mac { display: block; }
}
And if you want to target all Firefox, except those which are on Mac, do this:
#supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) {
#firefox-not-on-mac { display: block; }
}
I am deliberately not using #-moz-document, because it has been disabled for public use per Firefox bug #1035091.
See this codepen for practical example.
This page and this page have a space over the header. They just appeared after an update but I am missing where the problem could be.
Note: This only happens in FireFox.
The first thing I'd check is whether your markup's valid. According to the w3c validator, you've got an unclosed div somewhere. In my experience that's exactly the kind of thing that'll cause different presentation in different browsers.
.column, .columns {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
In this class float:leftinside is redundant, remove he is normal. and the two class to write it separately. like this:
.columns {
margin-left: 10px;
margin-right: 10px;
}
.column{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
I would remove the columns or entire sixteen columns class from header, it has no use there, only a small left padding for the logo, that's all what you'll miss. Now it's in conflict with .columns css styles.
Or you could rewrite the css for that class that would apply only for header.
After removing columns class in chrome and ff on mac:
Just found the issue. I had
#artists {margin-bottom: 40px}
#album-design {margin-bottom: 40px}
I changed it to:
#artists {padding-bottom: 40px}
#album-design {padding-bottom: 40px}
I know this is the issue because it was only happening on the portfolio and music page, the only two pages with that particular CSS.
Anyone out there care to check it?
Thanks for all of the answers. Most let me know of other issues I will fix.
Thank you all.
Remove margin-top: 16px; from #header.
Also reduce padding-top: 5px; from #header .inner,
.column, .columns in this class float:left; and display:inline causing problem... please try to remove those two properties but it may effect in some other places.. do one thing in the header id place the float:none; so it will effect only for header.
#header {clear: both; display: inline-block; float: none; margin-top: 16px;}