hi guys,
.mail_btn{
float:right;
margin: 2px 0 0 0;
margin: 2px 1px 0 0 !important; /* Mozilla */
}
i have this peice of code, now am i correct in saying that the line
margin: 2px 1px 0 0 !important; /* Mozilla */
will only apply to FF?
i tried it out and it was changing my IE too. am i doing something wrong?
thanx guys!important; is a statement that only mozzilla understands, hence the comment, the comment itself does nothing. Try switching the two lines around, see what happens.However, I would ask you to not use "!important". What it does is keep the style from being overwritten. Mozilla and Firefox users can prepend a style sheet to establish our preferences. And we use "!important" so that the things that are important to us are not overridden. Overriding something important to me might make you happy, but it will make me unhappy enough to avoid your site in the future.Hi guys,
im a bit confused now.. how do we make changes in FF and not IE anyother way? is there a better way to do this?
Charles: what do you do instead?
thanks heapsCharles: what do you do instead?I write one page that works on all browsers.
But I have been known to do some server side browser sniffing to send just the right CSS file.Thanks,
so in my example
.mail_btn{
float:right;
margin: 2px 0 0 0;
margin: 2px 1px 0 0 !important; /* Mozilla */
}
in FF the button is one pixel out. how would you make this work without using important?.mail_btn{
float:right;
margin: 2px 1px 0 0;
}
* html .mail_btn{
margin: 2px 0 0 0;
/*IE only rule*/
}Hi thanks for that,
can you please exaplain to me exactly what is happening?
thanxHi thanks for that,
can you please exaplain to me exactly what is happening?
thanx
The * stands for any element. IE believes that HTML is a child of another element. But HTML is the root element, therefor, only IE will apply the rule.so it will be better to do it this way than use important?
sounds simple enough.
and if a button (or anythingelse for that matter) is appearing differnt in IE, just put this
* html
infront of your css attriubte?
and all will be good?
great.Both are hacks and should be avoided.Both are hacks and should be avoided.
Though often times I can get through without a hack, if I'm trying to accomplish something with a bit more complex CSS, I need to jog IE. I prefer one or two IE hacks, than browser detection. The user agent name can easily be faked, Opera even markets it as one of its option. So I detect an Opera browser as IE, send them the IE stylesheet, and now it's broken. Or, I use this, which only IE will understand, and has a valid syntax (It just isn't matching anything for compliant browsers) and the IE rendering engine will get what it needs to display the page the intended way.A little contraversal, but hey, this seems a pretty practical use of the !important attribute.<p style="display: none !important; display: block; background-colour: #ff9; font-wieght: bold">You're using Internet Explorer, stop it <!-- some more detail --></p>You might also want to add that all standards compliant browsers understand !important, not just mozilla and Firefox users. Opera, Safari and Omniweb do to (thought I'm not entirely sure about Omniweb).
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/cascade.html#important-ruleshi">http://www.w3.org/TR/CSS21/cascade.html ... nt-ruleshi</a><!-- m --> Guys,
thanx for your responses, has been an interesting debate.
but i still dont know what to do except for not use hacks.
i think i am going to go with the * html hack seems to work?
anyone else's ideas?You might be able to use conditional comments (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->), which are less of a hack. These are a proprietary Microsoft extension that look like normal comments to all other browsers (so will not break validation). They allow you to test for a particular version (or set of versions) of IE and correct its mistakes.
Adamthanx for that, was a good read. most likey will use this.
i did not know there has been such debate over these hacks has been interesting!I rarely use hacks. They are messy and usually avoidable. Try different units of measure before using hacks. If margins are a problem, then try setting all borders and paddings to zero before gradually working up. Although IE has crazy float characteristics, it's box model is reliable in standards mode so keep fiddling.
.mail_btn{
float:right;
margin: 2px 0 0 0;
margin: 2px 1px 0 0 !important; /* Mozilla */
}
i have this peice of code, now am i correct in saying that the line
margin: 2px 1px 0 0 !important; /* Mozilla */
will only apply to FF?
i tried it out and it was changing my IE too. am i doing something wrong?
thanx guys!important; is a statement that only mozzilla understands, hence the comment, the comment itself does nothing. Try switching the two lines around, see what happens.However, I would ask you to not use "!important". What it does is keep the style from being overwritten. Mozilla and Firefox users can prepend a style sheet to establish our preferences. And we use "!important" so that the things that are important to us are not overridden. Overriding something important to me might make you happy, but it will make me unhappy enough to avoid your site in the future.Hi guys,
im a bit confused now.. how do we make changes in FF and not IE anyother way? is there a better way to do this?
Charles: what do you do instead?
thanks heapsCharles: what do you do instead?I write one page that works on all browsers.
But I have been known to do some server side browser sniffing to send just the right CSS file.Thanks,
so in my example
.mail_btn{
float:right;
margin: 2px 0 0 0;
margin: 2px 1px 0 0 !important; /* Mozilla */
}
in FF the button is one pixel out. how would you make this work without using important?.mail_btn{
float:right;
margin: 2px 1px 0 0;
}
* html .mail_btn{
margin: 2px 0 0 0;
/*IE only rule*/
}Hi thanks for that,
can you please exaplain to me exactly what is happening?
thanxHi thanks for that,
can you please exaplain to me exactly what is happening?
thanx
The * stands for any element. IE believes that HTML is a child of another element. But HTML is the root element, therefor, only IE will apply the rule.so it will be better to do it this way than use important?
sounds simple enough.
and if a button (or anythingelse for that matter) is appearing differnt in IE, just put this
* html
infront of your css attriubte?
and all will be good?
great.Both are hacks and should be avoided.Both are hacks and should be avoided.
Though often times I can get through without a hack, if I'm trying to accomplish something with a bit more complex CSS, I need to jog IE. I prefer one or two IE hacks, than browser detection. The user agent name can easily be faked, Opera even markets it as one of its option. So I detect an Opera browser as IE, send them the IE stylesheet, and now it's broken. Or, I use this, which only IE will understand, and has a valid syntax (It just isn't matching anything for compliant browsers) and the IE rendering engine will get what it needs to display the page the intended way.A little contraversal, but hey, this seems a pretty practical use of the !important attribute.<p style="display: none !important; display: block; background-colour: #ff9; font-wieght: bold">You're using Internet Explorer, stop it <!-- some more detail --></p>You might also want to add that all standards compliant browsers understand !important, not just mozilla and Firefox users. Opera, Safari and Omniweb do to (thought I'm not entirely sure about Omniweb).
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/cascade.html#important-ruleshi">http://www.w3.org/TR/CSS21/cascade.html ... nt-ruleshi</a><!-- m --> Guys,
thanx for your responses, has been an interesting debate.
but i still dont know what to do except for not use hacks.
i think i am going to go with the * html hack seems to work?
anyone else's ideas?You might be able to use conditional comments (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->), which are less of a hack. These are a proprietary Microsoft extension that look like normal comments to all other browsers (so will not break validation). They allow you to test for a particular version (or set of versions) of IE and correct its mistakes.
Adamthanx for that, was a good read. most likey will use this.
i did not know there has been such debate over these hacks has been interesting!I rarely use hacks. They are messy and usually avoidable. Try different units of measure before using hacks. If margins are a problem, then try setting all borders and paddings to zero before gradually working up. Although IE has crazy float characteristics, it's box model is reliable in standards mode so keep fiddling.