Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1px space between divs

    Hi

    I am having problem in that the browser is displaying empty divs.

    I have attached a screenshot of the issue and the related html/css extracts.

    Surely if a container is empty it collapses fully and therefore if it's parent container is also empty it should collapse as well?

    There seems to be 1px of the container drawn, meaning that the borders in .fromQuestion are being drawn.

    Any help would grealty be appreciated!
    Attached Thumbnails Attached Thumbnails 1px space between divs-screen.png  
    Attached Files Attached Files
    Last edited by davkaplan; 01-11-2008 at 09:23 AM.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    Code:
    * {
    margin:0px;
    padding:0px;
    }
    See if that helps, i didnt see it in your code!

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    davkaplan

    There is an icon on the posting page to include the code '#' , css and html. It is easier to cut and paste for you and for us. Also you do not show a doctype which is essential.

    If you include ALL the code we are able to easily put it in our editor and try it out.

    Frank
    Last edited by effpeetee; 01-10-2008 at 08:30 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Thanks for the help. I tried the margin:0;padding:0; as suggested with no luck.

    The HTML is generated by an aspx page and it's quite large, that's why I've only pasted the relevant section.

    Bug seems to happen in both IE and FF.

    DocType:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    HTML:

    Code:
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c5_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c5_self" process="ignore">
    <div class="V2ajaxSpinner">
    <img id="ctl00_ContentPlaceHolder1_fe_c2_c5_spin" style="visibility: hidden;" src="/ACWP_DEV_STAGING/App_Themes/Demo/images/processingSpinner.gif"/>
    </div>
    <div class="labelDiv">* What percentage of your work is down to your core trade? </div>
    <div class="controlDiv">
    <input id="ctl00_ContentPlaceHolder1_fe_c2_c5" type="text" value="100.00" onfocus="brokerSpecificOnFocus('ctl00_ContentPlaceHolder1_fe_c2_c5_Container','ctl00_ContentPlaceHolder1_fe_c2_c5'); clickOnFocus('71260593_Question_131745', this); showPopupText(this, 'popupDivID','This is the percentage of work carried out on your main trade, e.g. if you are a carpenter and a plumber and the % of contracts carried out as a carpenter is 75% and the plumbing aspect is 25%, enter 75%. If this trade fully describes all of your activites, please ensure that this question is answered as 100%.');" onblur="brokerSpecificOnBlur('ctl00_ContentPlaceHolder1_fe_c2_c5_Container','ctl00_ContentPlaceHolder1_fe_c2_c5'); userAction('71260593_Question_131745','ctl00_ContentPlaceHolder1_fe_c2_c5_spin', this); removePopupText('popupDivID');" name="ctl00$ContentPlaceHolder1$fe$c2$c5"/>
    </div>
    <div class="V2popupIcon">
    <img src="/ACWP_DEV_STAGING/App_Themes/Demo/images\questionMark.png" onmouseover=" showPopupText(this, 'popupDivID','This is the percentage of work carried out on your main trade, e.g. if you are a carpenter and a plumber and the % of contracts carried out as a carpenter is 75% and the plumbing aspect is 25%, enter 75%. If this trade fully describes all of your activites, please ensure that this question is answered as 100%.');" onmouseout=" removePopupText('popupDivID');"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c5_validators" class="validatorDiv">
    <span id="ctl00_ContentPlaceHolder1_fe_c2_c5requiredFieldValidator" class="V2validator" style="color: Red; display: none;">Required</span>
    <span id="ctl00_ContentPlaceHolder1_fe_c2_c5currencyFormatValidator" class="V2validator" style="color: Red; display: none;">Invalid currency</span>
    </div>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c5_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c6_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c6_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c6_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c7_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c7_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c7_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c8_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c8_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c8_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c9_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c9_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c9_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c10_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c10_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c10_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c11_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c11_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c11_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c12_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c12_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c12_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c13_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c13_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c13_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c14_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c14_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c14_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c15_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c15_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c15_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c16_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c16_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c16_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c17_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c17_self" class="followingQuestion" process="ignore"/>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c17_children"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c18_Container" class="formQuestion" process="Add">
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c18_self" process="ignore">
    <div class="V2ajaxSpinner">
    <img id="ctl00_ContentPlaceHolder1_fe_c2_c18_spin" style="visibility: hidden;" src="/ACWP_DEV_STAGING/App_Themes/Demo/images/processingSpinner.gif"/>
    </div>
    <div class="labelDiv"> Business Description</div>
    <div class="controlDiv">
    <input id="ctl00_ContentPlaceHolder1_fe_c2_c18" type="text" value="Bricklayers" onfocus="brokerSpecificOnFocus('ctl00_ContentPlaceHolder1_fe_c2_c18_Container','ctl00_ContentPlaceHolder1_fe_c2_c18'); showPopupText(this, 'popupDivID','The description of your business.');" onblur="brokerSpecificOnBlur('ctl00_ContentPlaceHolder1_fe_c2_c18_Container','ctl00_ContentPlaceHolder1_fe_c2_c18'); removePopupText('popupDivID');" name="ctl00$ContentPlaceHolder1$fe$c2$c18"/>
    </div>
    <div class="V2popupIcon">
    <img src="/ACWP_DEV_STAGING/App_Themes/Demo/images\questionMark.png" onmouseover=" showPopupText(this, 'popupDivID','The description of your business.');" onmouseout=" removePopupText('popupDivID');"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c18_validators" class="validatorDiv"/>
    </div>
    <div id="ctl00_ContentPlaceHolder1_fe_c2_c18_children"/>
    </div>
    CSS:

    Code:
    /*CSS for layout of groups and question rows*/
    .feTitleDiv
    {
    	width:100%;
    	font-size: 2.5em;
    	border-bottom: 3px solid black;
    }
    
    .V2ButtonDiv
    {
    	width:100%;
    	clear:both;
    }
    .groupTitleDiv
    {
    	width:100%;
    	background:transparent;
    	font-size: 1.5em;
    	font-weight:bold;
    	color:#113388;
    margin-left:-1px;
    
    border-color:#E0E6EC;
    border-style:solid;
    border-width:0pt 1px;
    }
    .groupCollapse
    {
    	margin-top:0.3em;
    	margin-bottom:0.2em;
    	width:5%;
    	float:left;
    margin-left:1em;
    }
    .groupCollapse img
    {
    }
    .groupAjaxSpinner
    {
    	margin-top:0.25em;
    	width:5%;
    	float:left;
    }
    .groupAjaxSpinner img
    {
    	vertical-align:middle;
    	text-align:center;
    	height:16px;
    	width:16px;
    }
    .groupTitleText
    {
    	padding:0.5em 0;
    	width:66%;
    color:#3D75AC;
    padding:0pt 0pt 0.3em;
    }
    .groupTitleControl
    {
    	margin-top:0.25em;
    	width:20%;
    	float:right;
    }
    .groupTitleControl input[type='button']
    {
    	background-color:#850512;
    	color:#FFF;
    }
    .formEngine
    {
    	/*The form engine div has a style position:relative hard coded, this is required for functionality*/
    	font-size:1.1em;
    font-family:Verdana,Arial,Serif;
    	width:100%;
    }
    .formEngineGroup
    {
    	width:100%;
    	width:100%;
    	background:#F5FAFE url(http://i.l.cnn.net/cnn/.element/img/2.0/mosaic/base_skins/UGC/ugc_TR_bg.gif) repeat-x scroll 100% 0pt;
    margin-top:1em;	
    }
    
    .formQuestion
    {
    background-color:#FFFFFF;
    border-left:0.1em solid #E0E6EC;
    border-right:0.1em solid #E0E6EC;
    border-top:0.1em solid #E0E6EC;
    margin-left:-1px;
    width:100%;
    
    
    }
    .followingQuestion
    {
    	display:none;
    
    }
    .hiddenDiv
    {
    	display:none;
    }
    /*css to hide floating children of floating divs*/
    .followingQuestion div
    {
    	display:none;
    }
    .hiddenDiv div
    {
    	display:none;
    }
    /*end layout of groups and question rows*/
    
    /*layout of individual questions*/
    .labelDiv
    {
    	float:left;
    	width:40%;
    padding-top:0.8em;
    }
    .labelDivLong
    {
    	width:86%;
    	float:left;
    
    padding-top:1em;
    }
    .controlDiv
    {
    	position:relative;
    	float:left;
    	width:43%;
    }
    .controlDiv input[type='checkbox']
    {
    	float:right;
    	margin-right:3%;
    }
    .controlDiv input[type='text']
    {
    background:transparent url(../Images/v2/input200.gif) no-repeat scroll 0% 50%;
    border:medium none;
    height:23px;
    padding:6px 10px 0px 6px;
    width:91%;
    }
    
    
    .controlDiv select
    {
    background:transparent url(../Images/v2/input200.gif) no-repeat scroll 0% 50%;
    border:medium none;
    height:23px;
    padding:2px 12px 4px 5px;
    width:98%;
    }
    .controlDiv input[type='button']
    {
    	background-color:#850512;
    	color:#FFF;
    	width:40%;
    	float:right;
    }
    .controlDivLong
    {
    margin-bottom:0.8em;
    margin-top:0.8em;
    	position:relative;
    	margin-left:5%;
    	width:86.5%;
    }
    .controlDivLong select
    {
    
    	width:100%;
    }
    .scrolly
    {
    	margin-left:5%;
    	float:left;
    	width:81%;
    	max-height:120px;
    	overflow:auto;
    	line-height:2em;
    }
    .validatorDiv
    {
    	clear:both;
    font-size:0.01em;
    margin-left:-10000px;
    }
    .V2validator
    {
    	margin-left:5%;
    
    }
    .V2ajaxSpinner
    {
    	float:left;
    	width:8%;
    height:40px;
    }
    .V2ajaxSpinner img
    {
    padding-top:0.4em;
    	vertical-align:middle;
    margin-left:10%;
    	text-align:center;
    }
    .V2popupIcon
    {
    	float:left;
    	width:5%;
    }
    .V2popupIcon img
    {
    	margin-top:2px;
    margin-left:-5px;
    	
    }
    /*-----------------------postcode lookup styles-----------------------*/
    .postcodeLookupDiv
    {
    	margin-top:0.5em;
    	margin-left:5%;
    	width:86%;
    	float:left;
    	clear:both;
    margin-bottom:0.7em;
    }
    .postcodeLookupDiv input[type='button']
    {
    	float:right;
    	background-color:transparent;
    	color:#FFF;
    background-image:url(../Images/v2/postcode.png);
    border:none;
    background-repeat: no-repeat;
    width:110px;
    height:25px;
    }
    .postcodeLookupResults
    {
    	clear:both;
    	background-color:white;
    	width:100%;
    	margin-top:0.5em;
    }
    .postcodeLookupResults a
    {
    	list-style-image:url(../Images/ico_arrow.gif);
    	margin-left:1em;
    }
    /*-----------------vehicle lookup styles---------------------*/
    .vehicleDescriptionDiv
    {
    	float:left;
    	width:91%;
    	margin-left:5%;
    }
    .vehicleLookupDiv
    {
    	margin-left:5%;
    	float:left;
    	width:81%;
    }
    .vehicleResultContainer
    {
    	max-height: 300px;
    	overflow:auto;
    	clear:both;
    	border:solid 1px black;
    }
    .vehicleResultsContainer a
    {
    	list-style-image:url(../Images/ico_arrow.gif);
    	margin-left:1em;
    }
    .vehicleLookupDiv select
    {
    	clear:both;
    	float:right;
    	width:40%;
    }
    .vehicleLookupDiv input[type='text']
    {
    	clear:both;
    	float:right;
    	width:40%;
    }
    .vehicleLookupDiv input[type='button']
    {
    	clear:both;
    	float:right;
    	background-color:#850512;
    	color:#FFF;
    }
    /*-------------------validation styles---------------------------*/
    .answerInvalid
    {
    	background:#F7E1E0 url(../Images/v2/cross.png) no-repeat scroll 99% 50%;
    }
    .answerInvalid labelDiv
    {
    	font-weight:bold;
    }
    .answerValid
    {
    	background:#E6EFEA url(../Images/v2/tick.png) no-repeat scroll 99% 50%;
    }
    .answerValid labelDiv
    {
    	font-weight:normal;
    }
    /*-------------------popup text---------------------------*/
    .popupText
    {
    	left:105%;
    	width:25%;
    	border:solid 1px #850512;
    	position:absolute;
    }

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm still desparately trying to resolve this.

    Any ideas?

    Thanks,
    David


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •