css and dreamweaver

[SooTyLaD]

hi everyone

i made a decision to stop coding in ultraedit and move over to dreamweaver, i will never use the design interface just the code one but i made the move primarily cuz i'm sick and tired of coding in what i believe to be a very "web standards conformative" way and for it to look totally different in different browsers, and from what i can tell, if it looks ok in dw, you're ok.

anyway, a quick question (first of many i can image)

i have a main div, with a background which is basically a left and right border... within that div are two more divs that just display a graphic:

  <div id="main">
	<div id="mainsplash">&nbsp;</div>
	&nbsp;
	<div id="footersplash">&nbsp;</div>	  
  </div>

here is the css:

#main {
  position: relative;
  height: 300px;
  width: inherit;
  background: url(borderback.png) repeat-y;
  }

#mainsplash {
  position: absolute;
  background: url(mainsplash.png) no-repeat;
  width: 140px;
  height: 181px;
  top: 0;
  left: 0px;
  }

#footersplash {
  position: absolute;
  background: url(minisplash.png) no-repeat bottom right;
  width: 45px;
  height: 64px;
  bottom: 0;
  right: 0;
  }

obviously this displays the "mainsplash" in the top left of the main and the "minispash" in the bottom right... now this works fine in firefox and IE7 but none of the images display in dw, HOWEVER, they all display if i remove the "position: relative" from the #main section (but obsiouly they now go to the top left and bottom right of the whole screen as the "position: relative" was providing the outer limits of the div for the splashes to tuck up to)

i have to alter my ways and learn the ways of coding that works for all browsers so i'm thinking this must be the first of many ways where i was going wrong

any advice?