Home/ Questions/Q 7751515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:34:05+00:00

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html;

  • 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link href="tester.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="tray">  
    <div class="tray_header">THIS IS A HEADER</div>
    <div class="container">
        <div class="red_line"></div>
        <div class="text_1">THIS IS THE FIRST LINE OF TEXT</div>
        <div class="text_1">THIS IS THE SECOND LINE OF TEXT</div>
    </div>
</div>
</body>
</html>

Hello! First off, this is NOT a browser-related question. When you open this in Dreamweaver the second and third lines of text are displaced downward underneath the red line by about 20px or so.

The thing is they shouldn’t be. They should be tucked right underneath the red line.

Now this is where it gets weird – if you view it in any browser it does just that – sits right underneath the red line (as desired).

Normally I would just say screw it, it’s a Dreamweaver bug or something. However, in the real document (I’ve stripped down the code and included only the bare necessities so it can be viewed without all the other items getting in the way) there are more lines of text with red line separators in between them and so they just keep adding more and more vertical space to the layout and making it very difficult to see other items on the page.

I’ve gone through and added zero padding and margins on all rules thinking that perhaps there might be some issue with that but to no avail.

The interesting thing is if you remove the red div line, the text beneath pops up where it should be (as expected).

Any ideas?

Below is the CSS for the document:

body {
width:      100%;
height:     100%;
margin:     0 auto;
padding:    0;
background-color:   #900;
font-family:    Arial, Helvetica, sans-serif;
}

.tray {
width:      290px;
margin:     120px auto 0;
padding:    0;
position:   relative;
}

.tray_header {
width:      290px;
height:     28px;
margin:     0;
padding:    0;
position:   relative;
color:      #FFFFFF;
font-size:  20px;
text-shadow:    0px 2px 2px #000;
text-align: center; 
}

.container {
width:      290px;
margin:     0;
padding:    0;
position:   relative;
}

.red_line {
width:      252px;
height:     2px;
background-color:   #CB0000;
margin:     6px 18px;
padding:    0;
position:   relative;
}

.text_1 {
width:      252px;
margin:     0 0 0 18px;
padding:    0;
position:   relative;
color:      #FFFFFF;
font-size:  15px;   
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Dreamweaver’s Design View (and Live View for that matter) contain weird CSS rendering bugs and should never be taken as “true” views. What looks perfectly fine in the browser may look “off” in Design View due to the constrained workspace, presence of hidden element icons, or just plain weirdness. Altering your code to make it work in Design View is not a good use of time and may break things.

    In short, always test with browsers. If it looks good there, you are all set.

    • 0