Internet Explorer/CSS problem

Status
Not open for further replies.
Tensegrity

Tensegrity

New member
Dec 14, 2007
495
4
0
Brooklyn
leadsmasher.com
I'm designing a page for a client. Most of my content is CSS. Viewing it in Firefox/Safari is fine, but in IE looks like utter hell. Is there any way to compensate for the fact that IE sucks, but also keeping the CSS for SEO juice? My cousin recommended that I put the CSS "behind" the design, and make it "invisible" with the z-index so the spiders can still read it. And then put the actual text in my image with photoshop integrated into the jpg so it won't be affected by browsers. It seems like a good idea, but I just wanted to get some other opinions. Thanx for your help in advance!
 


Learn proper CSS and workarounds for all the quirks that IE has.

CSS can be made to work on IE.

But, because IE is a stiking pile of ratshit, expect to work oh so much harder just to get the browser that should not be to behave.

::emp::
 
Thanx for the tips...Until I learn CSS the right way for IE, is there a possibility I can shove the CSS way off screen (like 5000 pixels), and turn off the horizontal scrollbar? I'm being told this is better than the z-index method, since spiders don't like css in a negative z-index due to spammers using this method. Is this an option? Thanx.
 
3/5 of the work is for making stuff work in IE

read about the broken box model to understand the most important thing you need to make your stuff display correctly in IE

basically when you have a div or a td you can specify its width/height assigning to it a css class/id, then if you want to add padding or margin you need an internal container (another div) where you apply padding and margin, otherwise IE renders width and height as width + padding instead of putting padding inside the container
 
You could also use the internet explorer CSS hacks. Simply append a "." or a "_" before the attribute you're trying to set a value for. No other browser understands them.

Code: 
padding: 8px; /* rendered by all browsers */
.padding: 10px; /* rendered by IE 6 + 7 */
_padding: 12px; /* rendered by IE 6 Only */

In this example, the padding would be 12px to IE6 browsers, 10px to IE7 browsers, and 8px to the rest of the world.

You should suggest your client put a firefox button on his site, and then link it to your adsense account for a quick buck.
 
I am not sure what you are planning to do with the z-index, but I would hold off on it - I've had my share of mishaps w/ FF and IE and I've never had to resort to such strangeness.

There is a way to set FF and IE to act very similarly - its called "standards mode". If you take a look at this page's source you will see the text:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This particular code tells browsers that this page adheres to some strict standards, and forces all browsers to treat all CSS in a certain way. Before this mode was available, IE had a non standards-compliant mode called "quirks mode" which is still present in it and screws up CSS completely.

For a rundown, read this very valuable page:
Eric Meyer on CSS: Picking a Rendering Mode
 
in your header...

<![if lt IE 5]>
<link href="ie-css.css" type="whatev">
<![endif]>


There are many conditional comments with IE, just look it up. It's the easiest way to fix IE problems... just add another style sheet to fix the IE problems.
 
Another trick is that IE will read the FIRST (and only the FIRST) instance of a CSS tag, and Firefox will read all of them.

Code: 
padding: 8px; /*  will work in IE  */
padding: 12px; /* will actually overwrite the last one in FF  */

also the // comment will hide something from firefox but NOT from IE (it ignores it so you can put something for IE that Firefox won't see)
 
mabye if u wernt a total nub cake with CSS ud be able to it... if u want it doen right PM and ill do it for you........for a lil fee HHAHAHAHHAHA

-l33t 4l1fe HEHheheheheheheheheheh AHHHHHHHHHHHHHHHHHHHHHHH p3n15!!!!
 
Status
Not open for further replies.
Top Bottom