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 to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning of 1px separator line below banner

    Appreciate if there is a CSS guru out there who can help me.

    I have a 1px grey separator line at the top and bottom of my promotional banner. This works in this context.

    http://creative.ansteadhouse.com/index.htm

    Introducing a jQuery image slider creates a problem with the placement. The bottom border line now appears towards the top of the banner.

    http://creative.ansteadhouse.com/index6.htm

    Can someone assist me the required CSS tweak (.promo)

    http://creative.ansteadhouse.com/css/all.css

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mobiaus,
    Putting your .coin-slider in .promo is causing a bit of a problem.

    When you float .coin-slider it removes that element from the natural flow of the document. Since .coin-slider is a full width element...not much point in floating it.

    Remove that float: right; and see what happens... now you see what I mean about making .promo a containing element? Remove that extra .promo there and you'll get rid of the double line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Well done and thank you ... right on the money.

    This has now created another small problem ... notably the occurrence of a second grey divider line.

    Appreciate if you could cast some light on the necessary tweak to strip away this line and the associated padding.

    The revised page is at:
    http://creative.ansteadhouse.com/index6.htm

    Cheers
    Alistair

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Uhh...
    /snip ...er it removes that element from the natural flow of the document. Since .coin-slider is a full width element...not much point in floating it.

    Remove that float: right; and see what happens... now you see what I mean about making .promo a containing element? Remove that extra .promo there and you'll get rid of the double line.
    It's right here, highlighted in red -
    Code:
    ader/img07.jpg&quot;);"></a></div></div>
    			<div class="view"><a href="products.htm"> read more...</a> <span>we use the finest whey powders</span></div><!--view-->
    		</div><!--header-->
    		<div class="promo">
            </div>
    		<div id="main">
    	  <div class="three-cols">
    				<div class="col">
    					<h2>abo
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you for your help...

    All now working well .. thank you for your assistance.

    cheers
    Alistair


  •  

    Tags for this Thread

    Posting Permissions

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