Hi,
I am designing a page without table just using CSS... first try.. yay! now the problem is i am using absolute position to place my divs. when i tested it out on IE and Firefox they look great... exactly where i want them to be, but in dremweaver the div is almost in the middle of the page!

is there something i am doing wrong? below are screenshots of the page in a browser and the same page in dreamweaver. i have also put in my CSS code. please don't laugh at the rough coding i am doing this for the first time. thanx

DreamW.jpg

Browser.jpg

CSS Code:

body {
background-color: #60769E;
margin:0px;
}
body,td,th {
font-family: Calibri, Verdana;
font-size: 12px;
color: #333333;
}
a {
font-size: 12px;
color: #5171B8;
}

.style1 {color: #CC0000}

ul{margin:0; padding:0; list-style:none}
li{ line-height:18px }
li a{ background:url(images/1_z1.gif) center left no-repeat; background-position:0 5px; margin:0px; padding-left:9px;color:#5171B8; text-decoration:underline;}
li a:hover{color:#5171B8; text-decoration:none}

td.footer {

}

#mainContent {
width:780px;
height: 342px;
display:block;
margin: 0px auto;
background-image:url(images/bg_left_02.gif);
overflow:hidden;
}

#flash {
width:780px;
margin:0px auto;
overflow:hidden;

}

#header {
width:780px;
margin:0px auto;
overflow:hidden;

}

#footer {
width:780px;
height:59px;
margin:0px auto;
overflow:hidden;
font-size: 11px;
color: #FFFFFF;
background-image:url(images/index_52.jpg);

}

#foot {
padding-top:20px;
padding-right:20px;
}

#grayLeft {
position: absolute;
left: 283px;
top: 373px;
width: 233px;
line-height:14px;
}

#text {
width:200px;
padding-top:5px;
text-align: justify;
}

#readMore {
padding-right: 31px;
padding-top: 15px;
}
#bar {
padding-left: 10px;
padding-top: 15px;
}

now the problem is i am using absolute position to place my divs.

DON'T!!

ok... i was using margins to shift my div, and then padding-left to move it to the middle of the gray box, but dreamweaver said i might have a problem with IE, tho it looked fine in my IE browser.
but DON'T doesnt help me much... i am a newbie here, didn't i mention?

Could you give us some html code, so we can know how you're using the css?

- Steve

Or better still a link to the page.

CSS is useless without the HTML structure it is applied to, and images are no use for debugging the code.

hi,
i fixed the problem. I didn't use absolute position anymore. Instead i floated the divs. I had 3 divs in one container. here are the steps i took

1. I floated the first div right with 0 margin, and set a width
2. then floated the second div left with 0 margin, set a width
3. the 3rd div i floated left with zero margin and set a width...

it sorted itself out. if anyone is lost and want to see the code, please let me know.. once more i am newbie at this

Dreamweaver design view LIES!