Where is this damned padding coming from??, Trying to use blurb module for overlay Options

[william92371]

Hey all,

I'm pulling my hair out trying to justify the content in my "blurbs" module. I want no padding. Once I can get that fixed, I can upload my div w/ sliced images.

Here's the coding I'm using:

CODE

body {
background-color:#FFFFFF;
background-image:url('');
background-attachment:fixed;
background-position:Top Center;
overflow-x:hidden;
margin-top: 510px;}



div.head {
position: absolute;
top: 0;
left: 50%;
margin-left: -411px;
width: 798px;
height: 510px;}


div.blurbsModule h3 {display:none;}
div.blurbAboutMe h4 {display:none;}
div.blurbLikeToMeet {display:none;}
div.basicInfoModule {display:none;}



a {
text-decoration:none;
}
a:link, a:active, a:visited {
color:#000000;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}

div.footer a {
text-decoration:none;
}
div.footer a:link, a:active, a:visited {
color:#000000;
text-decoration:none;
}
div.footer a:hover {
color:#000000;
text-decoration:underline;
}

div#header, div#googlebar {background-color: #000000;}
#topnav {background-color: #000000;}
#topnav a {color: #FFFFFF;}
#topnav ul li, #topnav ul {border: none;}

#topnav ul li.dropDown:hover a,#topnav ul li.hover a,#topnav ul li.hover a:hover,

#topnav ul a:hover {background-color:#000000;color:#d7d0ac;}

#topnav li.dropDown:hover ul.subMenu a:hover,#topnav li.hover ul.subMenu a:hover{background-color:#000000; color:#E6E7B9;}

#topnav ul li a small,#topnav ul li a:hover small{color:#d7d0ac;}

#topnav ul.subMenu {border:0px #000000 solid;border-top:none;}

#topnav ul.subMenu li.divider{border-bottom:0px solid #000000;}

div.contentMid2 {padding:0px;}
div.contentMid1 {padding:0px;}
div.contentMid {padding:0px;}
div.content {padding:0px;}

I've removed comment tags to make it a little easier to read. The HTML is simply two divs in the blurbs section.

My test page

If you look, The picture I've put in is not left or top justified. I can't for the life of me figure out where this padding is coming from. I want to put in an 800px by 800px image to use as the main area, but obviously I can't do it now as there's white space from somewhere.



Thanks for the help!

Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike

[Mickey]

Try replacing the bottom of your CSS with this:

CODE

div.contentMid2 {padding:0px; border:0px;}
div.contentMid1 {padding:0px; border:0px;}
div.contentMid {padding:0px; border:0px;}
div.content {padding:0px; border:0px;}
div.content div.moduleBody * {padding:0px; border:0px;}

See if that does it.

[william92371]

It's still floating out there, Mike ;) Thanks for the help there. I thought that might have done it.

I'm missing something in the hierarchy. Been up all day and all night, I'll look again later. In the meantime, if anybody else has some ideas, thank you in advance!

[miguelS]

This:

div.blurbsModule {margin:0px; padding:0px}
div.blurbsModule div.moduleBody, div.blurbsModule div.moduleMid{padding:0px;}

per Eileen's Profile 2.0 Overlay Tutorial

[william92371]

Outstanding, Miguel. Thank you, sir!

I missed that in her tutorial, I'll have to reread it.

That's perfect!

[manny-the-dino]

Topic Closed & Moved