...

View Full Version : Text Wrapping Issues



taylortsantles
07-19-2008, 10:44 AM
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
@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
<!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>

effpeetee
07-19-2008, 03:09 PM
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. (http://exitfegs.co.uk/ctest.html)

Frank

abduraooft
07-19-2008, 04:36 PM
This a cross post (http://www.codingforums.com/showthread.php?t=144647).
@taylortsantles, please read the posting guidelines

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.

macwiz
07-19-2008, 05:38 PM
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.

taylortsantles
07-19-2008, 06:27 PM
The site isn't up and running yet.

taylortsantles
07-19-2008, 06:35 PM
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

taylortsantles
07-19-2008, 06:58 PM
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

harbingerOTV
07-19-2008, 07:23 PM
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.


<!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>

taylortsantles
07-19-2008, 07:34 PM
I've already tried something similar and the left was causing me issues in IE7. Are there any ways to dodge this issue?

harbingerOTV
07-19-2008, 07:41 PM
I cant forsee any issues but, do you have a sample o look at . real code not an image?

taylortsantles
07-19-2008, 07:44 PM
Unfortunately not yet, let me give your code a quick try and I'll let you know if it worked.

Thanks,
Taylor

taylortsantles
07-19-2008, 08:06 PM
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

harbingerOTV
07-19-2008, 08:17 PM
Cool. Glad it worked (sort of ;) )



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum