Wrong render of CSS height on new Browsers using Dreamweaver

hi

using dreamweaver cs6 on mac os x 10.8.3 find difference on rendering css height on new browsers.

 

<style type="text/css">

 

    #bordeizq {

     position: absolute;

     left: 101px;

     top: 346px;

     width: 104px;

     height: 35144px;

     z-index: 20;

}

 

    #bordeder {

     position: absolute;

     left: 818px;

     top: 340px;

     width: 151px;

     height: 35151px;

     z-index: 20;

}

 

    #bordedoble {

     position: absolute;

     left: 1038px;

     top: -25px;

     width: 104px;

     height: 1464px;

     z-index: 20;

}

 

.sideleft {

     background-image: url(/assets/images/borde-izq.jpg);

     background-repeat: repeat-y;

}

 

.sideright {

     background-image: url(/assets/images/borde-der.jpg);

     background-repeat: repeat-y;

 

}

    #barrados {

     position: absolute;

     background: url(/assets/images/todo.png) 0px -123px no-repeat;

     left: 100px;

     top: 35484px;

     width: 813px;

     height: 72px;

     z-index: 300;

}

 

#articulo {

     position: absolute;

     left: 227px;

     top: 395px;

     width: 566px;

     height: 33635px;

     z-index: 3;

}

  </style>

 

 

picture: on left render of safari 6.04 , google chrome version 26.0.1410.65 (more long), on right render on firefox v.20.0 (more short). using css height:

 

    #bordeizq {

          position: absolute;

          left: 101px;

          top: 346px;

          width: 104px;

          height: 35144px;

          z-index: 20;

}

 

    #bordeder {

          position: absolute;

          left: 818px;

          top: 340px;

          width: 151px;

          height: 35151px;

          z-index: 20;

}

 

 

how can fix this?

 

regards.

 

tom

#1 height should determined content; not explicit height values.  web pages need flexible render correctly in browsers, various settings , text-sizes.  if set explicit height values css, limit how content container can hold.

 

#2 absolute positioning in primary layouts pure poison.  here's why:

http://www.apptools.com/examples/pagelayout101.php

 

for best cross browser rending, default css positioning (static or unspecified) required 98% of do.  learn use css floats, margins , padding align elements.  

 

css floats , margins demo:

http://alt-web.com/demos/3-css-boxes.shtml

 

 

 

nancy o.

More discussions in Dreamweaver support forum

adobe