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 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Text Wrapping Issues

    Having issues with IE again. Here is my code. You'll see in my code that I'm creating boxes with the id "blockright" or "blockleft" to make borders around a circular image. It's working fine in FF, but the left aligned boxes push all the text down in IE. What am I missing?

    CSS
    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: 125px;
    	height: 10px;
    	float: right;
    	clear: right;
    	left: 919px;
    	top: 588px;
    }
    
    #blockright4 {
    	width: 135px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright5 {
    	width: 145px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright6 {
    	width: 150px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright7 {
    	width: 150px;
    	height: 10px;
    	float: right;
    	clear: right;
    
    }
    
    #blockright8 {
    	width: 150px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright9 {
    	width: 145px;
    	height: 10px;
    	float: right;
    	clear: right;
    }
    
    #blockright10 {
    	width: 140px;
    	height: 10px;
    	float: right;
    	clear: right;
    
    }
    
    #blockright11 {
    	width: 130px;
    	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;
    }


    HTML
    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="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. 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>

  • #2
    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
    Don't you have a site url.
    It's difficult to work without the images.

    Everything on my PC is over to the right. There are only two obvious blocks.

    This is what I see.

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

  • #3
    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
    This a cross post.
    @taylortsantles, please read the posting guidelines
    Quote Originally Posted by http://www.codingforums.com/postguide.htm
    1) Do not cross post your question in multiple forum categories- When posting, there is no excuse to post the same question in multiple categories in hopes of getting a quicker response. This is called spamming, and can get you banned. Choose one category that best accommodates your question, and post it there, once. If you're following up on a question, reply to the original thread, not start a new one! Everyone here is volunteering their time to help out others. The least you can do is make their jobs easier and less confusing.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    All those block divs have no content. Get rid of all of them, and just use one div with an ID for positioning. No reason to do that.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    The site isn't up and running yet.

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I'm sorry about breaking that rule. I didn't see that. I was trying to be more specific, not get a quicker answer. Next time I'll post it in the same thread.

    Thanks
    Last edited by taylortsantles; 07-19-2008 at 07:44 PM.

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

    From the beginning

    Below is link to a still image of what the site looks like, I want to wrap the text around the two parts of the stethescope that come into the page. What's the best rout to go? I've already tried making a bunch of separate divs aligned on the left and right sides of the content area, but that didn't work, unless I was doing something wrong. I would really appreciate someones advice.

    http://natecoventry.googlepages.com/cov1.JPG

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    the right side is doable but the left is going to cause issues. Here's some code with some comments. hopefully it will be of some use.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css" media="screen">
    
    #container {
    width: 600px;
    margin: 0 auto;
    font: .9em/1.3em arial, sans-serif;
    }
    
    .floaty1box {
    float: right;
    width: 100px;
    height: 200px;
    background: #eded33;
    clear: right;
    }
    
    .floaty1 {
    width: 200px;
    height: 400px;
    background: #36993d;
    float: right;
    }
    
    .floaty2 {
    width: 200px;
    height: 200px;
    background: #de9cc9;
    float: left;
    }
    </style>
    	
    </head>
    <body>
    
    	<div id="container">
    
    <div class="floaty1"><p>This is your navigation.<br /><br />Sed at sem. Maecenas porttitor turpis ac risus. Suspendisse nunc orci, placerat in, ullamcorper id, viverra ac, ante. Vivamus tortor. In vitae ligula. Nunc egestas metus. Fusce ornare fringilla felis. In at metus non libero molestie bibendum.</p></div>
    <div class="floaty1box">This is the space  to go around the stethiscope (sp?)</div>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sit amet ligula eget purus varius lacinia. In faucibus erat a pede. Nullam pharetra, arcu id tempor aliquet, dui eros bibendum felis, quis imperdiet libero mi vitae ligula. Curabitur odio quam, iaculis sit amet, fringilla in, adipiscing quis, velit. Aliquam ultricies enim at eros. Sed a orci et sapien dictum tincidunt. Phasellus at sapien eu erat mattis imperdiet. Integer egestas feugiat magna. Vivamus fermentum, augue cursus lobortis vehicula, elit dolor cursus elit, vitae sollicitudin leo turpis eu orci. In lobortis. In id ligula ut turpis eleifend aliquam. Aenean erat nisi, auctor vel, ornare vitae, consequat vitae, augue. Ut rhoncus, est id tempor fermentum, mauris sapien tincidunt diam, ut semper dui elit et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus porta. Nullam egestas tellus a dui. Integer laoreet. Pellentesque ullamcorper egestas quam. Vestibulum nibh.</p>
    
    
    
    <p>Aliquam convallis. Proin sollicitudin dui ut libero. Maecenas sed nibh. Praesent purus. Praesent odio risus, aliquet eu, blandit sit amet, eleifend sit amet, dolor. Nunc egestas dui eget tellus. Nam sed dui id velit consectetuer sagittis. Phasellus pede urna, sollicitudin vitae, gravida eget, adipiscing et, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse bibendum. Mauris dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel libero vitae massa tristique rhoncus. Nullam feugiat malesuada erat. Vestibulum facilisis, dui nec vulputate dictum, felis orci vestibulum tortor, eget adipiscing nisl leo vel eros. Sed enim. Suspendisse scelerisque. Donec sit amet dolor.</p>
    
    <div class="floaty2">This one is probably not going to work as the text resize will kill it. It's probably better to move the ear peice over to the left so you don't have to wrap text. ;)</div>
    
    <p>Sed at sem. Maecenas porttitor turpis ac risus. Suspendisse nunc orci, placerat in, ullamcorper id, viverra ac, ante. Vivamus tortor. In vitae ligula. Nunc egestas metus. Fusce ornare fringilla felis. In at metus non libero molestie bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis cursus purus. Vestibulum venenatis. Ut non elit eget massa euismod fringilla. Mauris dapibus, nunc vitae imperdiet placerat, diam felis consequat mi, nec dignissim eros urna vitae arcu. Donec ac enim ac metus viverra convallis. Mauris eros purus, malesuada ut, rhoncus eu, feugiat laoreet, odio. Mauris nisi tellus, iaculis et, aliquam eget, rutrum ac, lacus.</p>
    
    	</div>
    
    </body>
    
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I've already tried something similar and the left was causing me issues in IE7. Are there any ways to dodge this issue?

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I cant forsee any issues but, do you have a sample o look at . real code not an image?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    taylortsantles (07-19-2008)

  • #11
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Unfortunately not yet, let me give your code a quick try and I'll let you know if it worked.

    Thanks,
    Taylor

  • #12
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you so much for the suggestion. I think cutting the stethoscope earbud of the page was the best idea. I did it and I think it will work fine.

    Thank you again,
    Taylor

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Cool. Glad it worked (sort of )
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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