Solved

How do I make left navigation bar height differences compatible in IE vs FF, also how to style jump menu (not finished on page)

Posted on 2008-10-19
4
239 Views
Last Modified: 2012-05-05
How do I make the length of the left navigation area even with the photo and right side news area compatible for IE7 and FF2?   I would really rather not have to create a different CSS for each browser!
Test site is at http://www.wsdgmedia.com/ccpetest/template.html, css is attached.

I know I mixed tables and CSS, but was requested to do so.  

Also, on this same file, I want to style the jump menu to coordinate with the rest of the site. So the drop down button, the borders of the box, etc.


ccpe-css.txt
0
Comment
Question by:cjceer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
eszaq earned 250 total points
ID: 22759561
If you want your CSS clean, you HAVE to create separate CSS file for IE. Do not create complete CSS file, just a small one with a few fixes. Actully, you have to create two new css files - one more for IE6 with additional fixes (IE6 is still used a lot and is much buggier then IE7).  Use syntax readable by IE browsers only:

<link href="styles/ccpe.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="styles/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

These stylesheets will be ignored by Firefox as it will see the code as HTML comments. Make sure to call CSS files in this order. So declarations in CSS targeting IE override declarations in main stylesheet.
0
 

Author Comment

by:cjceer
ID: 22760740
Can you recommend a good resource to make the CSS files compatible per browser as you have outlined?  

0
 
LVL 8

Assisted Solution

by:eszaq
eszaq earned 250 total points
ID: 22763030
You can start here:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
http://www.positioniseverything.net/explorer.html
Google search for 'css IE bugs' will bring you a boatload of links.

Also, you can search for 'css hacks', but using hacks results in messy CSS that you can get lost in. So, use of additional CSS files for IE is better - clean and easy to keep track of.
0
 

Author Closing Comment

by:cjceer
ID: 31507682
I was hoping for an easier approach, but sometimes the best way isn't the easiest way.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question