Cross Broswer Help?

[mikel2k3]

Hey guys,

Having a little trouble making one of my clients websites cross browser friendly.
I dont mind the odd pixel or image being places slightly out of place, i mean functionality and it being absolutly nothing like it should be!

It views fine in Firefox and Safari, but doesnt work in the slightest in Internet Explorer?!

Link: http://www.distrasdesigns.com/shawnwright/index.html

Any help appreciated!
- Mike

 

[GrandeMike]

More info please...

Code would be nice. I know that IE has issues with CSS and margins but most of them are usually prior to IE7.

 

[mikel2k3]

Heres the CSS markup:

html, body {
height: 100%;
margin: 0;
padding: 0;
text-align:center;
}
#bg { position:fixed; top:0; left:0; width:100%; height:100%; }
#content { position:relative; z-index:1; text-align:center; }
[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]

#wrap { width: 100%; height:550px; margin:0px auto; padding:0px; }
#logo { position:static; width:310px; height:280px; padding-top:220px; margin:0px auto; }
.left { float:left; }
.right { float:right; }
.rfix { margin:8px 30px 15px 0; }
.lfix { margin:0 0 15px 30px; }
.clear { clear:both; }
.draw { position:absolute; bottom:0px; padding-bottom:20px; margin:0px auto; left:auto; right:auto; text-align:center; width:100%; }


#content a:hover { text-decoration:none; } /*BG color is a must for IE6*/
#content a.tooltip span { display:none; padding:4px 6px; margin:123px 0px 0px -175px; }
#content a.tooltip:hover span{ display:inline; width:300px; position:absolute; text-align:left;  border-right:20px solid #ffffff; }

#content a.smalltip .box { display:none; padding:0; margin:-67px 0px 0px -315px; }
#content a.smalltip:hover .box{ display:inline; width:211px; height:97px; position:absolute; text-align:left;  border:0px; }

#content a.smalltip .box2 { display:none; padding:0; margin:-67px 0px 0px 117px; }
#content a.smalltip:hover .box2 { display:inline; width:219px; height:104px; position:absolute; text-align:left;  border:0px; }

Cheers again,
Mike

 

[misson]

What version(s) of IE? Always describe the software environment. Also, always explicitly describe what you want and what you get so we don't have to intuit what's "proper".

The fragmentary conditional comment:

[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]

is invalid for CSS. Conditional comments only work in HTML.

IE usually doesn't do what you expect with absolute positioning and no box offset (left, right, top and bottom properties).

With positioning, use box offsets rather than margins, positive or negative.

 

[mikel2k3]

I was testing it in IE7

Is there any other way of getting the same sort of functionality of the website in IE.
I suppose it doesnt overly matter if the coding of the page is completly different as ill just add a browser detect and redirect script in

 

[misson]

Browser detection and serving different content for different browsers is a bad route. If you can't get the same CSS to work on IE, the least evil route is to use conditional comments in the web page to give IE a different style sheet. At least that way, the content is (essentially) the same. You might also find that what works in IE also words in other browsers.

 

[mikel2k3]

So any clues how to get the same sort of functionality in IE?

As you can see, the way it is working at the moment is with the Hover effect and it just being positioned correctly.

Surely there is a different way to make the text below the logo change on hovering over the different letter in the logo?

 

[misson]

Take a look at my take (and the style that achieves the effect). It works for IE >= 7, but not IE6. It relies rather more on absolute positioning than I usually like, but it's fairly clean.

 

[mikel2k3]

Take a look at my take (and the style that achieves the effect). It works for IE >= 7, but not IE6. It relies rather more on absolute positioning than I usually like, but it's fairly clean.

Thats brilliant, works great How I wanted!
Will read through the code and try and work it all out how it was done!