Any help on Ragged Float? 3rd Attempt

**jodmcc** · Dec 19, 2003 16:52

I am trying to do the Ragged Float which I saw on Eric Meyer's "css/edge". The text wraps the image in Camino, Firebird, Netscape 7.1, Mozilla 1.5, and Safari. In IE 5.2 Mac the text wraps about half way down the image but then goes straight down the bottom half of image. Is there something with not having and line height on the type setting that would cause this to happen? Any help would be appreciated.

John

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="2_col.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="top"><img src="hexnet.gif" alt="Hexnet Communications logo"></div>
<div id="left">
<ul id="mainnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li><li><a href="#">Support</a></li><li><a href="#">Parts</a></li><li><a href="#">Contact Us</a></li></ul></div>
<div id="right">
<img src="images/OS15066_01.jpg" alt="phoneline picture 1" class="phoneline">
<img src="images/OS15066_02.jpg" alt="phoneline picture 2" class="phoneline">
<img src="images/OS15066_03.jpg" alt="phoneline picture 3" class="phoneline">
<img src="images/OS15066_04.jpg" alt="phoneline picture 4" class="phoneline">
<img src="images/OS15066_05.jpg" alt="phoneline picture 5" class="phoneline">
<img src="images/OS15066_06.jpg" alt="phoneline picture 6" class="phoneline">
<img src="images/OS15066_07.jpg" alt="phoneline picture 7" class="phoneline">
<img src="images/OS15066_08.jpg" alt="phoneline picture 8" class="phoneline">
<img src="images/OS15066_09.jpg" alt="phoneline picture 9" class="phoneline">
<img src="images/OS15066_10.jpg" alt="phoneline picture 10" class="phoneline">
<img src="images/OS15066_11.jpg" alt="phoneline picture 11" class="phoneline">
<img src="images/OS15066_12.jpg" alt="phoneline picture 12" class="phoneline">
<img src="images/OS15066_13.jpg" alt="phoneline picture 13" class="phoneline">
<img src="images/OS15066_14.jpg" alt="phoneline picture 14" class="phoneline">
<img src="images/OS15066_15.jpg" alt="phoneline picture 15" class="phoneline">
<img src="images/OS15066_16.jpg" alt="phoneline picture 16" class="phoneline">
<img src="images/OS15066_17.jpg" alt="phoneline picture 17" class="phoneline">
<img src="images/OS15066_18.jpg" alt="phoneline picture 18" class="phoneline">
<img src="images/OS15066_19.jpg" alt="phoneline picture 19" class="phoneline">
<img src="images/OS15066_20.jpg" alt="phoneline picture 20" class="phoneline">
<p><span class="dropcap">H</span>exnet Communications is one of Europe's leading providers of telecommunications services. Its principal activities include local, national and international telecommunications services, higher-value broadband and Internet products and services, and IT solutions. In the UK, Hexnet serves over 20 million corporate and residential customers with more than 29 million exchange lines, as well as providing network services to other licensed operators.

As an international service provider, Hexnet Communications serves 10,000 customers across Europe, The Americas and Asia Pacific.</p>
<p>Hexnet Communications is one of Europe's leading providers of telecommunications services. Its principal activities include local, national and international telecommunications services, higher-value broadband and Internet products and services, and IT solutions. In the UK, Hexnet serves over 20 million corporate and residential customers with more than 29 million exchange lines, as well as providing network services to other licensed operators.

As an international service provider, Hexnet serves 10,000 customers across Europe, The Americas and Asia Pacific.</p>
<p>Hexnet Communications is one of Europe's leading providers of telecommunications services. Its principal activities include local, national and international telecommunications services, higher-value broadband and Internet products and services, and IT solutions. In the UK, Hexnet serves over 20 million corporate and residential customers with more than 29 million exchange lines, as well as providing network services to other licensed operators.

As an international service provider, Hexnet Communications serves 10,000 customers across Europe, The Americas and Asia Pacific.</p>
</div>
</body>
</html>

Here's the CSS:

