Solved: dreamweaver bug? or simple div problem?

Gesp · 16-Mar-2010, 07:36 PM #1

Hi there

I`ve got the following code:

HTML Code:

<!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>Untitled Document</title>
<style type="text/css">
body {padding:0 auto; margin:0 auto; background:#FFF repeat-x top}

div#master_enter{width:1024px; height:768px; background:#F00); margin:0 auto}
div#master{ width:1024px; height:auto}

div#enterButton_selection{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF}
div#enterButton_selection:hover{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=60); opacity:0.6; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF; text-decoration:underline}

div#footer{ width:100%; height:200px}

</style>
</head>

<body>
<div id="master_enter">
    <div id="enterButton_selection">Enter</div>
</div>
</body>
</html>

My background should have an image there repeating X and the master_enter should have another image to.

My problem is that when I preview the page, master_enter div apears down and very low at the page and it sould keep behind the enterButton_selection div.

Whats happening?
Any solution?

Thanks

tomdkat · 16-Mar-2010, 09:02 PM #2

Well first....

Which version of DreamWeaver are you using? The HTML you posted above has a red background with an "Enter" button overlaying it. I've found sometimes DreamWeaver doesn't display pages with CSS styling well.

EDIT: See what I mean?

Peace...

Gesp · 16-Mar-2010, 09:50 PM #3

I`m using Dreamweaver CS4.

But it can`t be, I mean this is so simple, how come the program breaks out with a simple code as this one?

But on the other hand, I have reviewed my code and found no errors.

When I preview it here with the image I want as a background It apears the image, but on the lower side of the page. Diferent form when I try with the red background, that it doesn`t even apear.

tomdkat · 12:41 AM

Are you previewing the page from within DreamWeaver (meaning in a DreamWeaver window) or in a browser? I loaded the HTML above in a browser (Firefox) and it displayed just fine. I then loaded the page into Kompozer and it displayed just like Firefox.

EDIT: Check out this thread starting at post #10.

Peace...

Gesp · 17-Mar-2010, 08:24 AM #5

I`m previewing from within and outy o Dreamweaver, but thats not the point, since Dreamweaver previews directly form the browser it self.

My result with the preview on both IE and FireFox is just the same as before.
The code just doesn`t work, and the problem comes from the margin values on the enterButton_selection div. If you remove these margins the page will preview exaclty as I want, just with the button at the upper left corner.

Gesp · 17-Mar-2010, 08:50 AM #6

I`ve found a solution.
An expensive solution (it takes a bit more time to load the page) but it works fine.

As you sould know, strangeling a div within a table row or column with margins (if the width of this column/row is 400px and the height 200px and the button it self has a width of 100 and a height of 50px, then insert a margin of 150px right and left and 125px top and bottom so there is no more space open un the column/row) would make it unmovable, so every browser then would see it the same way, without problems.

Well, in this div case, since strangeling with margins didn`t work I tryed a traditional div strangeling (the same thing as but with divs) and its done, as I said, in a slightly expensive way.

The result is here:

HTML Code:

<!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>Untitled Document</title>
<style type="text/css">
body {padding:0 auto; margin:0 auto; background:url(../Img/Background_repeat.png) repeat-x top}

div#master_enter{width:1024px; height:768px; background:url(../Img/Background_enter.jpg); margin:0 auto}
div#master{ width:1024px; height:auto}

div#centering_left{width:480px; height:768px; float:left}
div#centering_right{width:480px; height:768px; float:left}
div#centering_center{width:64px; height:768px; float:left}
div#centering_top{width:64px; height:478px}
div#centering_bottom{width:64px; height:271px}
div#enterButton_selection{width:62px; height:18px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF}
div#enterButton_selection:hover{width:62px; height:18px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=60); opacity:0.6; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF; text-decoration:underline}

</style>
</head>

<body>
<div id="master_enter">
    <div id="centering_left"></div>
    <div id="centering_center">
        <div id="centering_top"></div>
        <div id="enterButton_selection">Enter</div>
        <div id="centering_bottom"></div>
    </div>
    <div id="centering_right"></div>
