Skip navigation
Currently Being Moderated

Wrong render of CSS height on new Browsers using Dreamweaver

May 3, 2013 8:21 AM

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>

 

Wrong-Render.png

 

Picture: on left render of Safari 6.04 and Google Chrome Version 26.0.1410.65 (more long), on right is a render on Firefox v.20.0 (more short). Using this 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

 
Replies
  • Currently Being Moderated
    May 3, 2013 10:10 AM   in reply to Tom Adobe

    #1 Height should always be determined by content; not explicit height values.  Web pages need to be flexible to render correctly in all browsers, with various settings and text-sizes.  If you set explicit height values with CSS, you limit how much content the container can hold.

     

    #2 Absolute Positioning in primary layouts is pure poison.  Here's why:

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

     

    For best cross browser rending, default CSS positioning (static or unspecified) is all that is required for 98% of what we do.  Learn to use CSS floats, margins and padding to align elements.  

     

    CSS Floats and Margins Demo:

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 11:22 AM   in reply to Tom Adobe

    Adobe and Macromedia both mistakenly latched on to absolute positioning with APDivs (or Layers) to make life easier for web design novices in the early days of css. Unfortunately, they are not the best way to create layouts, as evidenced by all of the problems designers run into with absolute positioning.

     

    APDivs are very much like deep fried cheese: a little every now and again is fine and quite tasty, but if that's all you eat, your health will suffer.

     

    A few APDivs in a website can be useful, even mandatory for certain effects, but your site will suffer from the exclusive use of APDivs.

     

    The AP Div tool is magic, illusion mostly.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 11:24 AM   in reply to Tom Adobe

    Just because you CAN do something does not mean you SHOULD 

     

    I gave you the answer to your question:  "How can [I] fix this?" 

    The answer is don't use APDivs and don't use Height.   Problem solved.

     

    APDvis are not good for primary layouts.  Period.  If you go down this slippery slope, you must accept the negative consequences: a site that does not perform well in all browsers and settings.   It's your choice. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 12:27 PM   in reply to Tom Adobe

    >If your advice is an strong argument try to suggest to Adobe's Team to deprecate AP DIV tool,

     

    Nobody is suggesting that Adobe deprecate AP divs tools in DW. AP DIVS are powerful and many times the only way to solve certain problems. The point folks here are trying to make is that you are using them in a bad way.

     

    >Today browsers are more poweful and "all-terrain"'s code and that give

    >more freedom for web developers and yesterday's bugs don't exists today

     

    There were no 'bugs' in older browsers that affected rendering of AP divs. They rendered them exactly per the specifications. AP divs are removed from the page flow. Viewing pages build entirely with AP Divs with modern browsers still shows poor results.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 12:35 PM   in reply to Tom Adobe

    That article on APDivs/Layers is every bit as relevant today as it was when it was written.  Perhaps more considering the various web devices people use now.

     

    If you use the fuzzy logic that "Adobe knows more... therefore APDivs are safe to use for primary layouts" you are deluding yourself in a false and precarious sense of security -- the way an ostrich hides its head in the sand.

    If your advice is an strong argument try to suggest to Adobe's Team to deprecate AP DIV tool...

    Yes. We have suggested this to the DW development team. I cannot comment more on it except to tell you that many long-time product users agree it should be removed because it creates more problems than it solves.  

    Today I reject your advice and is not useful for me.

     

    That's your choice.   If you choose to ignore good advice, it is your loss.  Not mine.

     

    Good luck!

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 1:18 PM   in reply to Tom Adobe

    Hey Tom you need to take advice from those that have been there an done it.....I think we all have at some stage, thinking that AP <divs> is utopia...........well sorry to break the news they really are your own worst enemy and your worst nightmare used in abundance. No one likes change including me because it takes you out of your comfort zone and we don't like that but persisting with bad habits will impact on your ability to advance. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points