Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

Cross-Browser Compatible CSS Snippet

The following XHTML and the attached CSS works fine in most browsers; however, in some browsers such as IE 6 it gets all out of whack. Is there anyway I can optimize this code to work in IE 6 and beyond. A working example of this code can be found here: http://www.emarketbuilders.com/portfolio/

<div class="holder" style="margin-bottom:10px ">
  <div class="pcontainer">
    <div class="pphoto"></div>
    <div class="ptext">
      <div class="arrowlink" style="float:right ">
      </div>
    </div>
  </div>
</div>
.holder{overflow:auto}
div#pcontatiner{float: left; width: 501px; margin: 10px 0px 0px 0px}
div.pphoto{float: left; width: 150px; margin:10px 5px 10px 10px}
div.ptext{float: left; width: 331px; margin: 10px 0px 10px 0px}

Open in new window

0
EMB01
Asked:
EMB01
  • 3
  • 3
1 Solution
 
blatantwasteCommented:
remove the float for ie6
<!--[if lte IE 6]>
<style type="text/css">
.holder{overflow:auto}
div#pcontatiner{width: 501px; margin: 10px 0px 0px 0px}
div.pphoto{width: 150px; margin:10px 5px 10px 10px}
div.ptext{width: 331px; margin: 10px 0px 10px 0px}
</style>
<![endif]-->

Open in new window

0
 
EMB01Author Commented:
Do I stick that right in the CSS so the end result would be as attached?
.holder{overflow:auto}
div#pcontatiner{float: left; width: 501px; margin: 10px 0px 0px 0px}
div.pphoto{float: left; width: 150px; margin:10px 5px 10px 10px}
div.ptext{float: left; width: 331px; margin: 10px 0px 10px 0px}
<!--[if lte IE 6]>
<style type="text/css">
.holder{overflow:auto}
div#pcontatiner{width: 501px; margin: 10px 0px 0px 0px}
div.pphoto{width: 150px; margin:10px 5px 10px 10px}
div.ptext{width: 331px; margin: 10px 0px 10px 0px}
</style>
<![endif]-->

Open in new window

0
 
blatantwasteCommented:
No, that would go in the head of your page between the <head> and </head> tags... so it would look like:
<html>
<head>
<title>Blah</title>
<style type="text/css">
These are your normal styles here...
</style>
 
<!--[if lte IE 6]>
<style type="text/css">
.holder{overflow:auto}
div#pcontatiner{width: 501px; margin: 10px 0px 0px 0px}
div.pphoto{width: 150px; margin:10px 5px 10px 10px}
div.ptext{width: 331px; margin: 10px 0px 10px 0px}
</style>
<![endif]-->
</head>
<body>
body stuff...
</body>
</html>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
EMB01Author Commented:
That means the browser knows to render that CSS if it's IE6 instead of the CSS that exists further down the page? Where can I read more about that type of stuff (<!--[if lte IE 6]>)?
0
 
blatantwasteCommented:
that basically says if the browser is Less Than or Equal to Internet Explorer 6, then apply whatever is contained within the "if" statement...

You can read more about it here: http://msdn.microsoft.com/en-us/library/ms537512.aspx
0
 
EMB01Author Commented:
Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now