SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Location
    NY, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Disappearing Text in IE using 'Clear' and 'Float'

    I have a (I think) bizarre problem; not sure if it is a common bug or if I'm just making a stupid mistake.

    willowcreekbluegrass.com
    In Firefox, the page looks fine; but in IE6, the paragraph next to the image starts to disappear as you scroll down the page. If you select it with the cursor, it comes back, but as soon as you start scrolling it disappears again.
    Here's the xhtml:
    HTML Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>Willow Creek Bluegrass Festival Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="stylesheet" href="/2005/NavigationStyle.css" />
    </head>
    
    
    <body>
    <div id="header">
    <IMG id=willowgif alt="Willow Creek Bluegrass Festival image" src="/Pictures/IMAGES/willow.gif" >
    <br >
    <br >
    <br >
    <div id="navigation">
    	<ul>
    		<li><A href="/index.html">Home</a>
    		<li><A href="/2005/bands.html">Bands</a>
    		<li><A href="/2005/schedule.html">Schedule</a>
    		<li><A href="/2005/tickets.html">Tickets</a>
    		<li><A href="/2005/directions.html">Directions</a>
    		<li><A href="/2005/pictures2004.html">Pictures</a>
    		<li><A href="/2005/contact.html">Contact</a>		
    		<li><A href="/2005/aboutus.html">About Us</a></li>
    	</ul>
    </div>
    <br >
    <br >
    </div>
    <div id="body">
    <h1>6th Annual Willow Creek Bluegrass Festival</h1>
    <p id="intersectionsign">
    <IMG alt="Willow Creek and Bluegrass intersection sign" src ="/Thumbnails/WCSIGNtn.jpg" >
    </p>
    	<p id="underheading1">June 24, 25, &amp; 26, 2005  Thomas Bull Memorial Park</p>
    <h2>About the Festival</h2>
      <p>The annual Willow Creek Bluegrass Festival began in 1999. Conceived and orchestrated by local business owner Jim Lynch, and his wife, Clareen Lynch, the festival was designed to showcase the talents of Hudson Valley bluegrass bands. Year after year, the festival provides family-friendly entertainment for bluegrass fans all over New York. The festival generally runs for one weekend in the summer, beginning on a Friday afternoon and ending on a Sunday afternoon.
    	<A href="/2005/tickets.html">Tickets</a> are are available for separate days, as well as for the entire weekend. Advance tickets are available at a special discounted rate. Families are welcome to camp out at the Thomas Bull Memorial Park for the duration of the festival. <A href="/2005/tickets.html#camping">Camping</a> is $5 per person per night and is available with weekend tickets only. <A href="/2005/contact.html#volunteer">Volunteers</a> for the festival are also welcome. There are also first-aid personnel on call during the festival in case
    	of injuries. For more information on volunteering, contact <A href="mailto:clynch@mw.k12.ny.us">Jim Lynch</a>.</p>
    [B]<p id=meltingmusic>The Melting Mandolin, 2003<img id=mandolin alt="The Melting Mandolin, 2003" title="The Melting Mandolin, 2003" src="/2005/images/meltingmandolintn.jpg"></p>
    <p>Also, each year Jim Lynch, who also owns a local woodworking 
    company, <A href="http://www.execwood.com">Executive Woodworking</A>, creates a replica of a different instrument for the bonfire during Saturday night's performance. So far, the festival has featured the "Burning Banjo," the "Fiery Fiddle," the "Melting Mandolin," and last year's the "Grilled Guitar."&nbsp;Stay tuned&nbsp;to see what instrument will be roasted this year!</p>[/B]
    
    <h2 style="clear: both;">What's New This Year</h2>
      <p>Once again, the festival will be held at Thomas Bull Memorial Park in Montgomery, NY. <A href="/2005/directions.html">Directions</a> to the park are available from Albany, Conneticut, New York City, Pennsylvania, as well as
      from Mapquest. This year we hope to have some new bands joining the growing list 
      of performers. However, this year's festival is still in the planning stages. The <A href="/2005/schedule.html">schedule</a>, 
      as well as an up-to-date <A href="/2005/bands.html">list of performers</a>, will be available as more bands 
      are added.</p>
    <h2>Last Year's Festival: A Success!</h2>
      <p>Last year's festival was a great success, with 13 local bands performing. The weather was quite cooperative, despite the rain on Friday afternoon. There were crafts, as well as many other children's activities, such as face painting and the Crazy Hat contest. Many families took the opportunity to have outdoor picnics while enjoying the music, and either brought their own food or bought food from the many concession stands set up around the campsite. A picture says a thousand words, and the <A href="/2005/pictures2004.html">pictures of last year's festival</a> say it all.</p>
    <p style="FLOAT: right">This site was last modified as of February 23, 2005.</p>
    </div>
    </body>
    </html>
    and here's the css:
    Code:
    #navigation
    {
        BORDER-TOP: #eeeeee 5px inset;
        FONT-SIZE: 1em;
        Z-INDEX: 1;
        MARGIN: 4px 1px;
        WIDTH: 100%;
        BORDER-BOTTOM: #eeeeee 5px outset;
        FONT-FAMILY: Arial, Helvetica, sans-serif;
        BACKGROUND-COLOR: #000066
    }
    #navigation UL
    {
        PADDING-RIGHT: 20px;
        PADDING-LEFT: 20px;
        PADDING-BOTTOM: 10px;
        MARGIN: 0px;
        PADDING-TOP: 10px;
        LIST-STYLE-TYPE: none
    }
    #navigation LI
    {
        PADDING-RIGHT: 5px;
        DISPLAY: inline;
        PADDING-LEFT: 5px;
        PADDING-BOTTOM: 4px;
        MARGIN: 0px;
        PADDING-TOP: 4px
    }
    #navigation A
    {
        BORDER-RIGHT: thin ridge;
        PADDING-RIGHT: 7px;
        BORDER-TOP: thin ridge;
        DISPLAY: inline;
        PADDING-LEFT: 7px;
        PADDING-BOTTOM: 2px;
        MARGIN: 0px;
        BORDER-LEFT: thin ridge;
        COLOR: #ffffff;
        LINE-HEIGHT: 27px;
        PADDING-TOP: 3px;
        BORDER-BOTTOM: thin ridge;
        BACKGROUND-COLOR: #003399;
        FONT-VARIANT: small-caps;
        TEXT-DECORATION: none
    }
    #navigation A:link
    {
        BORDER-RIGHT: thin ridge;
        PADDING-RIGHT: 7px;
        BORDER-TOP: thin ridge;
        DISPLAY: inline;
        PADDING-LEFT: 7px;
        PADDING-BOTTOM: 2px;
        BORDER-LEFT: thin ridge;
        COLOR: #ffffff;
        PADDING-TOP: 3px;
        BORDER-BOTTOM: thin ridge;
        BACKGROUND-COLOR: #003399;
        FONT-VARIANT: small-caps;
        TEXT-DECORATION: none
    }
    #navigation A:visited
    {
        PADDING-RIGHT: 7px;
        DISPLAY: inline;
        PADDING-LEFT: 7px;
        PADDING-BOTTOM: 2px;
        COLOR: #003399;
        PADDING-TOP: 3px;
        BACKGROUND-COLOR: #eeeeee;
        FONT-VARIANT: small-caps;
        TEXT-DECORATION: none
    }
    #navigation A:active
    {
        PADDING-RIGHT: 7px;
        DISPLAY: inline;
        PADDING-LEFT: 7px;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        PADDING-BOTTOM: 2px;
        PADDING-TOP: 3px;
        BACKGROUND-COLOR: #003399;
        FONT-VARIANT: small-caps;
        TEXT-DECORATION: none
    }
    #navigation A:hover
    {
        FONT-WEIGHT: normal;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        COLOR: #000000;
        FONT-STYLE: normal;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
        FONT-VARIANT: small-caps
    }
    #header
    {
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        PADDING-TOP: 0px;
        HEIGHT: 20%
    }
    HTML
    {
        BORDER-RIGHT: thin;
        BORDER-TOP: thin;
        BACKGROUND-ATTACHMENT: fixed;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        BORDER-LEFT: thin;
        BORDER-BOTTOM: thin;
        BACKGROUND-REPEAT: repeat;
        BACKGROUND-COLOR: #ffffff
    }
    BODY
    {
        BORDER-RIGHT: thin;
        BORDER-TOP: thin;
        BACKGROUND-ATTACHMENT: fixed;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        BORDER-LEFT: thin;
        BORDER-BOTTOM: thin;
        BACKGROUND-REPEAT: repeat;
        BACKGROUND-COLOR: #ffffff
    }
    #body
    {
        BORDER-RIGHT: #000000 thin;
        BORDER-TOP: #000000 thin;
        BACKGROUND-IMAGE: url(../Pictures/IMAGES/oldpaper.jpg);
        MARGIN-LEFT: 10px;
        BORDER-LEFT: #000000 thin;
        COLOR: #000000;
        BORDER-BOTTOM: #000000 thin;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif
    }
    #body H1
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    H2
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    H3
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    H4
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    H5
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    H6
    {
        TEXT-TRANSFORM: capitalize;
        COLOR: #000066;
        FONT-STYLE: italic;
        FONT-FAMILY: "Bitstream Vera Serif", "Bookman Old Style", "Trebuchet MS", "Times New Roman", serif
    }
    #body H1
    {
        FONT-STYLE: normal;
        TEXT-ALIGN: center
    }
    #body P {
        PADDING-RIGHT: 30px;
        PADDING-LEFT: 30px;
        FONT-SIZE: 1.7ex;
        COLOR: #000000;
        TEXT-INDENT: 20px;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif
    }
    P {
        TEXT-INDENT: 2.5em
    }
    #body A {
        FONT-WEIGHT: bold;
        COLOR: #000066;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
        TEXT-DECORATION: none
    }
    #body A:link {
        FONT-WEIGHT: bold;
        COLOR: #000066;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
        TEXT-DECORATION: none
    }
    #body A:active {
        FONT-WEIGHT: bold;
        COLOR: #000066;
        FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
        TEXT-DECORATION: none
    }
    #body A:hover {
        COLOR: #990000;
        TEXT-DECORATION: underline
    }
    #body UL.performername {
        MARGIN-LEFT: 10%;
        LIST-STYLE-TYPE: none
    }
    #body UL.performerwebsite {
        MARGIN-RIGHT: 10%;
        LIST-STYLE-TYPE: none
    }
    #underheading1 {
        TEXT-ALIGN: center
    }
    #willowgif {
        FLOAT: left
    }
    LI {
        LIST-STYLE-TYPE: none
    }
    H3 {
        TEXT-INDENT: 15px
    }
    ADDRESS {
        PADDING-LEFT: 50px
    }
    P#lastmodifed {
        FONT-SIZE: 0.9em;
        WIDTH: 100%;
        FONT-FAMILY: Arial, Helvetica, sans-serif
    }
    #intersectionsign {
        PADDING-RIGHT: 0px;
        MARGIN-TOP: 0px;
        PADDING-LEFT: 0px;
        MARGIN-BOTTOM: 0px;
        PADDING-BOTTOM: 0px;
        PADDING-TOP: 0px;
        TEXT-ALIGN: center
    }
    .performername {
        CLEAR: left;
        FLOAT: left
    }
    .performerwebsite {
        CLEAR: right;
        FLOAT: right
    }
    FORM P {
        CLEAR: both;
        WIDTH: 450px
    }
    FORM P INPUT {
        FLOAT: right
    }
    FORM P TEXTAREA FORM P INPUT#formReset {
        FLOAT: right
    }
    FORM #formComments {
        PADDING-RIGHT: 0px;
        FLOAT: right;
        MARGIN-RIGHT: 0px
    }
    FORM P LABEL {
        FLOAT: left
    }
    FORM P INPUT#formSubmit {
        FLOAT: left
    }
    FORM P INPUT#formSubmit {
        MARGIN-TOP: 1em;
        MARGIN-LEFT: 7em
    }
    FORM P INPUT#formReset {
        MARGIN-TOP: 1em;
        MARGIN-RIGHT: 7em
    }
    FORM {
        MARGIN-LEFT: 5em
    }
    LABEL {
        COLOR: #000066
    }
    #bandswrap {
        WIDTH: 100%
    }
    #mandolin {
        float: right;
        height: 125px;
        width: 75px;
        margin-right: 5em;
        margin-left: 1em;
    }
    p#meltingmusic {
       text-align: right;
    }
    What am I screwing up? Any help is greatly appreciated. I haven't really been using CSS very long, but I've read the CSS Anthology and HTML Utopia, but nothing I read mentioned this. Thanks...
    "If it's really a supercomputer, how come the bullets
    don't bounce off when I shoot it ?" The Covert
    Comic.
    Get Firefox!

  2. #2
    I see geek people adris72's Avatar
    Join Date
    Feb 2005
    Location
    NYC
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's the PEKABOO bug, -only in IE of course-.
    Take a look at this:

    http://www.positioniseverything.net/.../peekaboo.html


    I also noticed that when viewed with IE6 (Windows XP) 1024x768 your "ABOUT US" button is broken and the US moves to a second line.

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Location
    NY, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up thanks

    thanks for the tip... after a lot of wrangling with divs i finally fixed it...
    i also fixed the buttons, too... it was because i put it in a list but the list was too long for 1 line.... i took out any links to the current page to make it fit.
    thanks for the help!
    "If it's really a supercomputer, how come the bullets
    don't bounce off when I shoot it ?" The Covert
    Comic.
    Get Firefox!


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
  •