close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Troubleshoot cross-browser compatibility conflict

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, Free Tools, CSS, Dreamweaver

rating
2 ratings | Sign in to rate this tutorial | View comments

Getting the design in your cascading style sheets (CSS) to display perfectly in all browsers can be a cumbersome and confusing process. Older browsers, such as Internet Explorer 6, struggle to display certain CSS properties correctly. In this tutorial, you will learn how to troubleshoot the most common issues reported regarding cross-browser compatibility and CSS Sculptor layouts.

next sectionarrow down
arrow downWhat do you need to start?

  1. Dreamweaver
  2. CSS style sheet

next sectionarrow down
arrow downCSS design tips

Before you learn the method of commenting out CSS selectors to identify cross-browser compatibility design issues, review these basic style sheet tips regarding Height, Font Size / Line Height, Padding, and Borders.

Always make a copy of your style sheet before experimenting with changes.
  1. Height

    1. Do not use height: auto when trying to achieve cross-browser compatibility.

    2. Instead, use height: 100%.


  2. Font Size / Line Height

    1. If you increase the font-size property, you will also need to increase the line-height property.

    2. Line-height should be at least the same size as the font-size.


  3. Padding

    1. Padding affects the total width and height of your elements.

    2. The total width of a div is equal to width + right-padding + left-padding.

    3. The total height of a div is equal to height + top-padding + bottom-padding.


  4. Borders

    1. Dotted borders will not display in Internet Explorer 6 or older.

    2. Be aware these borders will display as dashed borders in these browsers.

When modifying pixels, it's easier to spot results if you temporarily add or subtract a
larger number of pixels and then back into desired results.

arrow downTroubleshoot CSS design issues

Now you will learn how to troubleshoot cross-browser compatibility conflict in your CSS design by narrowing down the source using the Apply Comment and Remove Comment options.

  1. In the Dreamweaver Files panel, open your style sheet. If your style sheet was created by a WebAssist extension, it will be named style.css.




  2. Beginning at the top of the style sheet, highlight each CSS selector and apply a comment.

    1. From the Coding panel, choose the Apply Comment option.

    2. Select Apply /**/ Comment to wrap code around the selector.



    Wrapping Apply /**/ Comment around the selector prevents the style from being applied to your page.

  3. Continue commenting out CSS selectors one line at a time until the design issue disappears.
    Save your style sheet and preview your page often as you proceed.

  4. From the Coding panel, choose the Remove Comment option. Remove all CSS selectors with the exception of the last one.


  5. Now that you've identified the CSS issue, decide if that particular style is necessary to your design. Then investigate how to handle it for cross-browser compatibility.

  6. If the style is retained, use the Remove Comment option one last time.


  7. Save your style sheet (Ctrl or Cmd + S) and preview your page (File > Preview in Browser).

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
2 ratings | Sign in to rate this tutorial

Mike Perry: 11 Years, 2 Weeks, 22 Hours, 43 Minutes ago

If there are a large number of styles applied to an element it may be faster to comment half of them out, then the other half, and work from there, rather than just starting at the top and working down one at a time.

Mike

rating

kevin@klmgraphics.com: 11 Years, 2 Weeks, 18 Hours, 11 Minutes ago

I find using Firebug is much faster than commenting out, saving and then testing. I would rather see the changes on the fly and then know exactly what I need to change and make it a one time save.

: 3 Months, 3 Weeks, 6 Days, 21 Hours, 35 Minutes ago

HIRE A CERTIFIED CRYPTO RECOVERY EXPERT / ULTIMATE HACKER JERRY
 I was duped by a blockchain company that I thought was legitimate around a week ago. I lost more than $25,000 worth of bitcoin when I fell for the fraud. I had to get in touch with the local security guards, but they were powerless to help. I was then told to start the healing process using ULTIMATE HACKER JERRY. Not until my money was successfully retrieved did I initially have my doubts. Although I wouldn't be able to testify, I believe He should be thanked for his efforts. ULTIMATE HACKER JERRY is a reliable source for any hacking or recovery needs. The right person is here.
Their Webpage; ultimatehackarjerry. co m 
Mail; contact@ultimatehackarjerry .c om

Text or Call ; + 1 (458) 308 (08 25   

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top