Frontendplace Blog

Sharing Frontend developing ideas

CSS help

Other lessons learned:

  • For font resizing set the fontsize for the body in % and use em for the containing elements as relative values for the body. When the users wants to resize the font with the browser settings, all the elements will resize relatively. You can also use the relative size em for widths of interface elements not only for text. Fotr instance you can change the width of a menubar when the font is resized.
  • expand background color with rightfloated element enclosed in an element with a background only for non IE
    * > .background{
    overflow:hidden;
    }
  • Pictures floating inside a div with a background must have no margins
  • Don’t use padding when inside is a floated element for FF use padding in wrapper of non floated elements
  • Border-spacing is replacing cellspacing attributes you can define both horisontal and vertical space
    fieldset {
    display:table;
    padding:0;
    margin-bottom:10px;
    border:0;
    border-collapse:collapse;
    table-layout:auto;
    /* not in IE */
    border-spacing:0 0;
    }
  • Safari puts each table-cell on its own row if it is not enclosed by a table-row.
    .td {
    display:table-cell;
    empty-cells:show;
    }
  • Collapsing borders for tables. The ‘cell-spacing’ property only applies to elements with ‘display:table’
    .table {
    display:table;
    border-collapse:separate;
    table-layout:auto;
    }
  • Horisontal ruler for Opera and Gecko-based browsers
    hr {
    width:100%;
    height:3px;
    background-color:#8AC;
    border:0 solid #8AC;
    }
  • Selectors :after and [ ] syntax are not supported in IE 6
  • Don’t give the dd a dimension for IE that gives 3 pixels border on the dd
  • Holly hack targets IE Win only 3 pixel hack IE for undimensioned elements in combination of floated elements but hide for IE5mac \*/
    * html #container {height:1%;}
  • Checkboxes are shifting 3px to the right in ie */
    * html input.checkbox{
    margin-left:-3px;
    }
  • IE buttons use to much space between text and buttonborders so reset padding on a button and give it the class ‘button’ */
    * html input.button {
    padding:0;
    }
  • Opacity only in IE in filter for png files. for Netscape: -moz-opacity:.75 and other browsers: opacity:.75;
    * html .ph_mediumliquidtrigger_transparent {
    filter:alpha(opacity=75);
    }
  • Use inline block in stead of inline table for IE
    * html .clearfix{
    display:inline-block;
    }
  • When I have a background in a block level link next to a floated element the background gets behind the floated element
    Supported by Opera 5, Konqueror, Safari and Mozilla, Firefox needs is the style display:table that is not supported by IE, IE uses instead inline-block
    * html .wrapper {
    display:inline-block;
    padding-left:8px;
    height:1%;
    }
  • IE doesn’t support negative text-indent to hide button text
  • In IE padding is on the inner html and not in the outer with selectboxes
    * html .leftpadded select{
    margin-left:4px;
    }
  • IE doesn’t recognise the max-width so use expressions instead width in 800 minus scrollbar and borders = 772
    * html #wrapper{
    height:1%;
    width:expression((document.documentElement.clientWidth < 772)?732+"px":(document.documentElement.clientWidth > 955)?920+”px”:”auto”);
    }
  • IE doesn’t count the border and margins in the height
    * html div.nieuws div.container {height:100px;}
  • IE button text can be padded, firefox and mozilla center the text in buttons
    * html input.link{
    padding-left:8px;
    background:url(/images/css/arrow.gif) no-repeat 0 3px;
    }
  • Not IE browsers will center the button text, IE will expand the button width almost exponently when adding text so you have to set the width of the buttons for IE
    * html #ph_sequencemenu input {
    width:162px;
    }
  • Horisontal ruler are different styled for IE
    * html hr {
    height:3px;
    color:#8AC;
    border:none;
    }
  • To prevent IE to expand the ul-list when resizing browserwindow explicit define a width
    * html .dropdown li {
    width:165px;
    }
  • IE hack to have the hover react on the whole area and no extra space wrap will occur, and blocks with background show up background
    * html a {height:1%;}
  • Use inline block instead of inline-table for IE
    * html .inlinetable {height:1%;display:inline-block;}

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>