[css-d] CSS3 media queries
Hello,
I'm using CSS3 media queries on a site, and I'd like them to work on IE8
and older browsers. I've read about css3-mediaqueries-js
(http://code.google.com/p/css3-mediaqueries-js/), but I don't know how
to use the script.
I'm including this on my main.css:
@media (max-width: 500px) {
...
}
I also include css3-mediaqueries.js in the head of my document, but I
don't know what I'm missing as media queries still don't work on IE.
Thank you.
--
Bernat Lleonart
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Setting font-size on body element
Hello, I usually specify font-size on the body as 1em, and then, as the main text of the page has to be 12px, I have to declare each p, li, etc. to be .75em. I've been told to put that value (.75em) right on the body, so I won't need to reduce font-size for every element that has to be 12px. I don't know which of those options is better, and why. I'd like to know your opinion about it. Thank you. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button element with img
2008/4/22 Geoffrey Hoffman [EMAIL PROTECTED]: Don't you want input type=image / ? I know I can use input type=image /, it's just that I don't understand why this happens. By the way, it only happens in Firefox 2, while IE8b1, IE7, IE6, Safari 3.1, and Opera 9.26 render the button properly. May it be a Firefox bug? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Button element with img
Hi,
I've got a problem with a button element containing an image. This is the html:
button type=submit
img src=button.gif width=22 height=22 alt=Go/
/button
And this is the css:
button {
padding: 0;
background: aqua;
border: none;
width: 22px;
height: 22px;
}
button img {
margin: 0;
}
The problem is that, although I specify a 0 padding for the button and
a 0 margin for the image, it seems that the image has a margin, as if
it was a couple of pixels moved to the right. Therefore, the
background of the button is visible, and the img is cropped.
Is there any workaround to solve that?
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 bug - combo popup listbox cropped horizontally
Hi, I have a select element with a specified width of 200px. Some of the options in the listbox are wider than 200px. In Firefox the list expands and it is wider than the select element, but in IE6 the list remains 200px wide, so the list items appear cropped on the right. I have found this is a bug [1]: Internet Explorer 6 - For limiting the width of select (combo boxes), it ignores the setting of the max-width CSS property. Nevertheless the width property works, but unlike Firefox, the popup listbox of the combo will be cropped horizontally. But I don't know if there's is a way to fix it... Any help will be appreciated. Thanks a lot. [1] http://css-discuss.incutio.com/?page=FormElements __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Filter rules for Opera 9
Hello, Is there a way to filter some css rules for Opera 9? I've been searching but can't find anything. I'd be grateful if someone can help me. Thanks a lot. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Remove frame borders through CSS
Hi, I'm building a site using frames, and if I use the property border=0 in the frame tag, because it doesn't validate. I'd like to know how can I achieve the same effect through CSS. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Remove frame borders through CSS
I know what you mean, but this time I have no choice, I'm working on a system that already uses frames, and I can't avoid them. I'm trying to validate the code, and frameset border=0 is not valid. On 10/17/06, Ian Young [EMAIL PROTECTED] wrote: Subject: [css-d] Remove frame borders through CSS Hi, I'm building a site using frames, and if I use the property border=0 in the frame tag, because it doesn't validate. I'd like to know how can I achieve the same effect through CSS. Thanks! __ Don't want to appear negative, but don't build a site using frames! Search engine hate them and seems a waste of good CSS. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/477 - Release Date: 16/10/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Remove frame borders through CSS
On 10/17/06, Felix Brill [EMAIL PROTECTED] wrote:
Bernat Lleonart wrote:
Hi,
I'm building a site using frames, and if I use the property border=0
in the frame tag, because it doesn't validate.
I'd like to know how can I achieve the same effect through CSS.
Simply do:
frame { border: none;}
Felix
I'm trying with frame { border: none;} and it doesn't work (perhaps
because I'm on Firefox on Mac OS X?).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari repeating background image
On 9/16/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On Sep 16, 2006, at 3:46 AM, Bernat Lleonart wrote:
#container {
background: url(images/picture.jpg) 0 12px
no-repeat;
border: 1px solid red;
The problem is:
If the div doesn't expand vertically as much as the height of the
image, the image is repeated vertically. However, if I position the
image at 0,0, the problem disappears. Moreover, if the div is higher
than the image, it doesn't repeat.
I know there is a bug with Safari and background images, but I thought
it was in earlier versions of the browser. Mine is 1.3.2 (v312.6).
The background image bug in Safari... massively present in release
builds (1.3.2 and 2.04).
To give you some hope, the problem is partly fixed in Webkit nightly
builds.
No easy or fit-it-all fixes, I'm afraid.
In your case, you may try to add 12px (trasparent ?) to the top of
your image, and position it at 0, 0 instead of 0 12px.
Or make a smaller image.
Or make sure there is enough content in your #container ... :-).
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
Thank you Philippe, I'll try modyfying the image dimensions.
Bernat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari repeating background image
Hello,
I have this code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
title/title
style type=text/css
#container {
background: url(images/picture.jpg) 0 12px
no-repeat;
border: 1px solid red;
}
/style
/head
body
div id=container
pLorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Aliquam turpis purus, euismod at, rutrum et, condimentum ut, turpis.
Aliquam consequat tortor nec nulla. Quisque eget tortor quis purus
laoreet. Aliquam turpis purus, euismod at./p
/div
/body
/html
The problem is:
If the div doesn't expand vertically as much as the height of the
image, the image is repeated vertically. However, if I position the
image at 0,0, the problem disappears. Moreover, if the div is higher
than the image, it doesn't repeat.
I know there is a bug with Safari and background images, but I thought
it was in earlier versions of the browser. Mine is 1.3.2 (v312.6).
I've searched for a solution, but I can't find one.
Thanks
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with margins and IE
Hello,
I'm stuck with what seems a simple problem, but I can't find the
solution. I have a container and two div's inside it, one is floated
left (and it has a left margin), and the other is floated right (and
it has a right margin).
While FF renders everything correctly, IE doen't respect the margins.
Here's the code:
*
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
title.../title
style type=text/css
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
text-align: center;
font-family: verdana, arial, sans-serif;
background: #42b587;
}
.clearit {
clear: both;
}
#contenidor {
width: 766px;
margin: 0 auto;
text-align: left;
background: #fff;
}
#principal {
width: 581px;
float: left;
background: aqua;
margin-left: 7px;
}
#secundari {
width: 150px;
float: right;
background: yellow;
margin-right: 16px;
}
/style
/head
body
div id=contenidor
div id=principal
pprincipal/p
/div
div id=secundari
psecundari/p
/div
div class=clearit
/div
/div
/body
/html
*
Thanks for helping.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with margins and IE
Thank you Gunlaug and Tony, now it works.
On 9/13/06, Tony Crockford [EMAIL PROTECTED] wrote:
Bernat Lleonart wrote:
Hello,
I'm stuck with what seems a simple problem, but I can't find the
solution. I have a container and two div's inside it, one is floated
left (and it has a left margin), and the other is floated right (and
it has a right margin).
While FF renders everything correctly, IE doen't respect the margins.
Here's the code:
*
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
title.../title
style type=text/css
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
text-align: center;
font-family: verdana, arial, sans-serif;
background: #42b587;
}
.clearit {
clear: both;
}
#contenidor {
width: 766px;
margin: 0 auto;
text-align: left;
background: #fff;
}
#principal {
width: 581px;
float: left;
background: aqua;
margin-left: 7px;
}
#secundari {
width: 150px;
float: right;
background: yellow;
margin-right: 16px;
}
/style
/head
body
div id=contenidor
div id=principal
pprincipal/p
/div
div id=secundari
psecundari/p
/div
div class=clearit
/div
/div
/body
/html
*
Thanks for helping.
try:
#principal {
width: 581px;
float: left;
background: aqua;
margin-left: 7px;
display: inline;
}
#secundari {
width: 150px;
float: right;
background: yellow;
margin-right: 16px;
display: inline;
}
floated elements with a defined width trigger a doubled margin bug in
IE, making them too wide for your container no doubt.
see:
http://www.positioniseverything.net/explorer/doubled-margin.html
IE Doubled Float-Margin Bug - CSS fixes and workarounds
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Keywords, minimum font-size and Firefox
Hello,
I'm testing keywords for font-size properties, as in this example:
---
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
title/title
style type=text/css
body {
font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif;
}
.xx-large {
font-size: xx-large;
}
.x-large {
font-size: x-large;
}
.large {
font-size: large;
}
.medium {
font-size: medium;
}
.small {
font-size: small;
}
.x-small {
font-size: x-small;
}
.xx-small {
font-size: xx-small;
}
/style
/head
body
p class=xx-largexx large/p
p class=x-largex large/p
p class=largelarge/p
p class=mediummedium/p
p class=smallsmall/p
p class=x-smallx small/p
p class=xx-smallxx small/p
/body
/html
---
IE6-Win renders xx-small as 9px, and x-small as 10px. However,
FF1.5-Win renders both xx-small and x-small as 10px.
I have been told that in FF, under Tools Options Content Fonts
colours Advanced Minimum font size, it is by default set to 10px.
I have Web Developer Toolbar installed, and I can disable that minimum
font size so xx-small == 9px.
What I want to know is whether that minimum font size is set to 10px
by default when you first install FF, and if it is like that in all
versions of the browser.
If that is true, then we can't use xx-small to render 9px fonts, which
I think is a limitation, and besides, we have two different keywords
(x-small and xx-small) that look the same size in FF.
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Hello,
On 6/17/06, Ingo Chao [EMAIL PROTECTED] wrote:
Bernat Lleonart wrote:
Hello,
I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.
It works in IE, but not in FF.
see the Firefox installation folder,
/res/forms.css
legend {
position: static ! important;
float: none ! important;
}
By design, you cannot position or float it from within an author style
sheet.
Ingo
Thanks for your explanation.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Hello,
I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.
It works in IE, but not in FF.
Any idea where is the problem?
Thanks
Here's the code:
**
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=ca
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
style type=text/css
form {
background: #fff;
border: 1px solid #ff8200;
border-top: 1em solid #ff8200;
margin: 0;
padding: 0;
width: 11em;
margin: auto;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
legend {
position: absolute;
top: -1em;
}
/style
title/title
/head
body
form action=
fieldset
legendLegend/legend
p
label
for=nomNom:/label
input
name=nom id=nom type=text value=Cercar /
/p
/fieldset
p
input
type=submit value=Cercar class=submit /
/p
/form
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Hi,
On 6/17/06, Christian Montoya [EMAIL PROTECTED] wrote:
Did you try:
legend {
position: absolute;
top: -1em;
display:block;
}
?
I've just tried it but it doesn't work.
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout based in em's: different widths FF/IE
Hello,
I have this problem: I am creating a layout based in em's. I define
font-size in the body to be 62.5%, so then I can work as I was using
px. In Firefox/Win everything is correct, but in IE/Win widths are
smaller. I have isolated the problem in the following example: the box
is 100px wide in FF, but it is 99px wide in IE.
Is that a bug? How could I fix it?
Thank you
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=ca
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
title/title
style type=text/css
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
}
#box {
width: 10em;
background: gray;
}
/style
/head
body
div id=box
phello/p
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
