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
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    I Can't figure this out!

    I'm trying to create a couple boxes that are left aligned to create a text wrap around a circular image. It's working fine, other than the fact that IE is pushing all the text down with the boxes on the left, rather than letting the boxes within the text. The text is left justified and it's working in firefox, but not IE. Here's my code:

    Code:
    #blockleft2 {
    	width: 100px;
    	height: 50px;
    	float: left;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I guess you are applying the same id="blockleft2" all your boxes, which is pretty invalid. You need to change it to class and select in the CSS using .blockleft2

    Now your problem might be due to IE's 3px bug. have a try by applying display:inline; to all your floated divs. If the problem persists, post your complete html and it's CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Yes, I was applying the same name, but different numbers. It was working great on the right. It's all working in firefox, but IE is the only one that doesn't like it. Any other suggestions? I tryed the "display: inline" and it didn't work either.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Here's the code

    Sorry, here's my code:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    /* Page Layout */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {	
    	background: url(Images/body-bg.jpg);
    }
    
    #page-wrap {
    	background: url(Images/bg.jpg) no-repeat;
    	width: 1200px;
    	height: 1037px;
    }
    
    #container {
    	width: 580px;
    	padding: 82px 0px 0px 510px;
    }
    
    #box1 {
    	width: 300px;
    	height: 50px;
    }
    
    #header {
    	background: url(Images/covlogo.jpg) no-repeat;
    	width: 292px;
    	height: 135px;
    	padding-bottom: 20px;
    }
    
    #welcome {
    	width: 300px;
    	font: 14px Arial, Helvetica, sans-serif;
    	color: #000;
    	line-height: 20px;
    }	
    
    #bodytext {
    	font: 0.8em Arial, Helvetica, sans-serif;
    	color: #000;
    	padding-top: 15px;
    	padding-right: 45px;
    	background: transparent;
    }
    	#bodytext p {
    		text-align: justify;
    	}
    		#bodytext p-null {
    			text-align: left;
    		}
    		#bodytext p-null {
    			text-align: center;
    		}
    		#bodytext p-null {
    			text-align: right;
    		}
    	
    #footer {
    	font: 12px Arial, Helvetica, sans-serif;
    	color: #fff;
    	padding-top: 455px;
    	float: right;
    	padding-left: 330px;
    	width: 250px;
    }
    
    #floatright {
    	width: 261px;
    	height: auto;
    	clear: right;
    	float: right;
    	padding-left: 10px;
    }
    
    #cornerimg {
    	width: 261;
    	height: 270;
    }
    
    
    /* Typography */
    
    h1 { 
    	font: Arial, Helvetica, sans-serif; 
    	color: #000000;
    }
    
    h2 {
    	font: 12 px Arial, Helvetica, sans-serif; 
    	color: #fff;
    }
    
    
    /* Navigation */
    
    #nav {
      	font: small-caps 20px 'times new roman', times, serif;
      	color: #000;
      	list-style: none;
    	width: 200px;
    	height: 175px;
    	margin: 4px 0px 0px 0px;
    	padding-left: 32px;
    }
    
    .subnav	{
    	font: 13px Arial, Helvetica, sans-serif, #000000;
    	text-decoration: none;
    	text-transform: none;
    	font-variant: normal;
    	padding-left: 20px;
    	line-height: 18px;
    }
    
    
    /* Links */
    
    a {
    	color: #000000; 
    	text-decoration: none;
    }
    
    a:hover {
    	color: #666666;
    }
    
    
    /* Blocks */
    
    /* Left Blocks*/
    
    #blockleft1 {
    	width: 1px;
    	height: 10px;
    	float: left;
    	display: inline;
    }
    
    #blockleft2 {
    	width: 100px;
    	height: 50px;
    	float: left;
    	display: inline;
    }
    	
    /* Right Blocks*/
    
    #blockright1 {
    	width: 25px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright2 {
    	width: 45px;
    	height: 25px;
    	float: right;
    	clear: right;
    }
    
    #blockright3 {
    	width: 115px;
    	height: 10px;
    	float: right;
    	clear: right;
    	left: 919px;
    	top: 588px;
    }
    
    #blockright4 {
    	width: 125px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright5 {
    	width: 130px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright6 {
    	width: 140px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright7 {
    	width: 145px;
    	height: 10px;
    	float: right;
    	clear: right;
    
    }
    
    #blockright8 {
    	width: 142px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright9 {
    	width: 140px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright10 {
    	width: 135px;
    	height: 10px;
    	float: right;
    	clear: right;
    
    }
    
    #blockright11 {
    	width: 125px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright12 {
    	width: 115px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright13 {
    	width: 100px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright14 {
    	width: 50px;
    	height: 10px;
    	float: right;
    	clear: right;
    
    }#blockright15 {
    	width: 125px;
    	height: 10px;
    	float: right;
    	clear: right;
    }




    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Covenant Family Allergy</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    <div id="page-wrap">
    
    <div id="container">
    
    <div id="floatright">
      <div id="cornerimg"><img src="Images/corner/family.jpg" alt="Family" /></div>
    			<ul id="nav">
            		<li><a href="index.html">Home</a></li>
           		    <li><a href="aboutus.html">About Us</a></li>
                	<li><a href="allergyandasthma.html">Allergy and Asthma</a></li>
                	<li><a href="appointments.html">Appointments</a></li>
                	<li><a href="insurance.html">Insurance</a></li>
    			</ul>
    </div>
    		
            <div id="box1"></div>
            <a href="index.html"><div id="header"></div></a>
            
            <div id="welcome">
                <p class="style1"><strong>Welcome to Covenant Family Allergy.</strong></p>
                <p class="style1">&nbsp;</p>
                <p class="style1">We are a committed team of professionals in North Augusta, SC, who promise to care for you like our very own family. We will strive each day to live up to the 				words of the Lord Jesus, “Love your neighbor as yourself.” This is our promise to you and your family.</p>
        </div>
          
    <div id="bodytext">
    <div id="blockleft1"></div>
    <div id="blockright1"></div>
    <div id="blockright2"></div>
    <div id="blockright3"></div>
    <div id="blockright4"></div>
    <div id="blockright5"></div>
    <div id="blockright6"></div>
    <div id="blockright7"></div>
    <div id="blockright8"></div>
    <div id="blockright9"></div>
    <div id="blockright10"></div>
    <div id="blockright11"></div>
    <div id="blockright12"></div>
    <div id="blockright13"></div>
    <div id="blockright14"></div>
    <div id="blockleft2"></div>
    
    
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin a felis  facilisis libero ultrices vestibulum. Nam id pede. In eget nisi. Mauris  eu justo. Aenean id sapien ut mauris volutpat fermentum. Duis aliquet  blandit turpis. Praesent at purus malesuada mauris ultricies  consectetuer. Donec purus. Aenean scelerisque metus sed pede imperdiet  fermentum. Vestibulum fringilla metus. Nullam ac justo et tellus  ultricies tempor. Sed vestibulum semper magna. Aliquam neque urna,  porttitor eu, pellentesque non, rutrum at, odio. Donec aliquet justo  sit amet augue. Pellentesque non ante ut sem consequat congue.Suspendisse nec augue a turpis fermentum auctor. Cras pellentesque  justo vitae elit. Fusce blandit lacus at velit. Suspendisse placerat.  Cras posuere pellentesque urna. Aliquam erat volutpat. Donec felis.  Morbi pulvinar placerat risus. Nam a lectus. Nullam lacus. Mauris in  elit bibendum enim sollicitudin tincidunt. </p>
          <p>Donec sollicitudin tincidunt mauris. Phasellus lacinia arcu vitae  dolor. Maecenas dictum. Sed eget metus. Nunc et ipsum. Maecenas  scelerisque libero a lacus consectetuer dignissim. Nunc ut sapien. Duis  lacinia nulla in enim. Curabitur consectetuer dictum diam. Proin  feugiat orci sed justo. Phasellus adipiscing blandit diam. In vitae  lacus sed nibh posuere tempus. Pellentesque habitant morbi tristique  senectus et netus et malesuada fames ac turpis egestas. Suspendisse  dignissim ligula non nulla. Phasellus feugiat. Nulla interdum. Morbi  blandit dolor eget lectus. Fusce eu eros. Ut quis dui at urna  sollicitudin porta. </p>
    
          </div>
      </div>
        </div>
    
    </div>
    </body>
    </html>

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Really I don't know the reason for this behaviour, but I found out(?) the reason anyway. ie when I removed the top padding from
    Code:
    #bodytext {
    	font: 0.8em Arial, Helvetica, sans-serif;
    	color: #000;
    	padding-top: 15px;
    	padding-right: 45px;
    	background: transparent;
    }
    , those blocks stacked well on top of the other one. Somehow this padding gets inherited(?) to the inner elements.

    The real fun is, I couldn't nullify this by applying
    Code:
    #bodytext div{
    padding:0;
    }
    and in fact this is already applied by the * selector.

    Fortunately
    Code:
    #bodytext div{
    margin-top:-15px;
    border:1px solid red;/*to see them in action*/
    }
    did the trick, though this is another mystery (and this should be applied in conditional comment)!

    I can't find out any other simple solution than removing the top padding from the container.

    I welcome all comments/explanations from CF experts on this.

    thanks.
    Last edited by abduraooft; 07-19-2008 at 05:02 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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