div spacing

[johnnybravo]

OK, im trying to make the jump to full CSS and using DIVs rather than tables and its driving me crazy!!

Im trying have an image at the top of the page, nothing technical, really easy... then under the image i want my navigation... but it keeps putting a space between the divs!!!

url is http://www.2percentinspiration.com/...e_v1/index.html

can anyone please tell me why this might be doing this, i feel stupid cos i know its soooo easy

thanks
John

[Ryan Fait]

The image isn't loading... And why are you using frames?

[minute44]

Space between divs would suggest a surplus margin on one or more divs.

Check and double check all your margins and padding to avoid this problem.

[johnnybravo]

i havent set any margins... maybe thats the problem ;-) didnt realise you had to specify them

[minute44]

Yes.. if you don't specify them then browsers will use the default setting... this is different from browser to browser so it is always best to set them.

[johnnybravo]

ok i have set margin:0px; padding: 0px; on all DIVs but the problem is still there???

any other ideas?

thanks
J

[minute44]

Do any of the items inside your divs have default margins? It could be those that are causing your problems

[johnnybravo]

This is my HTML code:

<div id="main" align="center">
<div id="container">
<div id="topbanner"><img src="images/lifestyle_banner.jpg" width="793" height="87" alt="Lifestyle Arts and Crafts Ltd" border="0" /> </div>

<div id="leftnav"><img src="images/nav_left_spacer.jpg" width="190" height="16" alt="" border="0" /></div>
<div id="navigation">&nbsp;</div>

<div id="leftnav" align="left"><!-- Begin Left Nav -->
leftnav
</div><!-- End Left Nav -->

<div id="maincontent" align="left"><!-- Begin Main content -->
main content
</div><!-- End Main content -->
</div>
</div>

and this is my CSS:

body {margin: 0px; padding: 0px; }
div {margin: 0px 0px 0px 0px; }
/* DIV Styles */
#main { width: 100%; margin:0px; padding: 0px; }
#container { width:793px; margin:0px; padding: 0px; }
#topbanner { width:793px; height:87px; margin: 0px; padding: 0px; }
#maincontent { width: 603px; float:left; margin:0px; padding: 0px; }
#leftnav { width: 190px; float: left; margin:0px; padding: 0px; }
#navigation { width: 603px; float:left; background-color: #BBC57D; height: 16px; margin:0px; padding: 0px; }

[minute44]

Umm, dude... why are you specifying styles in your HTML AND your CSS? keep ALL style information in the CSS for starters...

[johnnybravo]

Originally Posted by ryanfait

The image isn't loading... And why are you using frames?

Im not using frames... the img should load now

[johnnybravo]

Originally Posted by minute44

Umm, dude... why are you specifying styles in your HTML AND your CSS? keep ALL style information in the CSS for starters...

Im only using align arent i? i have removed that and it all aligns left... but the problem still there:

http://www.2percentinspiration.com/l..._v1/index.html

im wanting it to look like this:
http://www.2percentinspiration.com/l.../index-tb.html

[minute44]

You do realise you only have a problem in IE right??

In firefox it looks fine.

I maintain it's a margin issue.

[johnnybravo]

so how can i fix it? - didnt check in firefox to be honest

[minute44]

Build the page up again from the beginning. Check in browser after each and every change to see when the problem occurs. THat should pinpoint the offending object. Then look at the CSS for that object and you should see your problem.