SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Any help on Ragged Float? 3rd Attempt

    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;
    }

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    Vermicious Knid moncur's Avatar
    Join Date
    May 2003
    Location
    Salt Lake City, UT
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the original poster was referring to this:

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

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  8. #8
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a try. Thanks.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space


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
  •