SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Sandbag Divs/Wrap Text with Images

    I have attempted to create sandbag divs for one of the columns on my design, but IE does NOT like it at all! Any solution? Here's my CSS for the right column:

    Code:
    	#column_right {
    	border: 1px solid #009999;
    	float: right;
    	background: #B2C9D0 url(../images/ducky.jpg) right 90% no-repeat;
    	padding-bottom: 10px;
    	width: 336px;
    	margin-left: 10px;
    	}
    
    	#ducky1, #ducky3, #ducky10, #ducky12, #ducky13, #ducky14, #ducky15, #ducky16, #ducky18, #ducky19, #ducky20, #ducky21, #ducky22 {
    		float: right;
    		clear: right;
    		height: 16px;
    	}
    	
    	#ducky1 {
    	width: 0px;
    	height: 150px;
    	}
    	
    		#ducky3 {
    		width: 110px;
    	}
    	
    		#ducky10 {
    	width: 160px;
    	height: 32px;
    	}
    	
    		#ducky12 {
    		width: 150px;
    	}
    		#ducky13 {
    		width: 160px;
    	}
    		#ducky14 {
    		width: 140px;
    	}
    		#ducky15 {
    		width: 160px;
    	}
    	
    		#ducky16 {
    	width: 160px;
    	height: 32px;
    	}	
    	
    	#ducky18 {
    		width: 160px;
    	}	
    	#ducky19 {
    		width: 150px;
    	}	
    	
    	#ducky20 {
    		width: 140px;
    	}
    	
    	#ducky21 {
    		width: 130px;
    	}
    	
    	#ducky22 {
    	width: 130px;
    	height: 3px;
    	}
    HTML:
    HTML Code:
    <div id="column_right">
    		    
    		  <h1>want to join?</h1>
    		  <div id="ducky1"></div>
    		  <div id="ducky3"></div>
    		  <div id="ducky10"></div>
    		  <div id="ducky12"></div>
    		  <div id="ducky13"></div>
    		  <div id="ducky14"></div>
    		  <div id="ducky15"></div>
    		  <div id="ducky16"></div>
    		  <div id="ducky18"></div>
    		  <div id="ducky19"></div>
    		  <div id="ducky20"></div>
    		  <div id="ducky21"></div>
    		  <div id="ducky22"></div>
    		    
    		  <p>Our Chapter welcomes all stay-at-home moms who live in Ripon and Salida.  If you are interested in joining MOMS Club of Ripon/Salida, CA, we invite you to attend our next chapter meeting.  Business meetings are held on the last Monday of each month at 10:00AM, and all members and interested moms are welcome to attend.  Children are always welcome.</p>
    		  <p>For more information about joining the MOMS Club of Ripon/Salida, please email us at such@such.org.If you do not live within our boundaries, but would like more information about MOMS Club, please send an email to momsclub@aol.com.  For additional information about MOMS Club, please visit the International MOMS Club website.</p>
    		</div>	
    I've attached an image as to what it should look like (this was taken from Firefox).
    Attached Images Attached Images

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #ducky1 has a width of zero, I think that is the cause.
    Happy ADD/ADHD with Asperger's

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd also change those DIVs to SPANs then set their display to block, so that certain browsers who may get the HTML but not the CSS don't set the margins and padding for them causing a HUGE gap.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by erik
    ducky1 has a width of zero, I think that is the cause.
    Yes i think it needs to be 1px for iE.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Sandbag

    Quote Originally Posted by Paul O'B View Post
    Yes i think it needs to be 1px for iE.
    Thank you! I will give that a try!
    Toad78

  6. #6
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Sandbag Divs/Wrap Text with Images

    Quote Originally Posted by Paul O'B View Post
    Yes i think it needs to be 1px for iE.
    Well, I've tried to figure this one, but I don't know what the problem is. I've began using the sandbag treatment on a web page, but IE7 and Firefox are treating it differently.

    The page is at: http://www.friendsoftheriponlibrary.org/copy.php

    I have created left borders so you can see where the sandbags are. In Firefox it's not too bad, but in IE, YUK! The code is within the page, but here it is

    Code:
    .t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9, .t10, .t11 {
    	float: right;
    	clear: right;
    	display: block;
    	height: 16px;
    	border-left: 1px solid #000;
    }
    
    .t1 {
    	width: 1px;
    	height: 271px;
    }
    .t2 {
    	width: 90px;
    }
    .t4 {
    	width: 180px;
    }
    .t3 {
    	width: 186px;
    }
    .t5 {
    	width: 366px;
    }
    HTML Code:
    <h1>Join the Friends</h1>
    			<span class="t1"></span>
    			<span class="t2"></span>
    			<span class="t3"></span>
    			<span class="t4"></span>
    			<span class="t5"></span>
    			<span class="t6"></span>
    
    			<span class="t7"></span>
    			<span class="t8"></span>
    			<span class="t9"></span>
    			<span class="t10"></span>
    			<span class="t11"></span>
    			<span class="t12"></span>
    			<p>The Frien....</p>
    I only did a few lines just to see how things were working out, but I stopped when I saw how awkward IE was treating it. Any clues as to what I'm doing wrong?

    Toad78

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    The main problem is that you have given a width to the h2 which means that it can't fit alongside the floats in IE and it causes a big gap.

    Remove the width from here:

    Code:
    #body-content h1, #body-content h2 {
        color: #5A3711;
        margin: 0 0 10px 0;
        border-top: 5px solid #A2B538;
        /*width: 95&#37;;*/
        text-transform: capitalize;
        font: bold 20px/24px Verdana, Arial, Helvetica, sans-serif;
        padding-top: 3px;
    }
    The second problem is that you haven't controlled the margins and padding consistently.

    If you add this as a test:

    Code:
    * {margin:0;padding:0}
    Now you will see that most browsers are more or less the same.
    You should therefore makes sure that you address the top and bottom margins (and padding in some cases) on all the elements you use.

    Firefox usually adds a top and bottom margin to most elements while IE only applies a bottom margin. The amount of margin applied also varies between browsers. It's your job to control it explicitly

    (I am away for a few days now so I won't be able to reply again until Monday.)

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toad78 View Post
    Well, I've tried to figure this one, but I don't know what the problem is. I've began using the sandbag treatment on a web page, but IE7 and Firefox are treating it differently. ... /
    / ... I only did a few lines just to see how things were working out, but I stopped when I saw how awkward IE was treating it. Any clues as to what I'm doing wrong?
    Toad78
    Looked at the page, and it indeed seems different in different browsers. As Paul said; add a universal reset before the html-body declaration "* {margin:0;padding:0}"

    But looking closer I think the problem is that the "just_a_tree.jpg" bg-image is placed bottom. When things on page changes, the container changes hight and the bg-image moves.

    Edit) Note that the "sandbags" in the container "innerfix" needs to come before anything that can change size. (As they also seems to be.)

    Try once again, but with e.g.:
    Code CSS:
    .innerfix {
    	background: url(images/tree/just_a_tree.jpg) no-repeat 250px 335px;
    }
    I think the idea is good.
    Last edited by Erik J; Feb 16, 2008 at 04:02.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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