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
235 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now