Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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