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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about parent and child

    Hi all,

    I have been using CSS for a few months now and i thought i had started to get to grips with its quirks, however something baffled me today.

    I had a parent div which was set to float images right, and then about 2 children in, i had a div which was set to float the images left, however the images would always float right and not take notice of my child div.

    So basically the code was...

    Code:
    parentdiv1 {
    border: 1px dashed blue;
    }
    
    parentdiv1 img {
    float: right;
    }
    
    ...snip
    
    mycurrentchild {
    border: 1px dashed red;
    }
    mycurrentchild img {
    float: left;
    }
    The above code is an example but i would of thought that since i had overwritten the value of the float then it should of floated my images to the left in the "mycurrentchild" div.

    I have fixed the problem by removing the "float: right" in the "parentdiv1 img" but it seems a bit wierd because i may have actually wanted an image floating right in that div and one floating left in my child div. Why has it done this?

    Incidentally, whilst the rest of the page is absolutely screwed in IE the float actually worked

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selectors

    Please include the test markup as well; if your style rules are as you pasted, they are wrong: they try to select parentdiv1 and currentchild elements, which obviously don't exist. If you used classes instead, the style rules should read ".parentdiv1 ..." and ".currentchild ..." (notice the dot in front).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66 View Post
    Please include the test markup as well; if your style rules are as you pasted, they are wrong: they try to select parentdiv1 and currentchild elements, which obviously don't exist. If you used classes instead, the style rules should read ".parentdiv1 ..." and ".currentchild ..." (notice the dot in front).
    Sorry missed the # infront of the id names, i was just trying to make an example so it wasnt my exact code. Removing the float right from "#custservice img" worked though.

    This is the xhtml...
    Code:
    <div id="custservice">
    	<div class="contentboxheader">
    		<h2 class="black">Customer Support &amp; Service</h2>
    	</div>
    	
    	<div id="custserviceInnerframe">
                <div id="pophelp">
    			<div class="contentboxheader">
    				<h2 class="black">Popular Help Sections</h2>
    			</div>
    			
    			<div style="padding: 1.0em 0 0 2em;">
    				<div class="pophelpsections">
    					<img src="{WEB_TEMPLATE_PATH}/images/customer_services/about.gif" alt="About Nokia-Mobile-Phone-Deals.co.uk" />
    					<p>About Nokia-Mobile-Phone-Deals.co.uk</p>
    				</div>
    				<div class="pophelpsections">
    					<img src="{WEB_TEMPLATE_PATH}/images/customer_services/contact.gif" alt="Contact Nokia-Mobile-Phone-Deals.co.uk" />
    					<p>Contact Us</p>
    				</div>
    				<div class="pophelpsections">
    					<img src="{WEB_TEMPLATE_PATH}/images/customer_services/privacy.gif" alt="Your Privacy and Security" />
    					<p>Privacy and Security</p>
    				</div>
    				<div class="pophelpsections">
    					<img src="{WEB_TEMPLATE_PATH}/images/customer_services/terms.gif" alt="Website terms and conditions" />
    					<p>Terms and Conditions</p>
    				</div>
    				<div class="pophelpsections">
    					<img src="{WEB_TEMPLATE_PATH}/images/customer_services/order-tracking.gif" alt="Track your order online" />
    					<p>Order Tracking</p>
    				</div>
    			</div>
    		
    		</div>

    and the css...

    Code:
    #custservice {
    	border: thin solid black;
    	border-top: none;
    	margin: 0 0 8px 0;
    	background: #FFFFFF;
    	margin-left: 210px;
    }
    #custservice img {
    	float: right;
    }
    #custserviceInnerframe {
    	margin: auto;
    	background: #FFF;
    	overflow: auto;
    }
    
    #pophelp {
    	border: 1px solid #000; 
    	border-top: none; 
    	width: 47%; 
    	margin-top: 1em; 
    	margin-right: 1em; 
    	float: right; 
    	min-height: 24em; 
    	background: #CCCCDD;
    }
    
    /* Customer service pages - */
    .pophelpsections {
    	padding-top: 0.5em;
    }
    .pophelpsections p {
    	padding-left: 5em;
    }
    .pophelpsections img {
    	float: left;
    }

    Basically it was making the images go diagonally down from left to right.
    Last edited by ColdFire; 10-25-2006 at 04:08 PM.


  •  

    Posting Permissions

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