www.tuljo.com

CSS, Problem and How.

Once this page was very very very, very long and important. As time has passed, some stuff had turned really pointless and was removed. Although, some has still found here.

The fact is, there is no need for any hacks, workarounds nor bodges when a page is coded in a right way. Everything works fine right from scratch in IE6, Firefox, MAC Safari and the whole site is well accessible over Lynx.

There are no problems, never. Sorry.

Some CSS problems and fixes to them.

1. Double space between list items in IE.
   1. Remove all the white space inbetween the <li></li> tags.
   2. If it's a link there, add a trailing space inside the anchor tag.
2. text-decoration:underline; doesn't work for FireFox in button element
   • Sample:
     • <button style="text-decoration:underline;">Click</button>
   • Solution:
     • Remove the doctype
     • Float the element
     • Apply display:block;
     • <span style="text-decoration:underline;">Click</span>
     • Apply display:table-cell; This works best. However, table display properties may cause side effects in Firefox.
   • Note, the button element is not supported in mobile browsers (WindowsCE, PocketPC and others).
3. Progressive empty space on sides of a button in IE.
   1. Apply overflow:visible; and then side paddings.
4. Empty div-s collapse in FF.
   1. put in &#160;
   2. Empty div and p behave differently in different browsers. Always use &#160;
5. Empty divs do not collapse in IE.
   Double space between lines IE.
   1. Add an empty comment into the empty div
      <div><!-- --></div> or <div><!----></div>
   2. Use script to show/hide the entire element rather than just a content.
6. Long words do not wrap in FF. Wrapping long strings.
   1. word-wrap:break-word;
7. There is a gap on the top of page in IE6.

   1. *{
      margin:0px;
      padding:0px;
      }
      

   2. If in style here there was declared border:0, remove it. Border 0 erodes up the upper border of IE6 browser window.
8. FF, background is not seen. Reason - div does not expand vertically.
   1. Add float.
   2. Adding position:absolute has the same effect.
   3. overflow:hidden, after that IE will require height:1%
9. margin-auto centering does not work
   1. Remove float. Remove width:100%
10. Margin left or right does not work.
    1. If width:100%, change width to fixed or auto. If margin-left, IE6 displays it double; apply display:inline. If possible, better to use paddings for sides.
11. Extra margin space on sides of a floated image or a DIV, IE6.
    1. Apply display:inline. If possible, use paddings instead of margins.
12. Gap below an image in IE.
    1. White space characters. Markup syntax. Tag containing img should not end a line nor have a space after it.
    2. The images got an odd bottom margin that couldn't be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn't have descender characters, so the space was never used, but it still had to be reserved. The solution was to explicitly declare images block level elements - img{display:block}.
13. Vertical distance between floated DIV's in different browsers different.
    1. Different browsers collapse margins differently. Better to use paddings. Best practice is to organize distances with the padding-bottom.
    2. Floated divs act differently than non-positioned divs. In the floated divs, the top-margin of the <p> is encompassed in the div. In the not floated divs it isn't. Put a border on the not floated div, or a padding, or float it.
    3. Use intermediate separator <div style="clear:both;"></div>
    4. IE6 adds sometimes some extra space below an element if it touches the borders of the surrounding element. Make the inner element by 3 pixels narrower.
14. IE7 margin-bottom does not work. IE6 FF Opera Chrome are OK.
    1. Hack:

       	margin-bottom:9px;
       	*padding-bottom:9px;
       	_padding-bottom:0;
       

    2. Use padding-bottom instead of margin-bottom.
15. clear:both; how it works, what it does?
    1. clear:both makes preceeding elements stay above.
16. position:relative; how it works, what it does?
    1. IE needs this to show float.
17. IE bug-safe comments, Do not leave any spaces within the tags!
    1. IE does not see it: <!--[if !IE]>Put your commentary in here...<![endif]-->
    2. IE only sees it: <!--[if IE]>Put your commentary in here...<![endif]-->
18. Disappearing text or (background) images in IE
    1. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. This problem mostly occurs on background images and on text next to a floated element.
    2. Insert position:relative; for the disappearing element. Sometimes it doesn't work.
    3. Assign a width to the offending element.
    4. Advices here are taken from http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
19. While using word-spacing:3em; and need to have some word spaces normal in between, use &#160; instead of just a space.
20. Dotted outline around links in FF. To remove apply a{outline:none;} Tabindex will not work for FireFox any more. For buttons css .myButton::-moz-focus-inner; or in the element onFocus="this.blur();"
21. Placing a div to overlap another one. FF and IE6. Apply to the div a margin to move it around and position:relative to bring on top of others.
22. Layers, position absolute, position relative - as precaution add z-index. This prevents on some cases some other elements climbing on surface of the layer.
23. Layers, in IE6 <select> dropdown combobox climbs on top of the layer.
    1. No solutions nor hacks whatsoever. Wrong.
    2. Workaround - do not use layers or popups.
    3. Workaround - change page layout
    4. Workaround - do not use <select>
    5. Workaround - make layer JavasCript dragable + make cursor on mouseover to change arrowscrest.
    6. IFRAME
       

       .popupLayer{
       	background:#eee;
       	float:left;
       	height:auto;
       	left:30px;
       	position:absolute;
       	top:50px;
       	width:200px;
       	z-index:2;
       }
       .popupIframe{
       	height:200px;
       	left:30px;
       	position:absolute;
       	top:50px;
       	width:200px;
       	z-index:1;
       }
       <iframe class="popupIframe" frameborder="0"></iframe>
       <div class="popupLayer">
       	content content content content content
       </div>
       

24. Link (anchor tag) does not obey styling, mostly in IE6.
    1. Use all selectors, and in this order: a:link a:visited a:hover a:active
    2. Avoid using shorthand (a)
25. Convert em to pixel. For non-IE browsers divide by 13. For IE, divide by 13.3333.

2005, 2006, 2007, 2008, 2010.

Web Development - XHTML CSS JavaScript jQuery.