cross-browser compatibility conflict Troubleshoot

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.

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.

 

 Troubleshoot 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.

1. 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.

1. 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.
   
   


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

1. 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.


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

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

cross-browser compatibility conflict Troubleshoot