</div>
</body>
</html>

Thanks anyway, as long as this is a test I`ll wait with this solution and then try to find an other easier way.

tomdkat · 17-Mar-2010, 12:42 PM #7

Quote:

Originally Posted by Gesp

Thanks anyway, as long as this is a test I`ll wait with this solution and then try to find an other easier way.

Once again, a picture speaks 1,000 words.

I believe I now know what you were trying to describe in your post above. The behavior you're seeing is called "Collapsing Margins". In your case, the way to deal with that is to add 1px padding to the top of the "master_enter" DIV and the DIVs should align properly.

Here is your original HTML from above:

Code:

<!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>Untitled Document</title>
<style type="text/css">
body {padding:0 auto; margin:0 auto; background:#FFF repeat-x top}

div#master_enter{width:1024px; height:768px; background:#F00; margin:0 auto}
div#master{ width:1024px; height:auto}

div#enterButton_selection{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF;}
div#enterButton_selection:hover{width:62px; height:17px; margin:478px 0px 0px 468px; padding:1px 0px 0px 0px; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=60); opacity:0.6; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF; text-decoration:underline}

div#footer{ width:100%; height:200px}

</style>
</head>

<body>
<div id="master_enter">
    <div id="enterButton_selection">Enter</div>
</div>
</body>
</html>

The reason I didn't see the issue previously is I accidentally "fixed" the collapsing margin issue before I viewed the page.

I was able to fix the collapsing margins by doing one of two things, per the CSS2.1 spec:

1) Add a 1px border to the "master_enter" DIV

Code:

div#master_enter{width:1024px; height:768px; background:#F00; border: 1px solid #fff; margin:0 auto}

2) Add a 1px padding to the "master_enter" DIV

Code:

div#master_enter{width:1024px; height:768px; background:#F00; padding: 1px 0; margin:0 auto}

Doing either of those things solves your problem. All of the "work" you did above isn't necessary.

In addition to that, I simplified the CSS a bit more to produce this:

Code:

