Printable View
Okay, question for those of you more versed in CSS than I am; is there a way to have the same CSS tag act differently depending on what browser is being used? What I basically want to do is have the margins on something set differently depending on if the browser is or isn't IE.
For example, something like:
if browser=IE
.testtag { margin: 8px;}
else
.testtag { margin: 4px;}
Anyway to do something like that?
Sure, but you'll need Javascript to do it. There's no conditional branching support in css.
If it's just IE, the simplest way to detect its presence is to test for the document.all object.
That route's more useful if you'll have significant differences between css code to address inconsistent browser behavior - just have separate css files.Code:<HEAD>
<SCRI.PT>
if ( document.all )
document.write('<LINK HREF="ie.css" TYPE="text/css" REL="stylesheet">')
else
document.write('<LINK HREF="others.css" TYPE="text/css" REL="stylesheet">')
</SCRI.PT>
</HEAD>
<BODY>
...
</BODY>
http://www.dynamicdrive.com/dynamicindex9/dyncss.htm - It can be done for the OS (MAC vs. PC) as well.
The other way would be to use "id" instead of "class" so you can programmatically adjust the object upon page load.
Take the period out of "SCRI.PT" btw.Code:<HEAD>
<SCRI.PT>
function updatecssprops() {
if (document.all) {
document.all["myElement"].style.marginRight = "8px"
document.all["myElement"].style.marginLeft = "8px"
}
}
</SCRI.PT>
</HEAD>
<BODY onload="updatecssprops()">
<P ID="myElement"> ... </P>
</BODY>
Shidoshi, I'm just curious as to why you'd want to do this. Any specific reason?
There are ways to write code in CSS so that only certain OS browsers can read it. http://www.positioniseverything.net/ gives a detailed account of many CSS browser bugs and their workarounds.
For my new forums, I'm doing things that IE just can't handle properly. My original thought was to try to have the same forum skin work in everything using this, but I've decided to just make two skins - one that works with anything, and another "souped-up" skin that only works in browsers that properly rendered the various (100% W3C approved) CSS codes that I'm using.
You should make a minimalist skin. Text only, no tables, no css. "IE Users - Please use this skin."Quote:
Originally Posted by shidoshi
Ahh, that makes sense Shidoshi. I agree with Mike -- make sure the IE users understand that their browser is crap.
Okay, here's my new question.
I've created a new launch page for my website, and I'm using CSS so that when you move your mouse over each button, a position: absolute div is revealed to explain to you in more detail what each section of the website is.
And, of course, it works great in everything but IE.
What I want is for that div to present text that is pretty much page centered, along with everything else on the page. My first attempt was to make the new div wide:auto, and then either set the left and right declarations to be 0, or set the left and right margins accordingly. This works great in FireFox, Safari, etc., but IE doesn't want to do this.
My next idea was to have the div have an absolute width - 700px - and then set either left and right, or margin-left and margin-right to a variety of things. (50% each, 0 each, 4% each, etc.) I can't get any of these to properly align in IE.
I've also tried to have the div be 100%, but that then creates extra horizontal scrolling in things like FireFox.
All I want is to have a div that is position: absolute that can present a piece of text that will be centered on the page no matter how wide the browser is.
Help?
Page: http://morningmayo.com
CSS: http://morningmayo.com/basic.css
IE doesn't like z-index and visibility???
That's totally stupid.
Also, you do know you're using the "strict" xhtml dtd?
I'm still a bit fuzzy on that declaration. What should I be using?Quote:
Originally Posted by Mike