#left {
margin: 10px;
width: 200px;
position: absolute;
left: 10px;
top: 164px;
}
#right {
margin-right: 10px;
margin-left: 230px;
border: none;
background-color: #FFFFFF;
top: 164px;
right: 10px;
padding: 5px;
}
#top {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
border: 1px groove #000000;
left: 10px;
top: 10px;
right: 10px;
bottom: 20px;
background-color: #DC241F;
height: 144px;
}
ul#mainnav {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #d6d6d6;
}
ul#mainnav li a:link, ul#mainnav li a:visited {
text-decoration: none;
display: block;
width: 88%;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 6px;
padding-right: 6%;
font-weight: bold;
color: #FFFFFF;
font-size: 10px;
line-height: 1.5em;
background-color: #5c6f90;
padding-bottom: 6px;
padding-left: 6%;
}
ul#mainnav li {
border-top-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #a5b5c6;
border-right-color: #a5b5c6;
border-bottom-color: #a5b5c6;
border-left-color: #a5b5c6;
}
ul#mainnav li a:hover {
color: #eee;
background-color: #43616b;
}
ul#mainnav ul.subnav1 {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul#mainnav ul.subnav1 li {
padding-left: 1.5em;
border-top-width: 0px;
border-top-style: none;
}
ul#mainnav ul.subnav1 li a:link, ul#mainnav ul.subnav1 li a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
line-height: 1.5em;
color: #5c6f90;
background-color: transparent;
padding: 1px;
}
ul#mainnav ul.subnav1 li a:hover {
color: #43616b;
text-decoration: underline;
}
img.phoneline {
clear: left;
float: left;
margin-top: 0px;
margin-right: 0.7em;
margin-bottom: 0px;
margin-left: 0px;
left: 230px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 15px;
}
.dropcap {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #000000;
font-weight: bold;
}

**KLB** · Dec 19, 2003 21:08

Is there a demonstration of what you are trying to accomplish that we could see? Also do you have your code in a live situation where we could see what it is doing?

**moncur** · Dec 20, 2003 05:37

I think the original poster was referring to this:

http://www.meyerweb.com/eric/css/edg...loat/demo.html

**KLB** · Dec 20, 2003 09:40

First this is REALLY COOL anyone not familular with it should check out the page provided by moncur.

In regards jodmcc question, the article did say that there was an issue with this trick on Mac IE 5.x. Since MSFT no longer supports IE on Macs, thus I assume they are not getting any more browser fixes, any Mac user should be switching to Safari, Mozilla, etc. With that said, either we would need screen captures of the problem (for those of us who don't do Mac), or someone with a Mac will have to look at the problem. Not having a live demo of the page does make it problematic to try to solve this problem.

**Paul O'B** · Dec 20, 2003 10:30

Hi John,

I don't have access to a mac so I can't really help with this but I was wondering "does the eric meyer version work on your mac when you visit the actual page"? If it doesn't then it's likely that you're not going to get it to work as I'm sure he would have fixed it.

Theres an alternative method here that might be of some use but I wouldn't be surprised if it doesn't run into the same problems though. See if the page displays on your mac ok first then you may be able to adapt it.

http://www.bigbaer.com/css_tutorials...p.tutorial.htm

Paul

**KLB** · Dec 20, 2003 10:49

Wow, two bookmarks from one thread, what a great day.

One note, I have found that when using a similar trick with DIVs, that bulleted lists get all screwed up with the "float:left" trick for the DIV or IMG. An example is the software I'm seeing advertised at the top of this page. For me the bullets are being displayed on top of the graphic. I have tricks I use that sometimes work to rectify this problem, but they are a little messy.

Somebody was really asleep at the switch when the CSS specification was written for bulleted lists.

**Paul O'B** · Dec 20, 2003 11:07

Hi KLB,

An example is the software I'm seeing advertised at the top of this page. For me the bullets are being displayed on top of the graphic

If I'm not mistaken all you need is this to rectify the problem:

Code:

ul {list-style-position: inside;}

This brings the bullet inside the container and not outside.
It works in situations like this:

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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
img {float:left}
ul {list-style-position: inside;}
</style>
</head>
<body>
<img src="img.gif" width="250" height="333" /> 
<ul>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>
</body>
</html>

Hope that's of some use and glad you liked the other link

Paul

**KLB** · Dec 20, 2003 11:20

I'll give it a try. Thanks.

User Tag List

Thread: Any help on Ragged Float? 3rd Attempt

Thread Tools

Display

Any help on Ragged Float? 3rd Attempt

Bookmarks

Bookmarks

Posting Permissions