<!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>Untitled Document</title>
<style type="text/css">
body {padding:0 auto; margin:0 auto; background:#FFF repeat-x top}

div#master_enter{width:1024px; height:768px; background:#F00; padding: 1px 0; margin:0 auto}
div#master{ width:1024px; height:auto}

div#enterButton_selection{width:62px; height:17px; margin:478px auto 0px auto; text-align:center; border:solid 1px #FFF; background:#87d9ff; filter:alpha(opacity=20); opacity:0.2; font-family:"Berlin Sans FB", Calibri, Arial; font-size:12px; color:#FFF;}
div#enterButton_selection:hover{filter:alpha(opacity=60); opacity:0.6; text-decoration:underline;}

div#footer{ width:100%; height:200px}

</style>
</head>

<body>
<div id="master_enter">
    <div id="enterButton_selection">Enter</div>
</div>
</body>
</html>

I have also been bit by the collapsing margin behavior which is why I'm familiar with it. You can also check out this thread.

Peace...

Gesp · 17-Mar-2010, 01:08 PM #8

Hey, that arangement you did on the CSS is prety neet. You mean taht when I create a style and want to creat its "hover" or "link", or whatever behaviour "child" I create, I just need to insert the additional options or the ones I intend to modify?

Like If I have this:

div#abcd{width:500px; height:200px; color:#123456}

And I wanted to change only the color on a hover action, I`de insert this:

div#abcd:hover{color:#111111}

?

Besides that, when I read the wc3 explanation for the problem you refer, I really don`t understand my problem, since when I inserted the margin value to the enterButton_selection div, the master_enter`s border wasn`t collapsing with it anymore.

Can you explain my problem please
(sorry for the ignorance)

tomdkat · 17-Mar-2010, 01:43 PM #9

Quote:

Originally Posted by Gesp

Hey, that arangement you did on the CSS is prety neet. You mean taht when I create a style and want to creat its "hover" or "link", or whatever behaviour "child" I create, I just need to insert the additional options or the ones I intend to modify?

Like If I have this:

div#abcd{width:500px; height:200px; color:#123456}

And I wanted to change only the color on a hover action, I`de insert this:

div#abcd:hover{color:#111111}

?

Yep. ":hover" is a pseudo-class and you can define only the attributes you want to change or add when that selector is active (meaning you're hovering over the designated element or element type). The same actually applies to CSS classes in general. You can define a class with the base styling rules and "override" them or supplement them with other rules. You can see an example of that in this thread, post #10.

Quote:

Besides that, when I read the wc3 explanation for the problem you refer, I really don`t understand my problem, since when I inserted the margin value to the enterButton_selection div, the master_enter`s border wasn`t collapsing with it anymore.

Can you explain my problem please
(sorry for the ignorance)

You need to understand the CSS Box Model. The reason the margin you added didn't help is because of this:

Quote:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

Let's look at your HTML again:

Code:

<body>
<div id="master_enter">
    <div id="enterButton_selection">Enter</div>
</div>
</body>

Here, you have one DIV tag immediately followed by another. There is nothing separating those two DIVs (no text, no images, etc) and there was no border or padding applied to the "master_enter" DIV, it's top margin "collapsed" to the top margin of the "enterButton_selection" DIV. You DO have a margin set on the "enterButton_selection" DIV as well as a 1px padding specified on that DIV, but the "master_enter" DIV doesn't have any padding or borders so its margin collapsed. Adding a border or some padding to the "master_enter" margin adds some separation between the two DIVs and the "master_enter" DIV's top margin doesn't collapse.

The CSS Box Model can take some time to wrap your head around and I haven't fully wrapped my head around it but once you get a better understanding of it, things like this become easier. When I originally tried your original HTML, I added a 1px border to the "master_enter" DIV before I viewed the page because I use borders to help identify how elements are laying out. As a result, I never saw the collapsed margin. Once I removed that border, I saw the behavior and immediately recognized it as a collapsed margin. If I had seen a screenshot of this behavior earlier....

Peace...

Gesp · 17-Mar-2010, 03:52 PM **#10**

Well, letme make my self clear.

What you mean is that if those two objects didn`t have a border or simply one of them had, the coding makes it look or react as if that one border is the border of that group of objects.

So the solution would be to give the master_enter div a border, so that the browser could read them seperately.

Sort of this?

tomdkat · 17-Mar-2010, 04:01 PM **#11**

Quote:

Originally Posted by Gesp

What you mean is that if those two objects didn`t have a border or simply one of them had, the coding makes it look or react as if that one border is the border of that group of objects.

It's not that "one of them had" but the appropriate one did. Since you have two DIVs, one nested in the other, the containing DIV (the outer DIV) must have the border or padding applied (at least to the top) to prevent the margins from collapsing, per the CSS spec.

Quote:

So the solution would be to give the master_enter div a border, so that the browser could read them seperately.

That or adding padding would do the trick. This isn't a "browser behavior" as much as it's a CSS spec thing. Browsers that follow the CSS2.1 spec will behave in this way.

Here is a simple test case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Collapsing Margins</title>
</head>
<body>
<div style="border-style: solid; width: 400px; height: 400px; margin-right: auto; margin-left: auto;">
<p style="border-style: dotted; text-align: center;">This is a paragraph</p>
</div>
</body>
</html>If you remove the border from the DIV above, the margins collapse.  If you keep the border in the DIV above, the margins don't collapse.  This will be the behavior in Firefox, Opera, Safari, Chrome, IE8, and any other W3 standards compliant browser.

Peace...

Gesp · 17-Mar-2010, 04:38 PM **#12**

Yes, its was I was trying to explain. Got it now.

Thanks for the help and the tutorial

Gess now this is really solved

Tag Cloud
access acer asus bios bsod computer crash desktop driver drivers error ethernet excel freeze gaming hard drive hardware hdmi internet laptop malware memory modem monitor motherboard mouse network printer problem ram registry repair router slow software sound trojan ubuntu 11.10 uninstall usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!