CSS Forum

**silverglade** · 09:50 AM

hi, my box position wont change in dreamweaver design view when i add a top margin to it. and when i go all the way to margin-top:400px, it doesnt respond right in browser or in dreamweaver. in dreamweaver it just sits there. also my text inside the div box shows up in different spots in IE6 and FF. also, i had to put on a height to my wrapper div and take off overflow:auto for it to display the background image correctly and not get a scrollbar. any help greatly appreciated. here is a sample page of what im talking about. (i just noticed this morning, the text is popping out of my div when i add text-my div is showing up in different spots also in IE and FF)

http://derekvanderven.com/elegant_shoes/location.html

here is the css

Code:

@charset "utf-8";
/* CSS Document */

#wrapper {
    overflow: auto;
    width: 820px;
     height: 650px;
    background-image: url(new_images/black_slices/shoes_top.gif);
     
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
body {
background-color: #000000;
font-family: "Times New Roman", Times, serif;
margin: 0 ;
padding: 0;

}
 



#copyright {
margin: 20px auto 0 auto;
text-align:center;
color: #000000;
width: 820px;
height: 30px;
}

a:link {
    color: #000000;

}
a:visited {
    color:red;
}
a:hover {
    color: red;
}
a:active {
    color: red;
}

p
{ 
text-indent: 20px;
}

/*****************SHOES NAVIGATION****************/

#toplinks {
    font-weight:bold;
    width:800px;
    height: 60px;
    font-size: 24px;
    margin-right: auto;
    text-align: center;
    margin-top: 15px;
    margin-bottom:0;
    margin-left: auto;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 15px;
line-height:3em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#000;
text-decoration:none;
height:3em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:red;
text-decoration:none;
}


/********************BOTTOMLINKS CODE***************/

#bottomlinks {
    font-weight:bold;
    width:800px;
    height: 60px;
    font-size: 24px;
    margin-right: auto;
    text-align: center;
    margin-top: 550px;
    margin-bottom: 0;
    margin-left: auto;
}
#bottomlinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#bottomlinks ul li {
display:inline;
margin:0 15px;
line-height:3em;
}
#bottomlinks ul li a:link, #bottomlinks ul li a:visited {
color:#000;
text-decoration:none;
height:3em;
}
#bottomlinks ul li a:hover, #bottomlinks ul li a:active{
color:red;
text-decoration:none;
}
/******************ABOUT CODE******************/

#about_wrapper {
 
margin: 0 auto 0 auto;
    width: 820px;
    height: 650px;
    background-image: url(new_images/black_slices/shoes_blank.jpg);
    background-repeat: no-repeat;
     
    
}    
 
    
 
 
#about_info {
    width: 600px;
    height: 400px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

 
    
 

 
 
 
/****************SHOES CODE***************/
#shoes_wrapper {
 
margin: 0 auto 0 auto;
width: 820px;
height: 650px;
background-image: url(new_images/black_slices/shoes.jpg); 
background-repeat: no-repeat;

     
}    

 
 
/***************************NEWS CODE************************/
#news_wrapper {
 
margin: 0 auto 0 auto;
width: 820px;
height: 650px;

background-image: url(new_images/black_slices/shoes_blank.jpg); 
background-repeat: no-repeat;
}

#infobox {
    width: 400px;
    height: 400px;
    margin-top: 300px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

}
#infobox p {
padding: 10px;
text-indent: 10px;
 
}
 
 
 /**************************LOCATION CODE************************/
 
 #location {
 margin: 0 auto 0 auto;
 width: 200px;
 height: 200px;
 text-align: center;
 color: black;
 }

and here is the 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" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes -our shoes</title>
</head>

<body>
<div id="news_wrapper">

    

 
         <div id="toplinks"><ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="shoes.html">Shoes</a></li>
        <li><a href="press.html">Press</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul></div>


    
    <div id="infobox">rthsfghdfghfdshf
 
        
     </div>
 
        <div id="copyright"> &copy; <a href="http://derekvanderven.com">derekvanderven.com                            </a> web design </div>
        </div>
</div>
</body>
</html>

**LadynRed** · 05-15-2009, 10:08 AM

Quote:

the text is popping out of my div when i add text

It does that because you removed the clearing of the floats that overflow:auto provided!

Scrollbars using overflow:auto to clear floats does happen, but it usually means you have to adjust widths and/or heights and if you have a hard height defined and you use overflow: auto, you WILL get scrollbars.

Quote:

my box position wont change in dreamweaver design view

NEVER rely on what DW's design view shows you, it is not always going to be accurate.

Validate your code! The validator is squawking about an unexpected </div> and from what I can see it's complaining about the </div> that comes after your copyright at the bottom.

On the link you posted, there is no styling applied to anything on that page except the <body>. I'm not seeing the problem, the #infobox is 300px down on the page when I plug it into a page, just as you specified :confused:

Quote:

my box position wont change in dreamweaver design view when i add a top margin to it.

It moved for me in the browser.

**silverglade** · 06:48 PM

that was an awesome reply, im definitely not going to rely on dreamweavers view so much again. im going to make overflow auto work for me , and im going to validate my code. i have to say your post was awesome ladynred. i dont think the forums on this site would be nearly as helpful if you werent here. actually, you ARE the forums. so thank you. derek

also i validated my code and deleted that div you were talking about. thanks

**wayfarer07** · 05-15-2009, 07:29 PM

Definitely true about DW's design mode. I still use Dreamweaver once in a while, and when I do, I do all of my initial testing directly in Firefox, just as I would from any other editor. Besides, Firefox has much better debugging tools than Dreamweaver does, like Firebug and the Web Developer's Toolbar.

**silverglade** · 05-17-2009, 05:42 AM

cool thanks wayfarer, i will check out firefox design tools. i do have firebug and i use it sometimes. but my usual mode is work, check in browser, work again, repeat. but i use firefox mainly to study other peoples sites and see their css at the same time to learn from it, its really a great tool for that. and firefox screenshot save tool, which i take screenshots of my site and make thumbnails from that to put on my link pages. derek

**wayfarer07** · 05-17-2009, 11:33 AM

Quick tip for using firebug:

Right click on any element, and choose "inspect element". Firebug adds this to your right click menu. A panel will open showing that element's position in the HTML markup. In the style panel to the right, double click on any css group to add new rules. To change existing ones click on the rule and edit. When you're changing any rule which has a quantity to it (like margins, padding, top, left, right, width, height, font-size, etc), you may use the arrow keys on your keyboard to adjust them. When you do this, you can literally watch elements slide along the screen until they are positioned as you need them. This is one reason Firebug is so great.