I see some people code directly the website for a desktop, but other after resenting all styles - start coding directly in media queries... for desktop, tablet and phone.
Is there any best practices or it's a preference?
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
}
.col2 {
float: left;
width: 25%;
margin-right: 5%;
}
.col3 {
float: right;
width: 25%;
}
#media screen and (max-width: 1280px)
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
.
..
...
}
Also if i write the media query for 5 different pages for example
#media screen and (max-width: 1280px)
/* Main Page */
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
/* Gallery */
/* Contacts */
Is it best way to use comments if the fail becomes to large so I don't get lost in it?
#user2852447, first you have to know about what is media query.
Responsive Design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects.
Now what is responsive design…?
RESPONSIVE DESIGN: Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.
A CSS media query we recommend to use for Smartphone’s is:
#media only screen and (max-width: 640px) {...} // it will render the screen view according to CSS define in this media query.
So we can use CSS Media Query to achieve responsive design for different devices.
CSS MEDIA QUERY: By using the #media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
Media Queries allow us to style elements for specific devices using attributes like resolution, aspect ratio, orientation and color index. Media queries are introduced in CSS3 and using this we are able to target specific screen sizes.
MEDIA QUERIES ATTRIBUTES: We can identify the characteristics of the device(s) browser or hardware by combining media queries features. Some of them are as follows.
Device-width: The device-width feature targets the width display area (screen size) of devices. In print media, this feature targets the width of a sheet of a paper.
Device-height: The device-height feature targets the height of the display area (screen size) of devices. In print media, this feature targets the height of a sheet of a paper.
Resolution: Queries that use the resolution target a screen’s resolution in dots per inch (DPI) or dots per centimeter (DPCM).
Orientation: The orientation media feature describes devices that use either a landscape or portrait orientation. If the height of a devices screen or sheet of paper is higher than or equal to its width, then the orientation is portrait. When the width is greater than the height, the orientation is landscape.
Basically media query is a tool which can make an existing website mobile and tablet compatible.
Hello and thanks a ton for any help with my problem. Here are the facts:
The URL is www.thecloudz.net, regarding the navigation links at the very top, the font is called brooklyn. The font on the URL appears correctly in Safari and Chrome, but not in Firefox. I was told I may have a plugin installed that's interfering with font-face.
The font-face settings for the URL are below, 'rock salt' is the default font showing up in FF, but according to the code below it should first show brooklyn. Why is it working on every browser except Firefox? Please help if you can, thank you!
`/* CHANGES FONT FOR NAVIGATION */
#font-face {
font-family: brooklyn;
src: url('http://thecloudz.net/files/BROOKLYN.eot');
src: url('http://thecloudz.net/files/BROOKLYN.eot?#iefix') format('embedded- opentype'),
url('http://thecloudz.net/files/brooklyn.woff') format('woff'),
url('http://thecloudz.net/files/BROOKLYN.TTF') format('truetype');
}
#navigation ul li a {
font-family: brooklyn, 'rock salt', serif;
font-size: 1.3em;
padding-top: 7px;
height: 50px;
}`
Firefox enforces a same origin policy.
http://thecloudz.net/ and http://www.thecloudz.net/ are not the same.
hi i have been trying for hours to get the image links inside the slider to work in IE 9 they work fine in Chrome can any one help
Yes, This is well-known and documented. I found your question with the same problem, this fixed it for me:
.nivoSlider a {
border:0;
display:block;
background-color: #fff;
filter:alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
}
I recently tried applying a gradient background to a webpage using only CSS3.
while testing out the following code:
body {background: -moz-linear-gradient(top, blue, white);}
The result was:
Not exactly what I was looking for...
Any idea what is going on?
OS is Win7 64bit and Firefox 4.
Thanks!
you may want to add no-repeat to that background property…
or set a height to the <body> (and the <html>) like so:
html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }
This is happening because the height of the body is small, and by default the background is repeating.
You can either make it not repeat:
body { background-repeat: no-repeat; }
or make the height of the container (html) the size of the window:
html { height: 100%; }
though note that the latter can sometimes have unexpected effects when scrolling.
I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.
section.rgba{
background-color: #B4B490;
background-color: rgba(200, 0, 104, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1
}
I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?
Anybody know how to fix it?
After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Apparently, there is no need for the -ms-filter and zoom rules.
Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...
IE8 is right here, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!
IE6 & 7 are incorrectly ignoring the fallback (so it's not really a fallback) and have their transparent background-color because of a bug, purely because the OP has the colors, both hex and RGBa specified using background-color
There are many ways to workaround this.. see: IE Background RGB Bug - and the last comment especially for ways - this workaround would only really be applicable if not using filters/gradients i.e. really using just RGBa (semi-transparent) backgrounds.
If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.
It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+
( at least I had to )
.widget-header {
text-align: center;
font-size: 18px;
font-weight: normal;
font-family: Verdana;
padding: 8px;
color: #D20074;
border-bottom: 1px solid #6F6F6F;
height: 100%;
/* Mozilla: */
background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
/* MSIE */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
/* Opera 11.10 + */
background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}
Hope this helps
I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
You're using Modernizer wrong. Modernizer places classes on the HTML element; not each individual element. Here's what I used in IE8 to color the SECTION tags.
.rgba section {
background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
background-color: #B4B490;
}
.no-cssgradients section {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1;
}
The zoom rule is to make sure hasLayout was triggered, your use-case not having a need for it is probably because hasLayout is already being triggered.
regarding the -ms- prefix, according to Microsoft's documentation ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx scroll down to "Downlevel Support and Internet Explorer 4.0 Filters", no anchors I can link to), to target IE8, one should be using the -ms- prefix, to target anything prior to that, one should be using the unprefixed one
#element {
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
}
The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.
you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:
http://www.quirksmode.org/css/opacity.html for that theory
so you need to do like this:
background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(213,214,215)),
color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');
this works for me
besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors