CSS Float Problems

I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:

To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>
<!--<center><h2>Welcome</h2></center>
> <hr/>-->
> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>&copy; Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
>

Similar Messages

  • CSS Float Problem

    Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me.  I have checked everything but can't find the problem.  Thanks in advance;
    example of problem here  http://davidbrown.ipower.com/template/template.htm
    <!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>Our Jewelry Retail Secrets - Thank You</title>
    <link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .H1_black {color: #000000}
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: normal;
    color: #000000;
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    .headlinetxt_colour {color: #FF6600}
    .style1 {color: #ff6600}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="wrapperfix">
        <div id="toporange_bg">login</div>
      </div>
       <div id="wrapperfix_top_grey">
        <div id="top_grey_content_wrapper">
          <div id="big_logo"></div>
          <div id="welcome_user">Welcome "username here"</div>
        </div>
      </div>
      </div>
        <div id="main_content">
          <p>
            <!--main body content goes here -->
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
      </div>
        <div id="footer_container">
          <div id="footer">
            <div id="footer_left">Footer Left</div>
            <div id="footer_centre">Footer Centre</div>
          <div id="footer_right">Footer Right</div></div>
        </div>
    </body>
    </html>
    #footer_container {
    background-color: #333333;
    width: 100%;
    top: 0px;
    margin: 0px;
    padding: 0px;
    #footer {
    background-color: #666666;
    min-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    width: 1000px;
    height: 150px;
    overflow: hidden;
    clear: both;
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    #footer_left {
    float: left;
    width: 33%;
    margin: 0px;
    padding: 0px;
    height: 150px;
    #footer_centre {
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;
    float: left;
    #footer_right {
    float: left;
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;

    I still don't see the #footer_left rule in the CSS in the online example at
    http://davidbrown.ipower.com/template/template.htm

  • Rating Widget: CSS Float question

    I've successfully modified the Rating widget with our own rating graphics (smaller star's) but one issue I cannot figure out is how to get rid of what looks like a margin or padding around the ratingButtons... actually, everything within the ratingContainer itself. Everything works fine, just trying to tweak it's apperance on screen in relationship to other elements above and below the widget.
    In SpryRating.css, the ratingContainer is floated left as well as the ratingButton(s) by default. I didn't change that. I did however change the width and height of the .ratingButton classes to match the new width and heigh of the graphic elements.
    I think this is really more of a CSS/Float issue, but I haven't been smart enough to figure it out over the past few days while trying to research.
    The end result should make the ratingContainer the same height as the ratingButton(s).  I've already tried specific values for the height of the ratingContainer as well as 'auto'.
    Any help would be welcome and appreciated! Thanks!
    -JL

    jasonLampitt wrote:
    Really?
    So, I'm either completely misconstruing your reply (which I admit is possible) but I'm more inclined to take it at face value.
    I am sorry, I fail to see what was ambigious in my reply. I am merely stating the facts and I am sorry that you managed to see otherwise.
    As a contributor to this forum and having no connection to Adobe other than to use their products, I use my spare time to help others with THEIR problems.
    In doing so, we ask that person to assist us so that we can experience the problem first hand which in turn will be indusive to an objective answer.
    In your case we have not been able to reconstruct the problem, thus we have not been able to help. This is of no concern to us, but it does not help you.
    Have a good day!

  • Drop Float Problem

    Can someone help me with a drop float problem I am having in
    the old version of internet explorer? Please see this website:
    http://003a17b.netsolhost.com/kwdwebsite/index.html
    The green navigation bar should be lined up with the green
    bar in the logo (at the top). IE 6.0 is dropping it down lower. Can
    anyone help resolve this issue? Thanks!

    [email protected] posted in macromedia.dreamweaver
    > Can someone help me with a drop float problem I am
    having in the
    > old version of internet explorer? Please see this
    website:
    >
    http://003a17b.netsolhost.com/kwdwebsite/index.html
    > The green navigation bar should be lined up with the
    green bar in
    > the logo (at
    > the top). IE 6.0 is dropping it down lower. Can anyone
    help
    > resolve this issue? Thanks!
    (My IE6 box finally went to pasture, so I'll look into
    installing
    multiple IEs on one of my boxes this week)
    I would concentrate on creating valid code before trying to
    deal with
    cross-browser compatibility. You'll often find that that is
    all it
    takes.
    Enter your URL here:
    http://validator.w3.org
    For instance, you have several redundant, illegal instances
    of
    <link href="css/KWD.css" rel="stylesheet"
    type="text/css">
    inside the body element.
    It looks as if that might be part of a library item? If so,
    take it
    out.
    Reply back if that doesn't do it for you.
    Sidenote:
    Your excessive use of META keywords may be considered Meta
    tag stuffing
    or spamdexing and may not be as useful as you hope. Likewise
    for the
    double META Description where the second seems excessive. No
    links to
    back it up at the moment, but you might want to look into it.
    Mark A. Boyd
    Keep-On-Learnin' :)

  • Is this Cf or CSS causing problem?

    I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
    problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
    You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
    Look at the radio buttons underneath "Step One: Individual Registration"
    I cannot get these suckers to line up in a single line. Here is the code:
    <div class="box2">
    <table>
    <tr>
    <td width="100%">
        Are you a returning Reno Bowls league player?
      </td>
      <td width="50%">
      <strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
      </td>
      <td>
        <strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
      </td>
    </tr>
    </table>
    </div>
    Here is the CSS:
    /*box2*/
    .box2{ background:#e8e8e7; width:100%;}
    .box2 .indent-box-1{ padding:35px 0 0 0; }
    Inherited CSS: (going backwards)
    div.container { overflow:hidden; width: 100%}
    then:
    /*box*/
    .box{ background:#fdfdfd; width:100%;}
    .box .border-top {background:url(images/border_top.gif) repeat-x top;}
    .box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
    .box .border-left {background:url(images/border_left.gif) repeat-y left;}
    .box .border-right {background:url(images/border_right.gif) repeat-y right;}
    .box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
    .box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
    .box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
    .box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
    .box .indent-box{ padding:35px 35px 17px 35px; }
    then:
    /*T-Reg*/
    #tReg { font-size:0.75em; width:100%; text-align:left;}
    #tReg .indent-main{padding:0 67px 0 67px}
    #tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
    #tReg .title h2{ margin-bottom:5px}
    #tReg .img-left{ float:left; margin:0 20px 16px 0}
    #tReg .img-left1{ float:left; margin:0 20px 0 0}
    #tReg .img-indent{ margin:0 0 16px 0}
    #tReg .img-indent1{ margin:0 12px 6px 0}
    #tReg p{ margin:0 0 17px 0}
    #tReg .p{ margin:0}
    #tReg .p1{ margin:0 0 17px 0; width:100%}
    #tReg .p2{ margin:0 0 7px 0}
    #tReg h4{color:#6d6d6d; font-size:1em; }
    #tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
    #tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
    #tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
    #tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
    #tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
    #tReg ul{margin:0; padding:0; list-style:none;}
    #tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
    #tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
    #tReg ul li a:hover { text-decoration:underline; }
    #tReg .indent{padding:28px 0 0 0}
    #tReg .indent-1{padding:0 0 0 128px}
    .txt1{ color:#6d6d6d; font-weight:bold}
    .txt2{ color:#b72723; font-weight:bold}
    finally:
    body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}

    try this:
    <div class="box2">
    <table>
    <tr>
      <td width="100%">
        <table style="width:100%">
          <tr> 
            <td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
            <td><strong>NO</strong></td>
            <td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
            <td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
         </tr>
        </table>
      </td>
    </tr>
    </table>
    </div>

  • CSS Layout problems

    I should start this by saying I am very new to CSS layouts,
    and am self taught, so I'm probably doing something very wrong. So
    far I've stuck to really simple layouts and had no problems...but
    they were very simple layouts.
    With the site I'm doing at the moment I have placed other
    div's inside a content div, so that I can have left and right hand
    content within the content div. But the left and right div's are
    not pushing the content div down with their content, and I'm not
    sure what else to try to get it to work.
    I've tried setting the height of the content div to auto or
    inherit but that doesn't work.
    As you can see on the main page of the site I'm using a
    background image in the content cell.
    http://members.westnet.com.au/zelky/surfschoolnew/index.html
    And if you look at the details page you can see what I am
    trying to describe. The content div not pushing down with the left
    and right content div’s contents means the background image
    is just a few pixels deep under the nav div.
    http://members.westnet.com.au/zelky/surfschoolnew/details.html
    And my pathetic CSS/stylesheet is here:
    http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
    Thanks in advance and hopefully my mess isn’t’ to
    hard to look at. As I said I'm a bit lost so hopefully I'm not
    going to confuse anyone with my "home made" skills.

    When you 'float' elements on your page you effectively remove
    them from
    the normal flow of the document, therfore the 'content'
    <div> thinks
    nothing is inside it. You need to help it by 'clearing' the
    floats.
    There are various methods for clearing floats.
    Insert a 'clearing' <br> (shown below) into your pages
    code directly
    AFTER the closing 'right' container tag and BEFORE the
    closing 'content'
    container tag.
    </div><!-- end 'right' -->
    <br style="clear: both;" />
    </div><!-- end 'content' -->
    zelky wrote:
    > I should start this by saying I am very new to CSS
    layouts, and am self taught,
    > so I'm probably doing something very wrong. So far I've
    stuck to really simple
    > layouts and had no problems...but they were very simple
    layouts.
    >
    > With the site I'm doing at the moment I have placed
    other div's inside a
    > content div, so that I can have left and right hand
    content within the content
    > div. But the left and right div's are not pushing the
    content div down with
    > their content, and I'm not sure what else to try to get
    it to work.
    >
    > I've tried setting the height of the content div to auto
    or inherit but that
    > doesn't work.
    >
    > As you can see on the main page of the site I'm using a
    background image in
    > the content cell.
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/index.html
    >
    > And if you look at the details page you can see what I
    am trying to describe.
    > The content div not pushing down with the left and right
    content div?s contents
    > means the background image is just a few pixels deep
    under the nav div.
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/details.html
    >
    > And my pathetic CSS/stylesheet is here:
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
    >
    > Thanks in advance and hopefully my mess isn?t? to hard
    to look at. As I said
    > I'm a bit lost so hopefully I'm not going to confuse
    anyone with my "home made"
    > skills.
    >
    >

  • Float problems in Dreamweaver CS3

    I am having problems creating a 2-column layout to display my main page content alongside a sidebar containing a simple payment signup form.
    I have set up DIVs for each... no problem. I have applied a left float property to the sidebar, but I can't get the main content to appear to the right of the sidebar - it's still beginning where the sidebar ends.
    Is there something fundamental I am doing wrong?

    The live link is http://www.sharpeacademy.co.uk/summerschoolnew.html
    Code for the page is as follows:
    <!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>Sharpe Academy - Summer School 2009 - Singing, Acting, Dance, Fitness, Stage Combat</title>
    <link href="css/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColFixCtrHdr">
    <div id="containerSummerSchool">
      <div id="header"><img src="images/header.png" alt="Welcome to Sharpe Academy" width="1000" height="200" />
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a> </li>
          <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
              <ul>
                <li><a href="history.html">Brief History</a></li>
                <li><a href="mission.html">Our Mission</a></li>
                <li><a href="venue.html">Venue</a></li>
                <li><a href="staff.html">Staff</a></li>
              </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">CLASSES</a>
              <ul>
                <li><a href="academyactors.html">Acting</a></li>
                <li><a href="starlighters.html">Musical Theatre</a></li>
                <li><a href="fees.html">Fees</a></li>
              </ul>
          </li>
          <li><a href="summerschool.html">SUMMER SCHOOL</a> </li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
      <p> </p>
      <div id="leftSidebar">
        <div id="PayPalContainer">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="PayPal" target="_blank" id="PayPal">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="6106695" />
            <table>
              <tr>
                <td><input type="hidden" name="on0" value="Select which week" />
                  Select which week</td>
              </tr>
              <tr>
                <td><select name="PayPalWeek" id="PayPalWeek">
                    <option value="13th - 17th July - Rotherham">13th - 17th July - Rotherham </option>
                    <option value="20th - 24th July - Rotherham">20th - 24th July - Rotherham </option>
                    <option value="3rd - 7th August - Harrow">3rd - 7th August - Harrow </option>
                  </select>
                </td>
              </tr>
              <tr>
                <td><input type="hidden" name="on1" value="Enter your childs name" />
                  Enter your childs name</td>
              </tr>
              <tr>
                <td><input type="text" name="PayPalName" maxlength="60" id="PayPalName" /></td>
              </tr>
              <tr>
                <td><input type="hidden" name="on2" value="Enter your childs age" />
                  Enter your childs age</td>
              </tr>
              <tr>
                <td><input type="text" name="PayPalAge" maxlength="60" id="PayPalAge" /></td>
              </tr>
            </table>
            <input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online." />
            <img alt="PayPal payment form" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
          </form>
        </div>
      </div>
      <div id="summerSchoolContent">
        <div class="oneColFixCtrHdr" id="textHeader">
          <p><img src="images/summerSchoolType.png" alt="Welcome to Sharpe Academy" width="538" height="40" /> </p>
        </div>
        <h5>When is Summer School?</h5>
        <p> Monday 13th – Friday 17th July – 9am-4pm - Rotherham, South Yorkshire</p>
        <p> Monday 20th – Friday 24th July – 9am-4pm - Rotherham, South Yorkshire</p>
        <p> Monday 3rd – Friday 7th August – 9am-4pm - Harrow, Greater London</p>
        <h5> Who can attend?</h5>
        <p> Anyone aged 6 to 16 who lives in the local area can attend summer school. We are always keen to see new faces. You don’t need any experience in any of the subjects as we will teach from the very beginning.</p>
        <h5>Can my child come to more than one week of Summer School?</h5>
        <p> Children in Rotherham may come to one or both Rotherham weeks as we will be teaching different materials both weeks. We are only doing one week in Harrow this year.</p>
        <h5>Who will be teaching at Summer School 2009?</h5>
        <p> Our teachers come from a variety of backgrounds. Their pictures and names can be seen on the left hand side. We have West-End performers who will be joining us to do workshops in shows including The Lion King, Chitty Chitty Bang Bang, Cats, Fiddler on the Roof, We Will Rock You and Les Miserables. We are also welcoming teachers from some of the most prestigious performing arts colleges in London including Mountview, Guildford School of Acting and Sylvia Young Stage School.</p>
        <h5>Are Teachers CRB Checked?</h5>
        <p> Yes, all teachers who teach at Sharpe Academy are CRB police checked. We also have a first aid trained member of staff on site at all times.</p>
        <h5>How do I book? </h5>
        <p> We have several ways for you to book. You can pay online by debit or credit card by clicking the PAY NOW button above which takes you through to a secure checkout through Paypal. Once payment has been received we will post you out a full registration pack to be completed. Alternatively you may wish to pay by cheque. Please download our booking form leaflet and send this along with your summer school fee to the address on the leaflet.</p>
        <h5>What subjects will children learn?</h5>
        <p> FITNESS  SINGING  MUSICAL THEATRE   ACTING for the Stage </p>
        <p> ACTING for Television &amp; Film  MIME   JAZZ   TAP  BALLET </p>
        <p> STAGE COMBAT  AUDITION TECHNIQUE   END OF WEEK SHOWCASE FOR PARENTS</p>
        <h5> Where is the Rotherham Summer School being held?</h5>
        <p>Rudston Prep School, 59/63 Broom Road, Rotherham, South Yorkshire S60 2SW </p>
        <h5>Where is the Harrow Summer School being held?</h5>
        <p>Harrow High School, Gayton Road, Harrow, Greater London HA1 2JG.</p>
        <h5>How much is Summer School?</h5>
        <p> Online booking: £105.00 per child for the full week – Includes a Summer School t-shirt</p>
        <p> Standard booking: £120.00 per child for the full week.</p>
        <h5> What do the children need to wear?</h5>
        <p> Comfortable clothing must be worn (no jeans). Footwear should be trainers, dance shoes or indoor pumps.</p>
        <p> Summer School T-shirts will be on sale for £10.00, or FREE if you book online.</p>
        <h5> What are the T-shirt Sizes?</h5>
        <div class="tshirtSizes">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="row">Order Size:</th>
              <td>5–6</td>
              <td>7–8</td>
              <td>9–11</td>
              <td>12–13</td>
              <td>14–15</td>
              <td>Adult S</td>
              <td>Adult M</td>
              <td>Adult L</td>
            </tr>
            <tr>
              <th scope="row">Height <span class="plainType">(cm)</span>:</th>
              <td>116</td>
              <td>128</td>
              <td>140</td>
              <td>152</td>
              <td>164</td>
              <td>–</td>
              <td>–</td>
              <td>–</td>
            </tr>
            <tr>
              <th scope="row">Chest <span class="plainType">(inches)</span>:</th>
              <td>26/28</td>
              <td>30</td>
              <td>32</td>
              <td>34</td>
              <td>36</td>
              <td>35/37</td>
              <td>38/40</td>
              <td>41/43</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="push"></div>
    <!-- end #container --></div>
    <div id="footer">
        <div class="oneColFixCtrHdr" id="copyright">
          <p>
            <!-- end #footer -->
          &copy; Copyright Sharpe Academy 2009. All rights reserved. Daniel Sharpe trading as Sharpe Academy.</p>
        </div>
        <div class="oneColFixCtrHdr" id="links">
          <p>|    <a href="summerschool.html">Home</a>   |   <a href="starlighters.html">Musical Theatre</a>   |   <a href="academyactors.html">Acting for Stage &amp; Screen</a><a href="http://www.shapeacademy.co.uk/" target="_blank"></a>   |   <a href="contact.html">Contact Us</a>   |</p>
        </div>
      </div>
    <!-- Start of StatCounter Code -->
    <script type="text/javascript">
    var sc_project=4366318;
    var sc_invisible=1;
    var sc_partition=55;
    var sc_click_stat=1;
    var sc_security="12b1dd37";
    </script>
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
    class="statcounter"><a title="web analytics"
    href="http://www.statcounter.com/" target="_blank"><img
    class="statcounter"
    src="http://c.statcounter.com/4366318/0/12b1dd37/1/"
    alt="web analytics" ></a></div></noscript>
    <!-- End of StatCounter Code -->
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-9304732-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>

  • DW CS3 CSS template problems in EI6

    I'm new to CSS and DW, so I tried starting with DW's new CSS
    layouts. After working on this off and on for about a year, I
    finally got the design to look okay in both FF 2 and IE 7. Wouldn't
    you know my client has IE 6 and the layout breaks in 6. In 6 the
    middle section, including the banner image, float drop down to the
    bottom. If I make the width on #container2 to be 956 pixels instead
    of 950, then 6 lets the middle section float up, but all browsers
    have a background colored gap between the banner images and one or
    more of the sidebar images. I'm ready to pull my hair out!
    Here's the link to the page set to work for IE 7 and FF and
    to break in 6. The entire site, of course, has many more pages but
    this just has the index because I'm experimenting.
    http://www.montanahorsesales.com/shf2/
    and here's the style sheet that has the problem.
    http://www.montanahorsesales.com/shf2/styles/thrColFix.css
    The reason I added the #container2 is to get the cream
    colored background to show in both IE7 and FF. One or the other was
    giving me the dark green background in the main content and the
    other was giving me the cream colored main content background like
    it was supposed to.
    Any suggestions? Is there a quick and easy way to fix this so
    it works in all browsers? Or a hack to fix it for IE 6? I can live
    without it working in any IE before 6, but I need 6 to work.
    In general, it is a mistake to start with DW's included CSS
    layouts? I thought it would be such a smart thing to do but now I'm
    not so sure!

    Cleo3 wrote:
    > Any suggestions? Is there a quick and easy way to fix
    this so it works in all
    > browsers? Or a hack to fix it for IE 6? I can live
    without it working in any
    > IE before 6, but I need 6 to work.
    Hi,
    you could try replacing yours for mine...
    .leftMargin198 {
    margin: 0px;
    padding: 0px;
    height: 175px;
    width: 554px;
    float: left;
    HTH
    chin chin
    Sinclair

  • CSS Display Problems

    Hi everyone, I hope someone can help me out with this
    problem.
    My website displays fine in all the browser that I've tested,
    but I've restenly noticed that areas are rendered wrong in the
    Google Cache snapshot?
    Example:
    My Site:
    www.dcypher.co.uk
    Click
    to view Google Cache Snapshot
    This is the CSS code I have for the 2 column's in the body
    that are displaying incorrectly:
    #main {
    background-image: url(images/mainBackground.gif);
    background-repeat:repeat-y;
    background-color: #666666;
    width: 700px;
    height: 100%;
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow: auto;
    #mainText {
    width: 434px;
    margin: 0px;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    float:left;
    #mainNav {
    width: 156px;
    margin: 0px;
    padding-top: 40px;
    padding-right: 25px;
    padding-bottom: 40px;
    padding-left: 25px;
    float:left;
    I hope someone can shed some light on this for me as i'm
    completely stumped.
    Thanks in advance.
    Webbo

    Yes...the pages from the book display perfectly in dw8, but
    not in DWcs3.
    I found that by commenting out the "clear:left;" under "#nav"
    the page displays properly in DWcs3, too. That leaves open the
    question of "why".
    Thanks.

  • CSS padding problems

    Hi
    I am building a site for a client that has had the page
    designed by a graphic designer and she is being EXCEPTIONALLY picky
    about the font size, spacing and many other things. The problem I
    have is, that on some browsers, the space between the text and the
    border at the top of the container, is double what it is in IE6 and
    IE7. Can anyone tell me how I can fix this so that it has the same
    amount of spacing in all browsers.
    Many thanks
    Julie
    CSS code:
    /* CSS Document */
    /*formatting divs*/
    body a p td th div blockquote ul ol dl{
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color:#999999;
    margin: 0;
    body { margin: 0px; padding: 0px; background:#262425}
    h1 {font-family: Arial, Helvetica, sans-serif;
    font-size:36px}
    a:link {
    text-decoration:underline;
    color: #000000;
    a:visited {color:#666666; text-decoration:underline;}
    a:hover {color:#ff9c04; text-decoration:underline;}
    /*layout divs*/
    #wrapper {width: 820px; position:relative; margin:0 auto;
    top:15%}
    #header {clear:both; height:50px; width:820px}
    #leftcol {
    width: 108px;
    float:left;
    padding-right:12px;
    text-align: right;
    #container {margin:0; padding:0; float:right; width:695px}
    #content {background-color:#FFFFFF; width: 328px; padding: 0
    10px 0 10px; height: 500px; float:left; color: #666666; font-size:
    14px; overflow: hidden;}
    #rightcol {width: 347px; float:right}
    #footer {clear: both}
    #text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
    /*menu*/
    #leftcol ul {}
    #leftcol li {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    list-style:none;
    .logo {
    margin-right: 0px;
    margin-left: 0px;
    padding: 23px 0px 12px 0;}
    /*design elements*/
    .scroll {
    scrollbar-face-color: #ffffff;
    scrollbar-shadow-color: #C2A2DA;
    scrollbar-highlight-color: #C2A2DA ;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color:#ffffff;
    scrollbar-track-color:#FFFFFF;
    scrollbar-arrow-color:#C2A2DA}

    Designing for the web is NOT the same as designing for print.
    Graphic
    designers do not understand that there are too many variables
    you can't
    control such as screen size, browsers, and the default text
    size used by
    visitors. Firefox, Opera & Safari will render pages
    differently than IE. In
    some cases, you can use IE hacks or CSS tricks to get it
    closer to what you
    want. Or you could make one big graphic or image map but I do
    not recommend
    this as it will impact your site's search engine rankings
    & user
    accessibility.
    --Nancy O.
    Alt-Web Design & Publishing
    www.alt-web.com
    "ukjooles" <[email protected]> wrote in
    message
    news:[email protected]...
    > Hi
    >
    > I am building a site for a client that has had the page
    designed by a
    graphic
    > designer and she is being EXCEPTIONALLY picky about the
    font size, spacing
    and
    > many other things. The problem I have is, that on some
    browsers, the
    space
    > between the text and the border at the top of the
    container, is double
    what it
    > is in IE6 and IE7. Can anyone tell me how I can fix this
    so that it has
    the
    > same amount of spacing in all browsers.
    >
    > Many thanks
    > Julie
    >
    > CSS code:
    >
    > /* CSS Document */
    >
    >
    > /*formatting divs*/
    >
    > body a p td th div blockquote ul ol dl{
    > font-family: "Times New Roman", Times, serif;
    > font-size: 14px;
    > color:#999999;
    > margin: 0;
    > }
    >
    > body { margin: 0px; padding: 0px; background:#262425}
    >
    > h1 {font-family: Arial, Helvetica, sans-serif;
    font-size:36px}
    >
    > a:link {
    > text-decoration:underline;
    > color: #000000;
    > }
    > a:visited {color:#666666; text-decoration:underline;}
    >
    > a:hover {color:#ff9c04; text-decoration:underline;}
    >
    >
    > /*layout divs*/
    >
    > #wrapper {width: 820px; position:relative; margin:0
    auto; top:15%}
    >
    > #header {clear:both; height:50px; width:820px}
    >
    > #leftcol {
    > width: 108px;
    > float:left;
    > padding-right:12px;
    > text-align: right;
    > }
    >
    > #container {margin:0; padding:0; float:right;
    width:695px}
    >
    > #content {background-color:#FFFFFF; width: 328px;
    padding: 0 10px 0 10px;
    > height: 500px; float:left; color: #666666; font-size:
    14px; overflow:
    hidden;}
    >
    > #rightcol {width: 347px; float:right}
    >
    > #footer {clear: both}
    >
    > #text {padding: 0 10px 10px 0; height: 370px;
    overflow:auto}
    >
    >
    > /*menu*/
    >
    > #leftcol ul {}
    > #leftcol li {
    > font-family:Verdana, Arial, Helvetica, sans-serif;
    > font-size: 11px;
    > color: #FFFFFF;
    > list-style:none;
    > }
    >
    > .logo {
    > margin-right: 0px;
    > margin-left: 0px;
    > padding: 23px 0px 12px 0;}
    >
    >
    > /*design elements*/
    >
    > .scroll {
    > scrollbar-face-color: #ffffff;
    > scrollbar-shadow-color: #C2A2DA;
    > scrollbar-highlight-color: #C2A2DA ;
    > scrollbar-3dlight-color: #ffffff;
    > scrollbar-darkshadow-color:#ffffff;
    > scrollbar-track-color:#FFFFFF;
    > scrollbar-arrow-color:#C2A2DA}
    >
    >

  • Css aside problem

    i have a little problem in css and i dont know how to fix it...
    html
    <article class="content">
        <h1>header text</h1>
        <aside>
          <p>texto</p>
          <p>alala</p>
          <p>lalala</p>
          <p>alala</p>
          <p>alala</p>
          <p>lalal</p>
          <p>lala</p>
          <p>lala</p>
        </aside>
        <section>
          <p>paragraph text</p>
          <p>another p text</p>
        </section>
      </article>
    yellow background is aside , inside container and next to section
    aside {
    float: left;
    width: 180px;
    background: #EADCAE;
    height: auto;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
    section {
    margin-top:15px;
    margin-bottom:15px;
    width: auto;
    display:block;
    .container {
    width:auto;
    max-width:960px;
    padding: 10px;
    top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    obviously i want the aside next to the section be inside the container.
    i do not use width in pixels bacuse other pages do not have aside and its a liquid container
    so.. i don´t know where im wrong

    Based on what you are asking we do not have enough of the code to solve your problem.  You are saying that the yellow "aside" should be within the grey section.  But the grey section is either not in the "container" class or the container class is also defined somewhere else on your stylesheet with the background which we cannot see.
    There is nothing wrong with the code you have posted.  We are going to have to see more of what's around the "article" to solve this problem.  I'd also recommend running your site through the validator at this point: http://validator.w3.org/

  • Background color and float problems

    Hello all,
    I am having a problem with the background color and the left
    float for a navigation sidebar (also with the background color for
    the footer). The body color is set to gray, and the main page is
    centered with a white background. I set up the pages using mostly
    CSS, with a few tables where they seemed necessary. I set up the
    navigation side bar as a div with a green background and a left
    float. The footer is set up as a div with a green background. All
    text is aligned left.
    When I preview in Safari, everything looks as expected.
    In Firefox and IE5: The background color of the navigation
    sidebar has white showing up behind the type that are not links
    (e.g., mailing address and subheads). The div does not float all
    the way to the left edge of the page. The background color of the
    footer should be green but shows up as white. I validated the code
    in DW, and it reports no problems (at least, it checked out after I
    made a few corrections).
    I am not that concerned about the background color for the
    footer -- it is either all there (in Safari) or not there at all
    (in Firefox and IE). But I would like to see if I can make it show
    up. For the navigation sidebar, would putting it in a table cell
    make it work correctly in Firefox and IE?
    Regarding the left float issue for the nav sidebar IE5: At
    the top of the page, my logo banner (it's placed in a div) shifted
    to the right (in IE only). When I added a left float to the banner,
    the banner lines up fine with the rest of the page, but a white
    margin appears along the left side of the entire page.
    None of my pages are uploaded to a web host yet. This is my
    first website. I am working in DW8 on a Mac.
    Thanks in advance,
    Kathy (Daylilybud)

    Mista,
    Here is my home page based on the template I sent previously.
    Thanks in advance!
    Kathy (Daylilybud)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    <title>Loon Song Gardens: Home Page</title>
    <link href="externalcss/informationcss.css"
    rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a {
    font-weight: bold;
    -->
    </style></head>
    <body>
    <div id="container">
    <div id="banner"><a name="topofpage"
    id="topofpage"></a><img
    src="graphics/thumbnailsheader/lsgheadergraphic_760x110.jpg" alt=""
    width="760" height="110" />
    <div id="heading"><img
    src="graphics/thumbnailsheader/hotcolorstrip760.jpg" alt=""
    width="760" height="76" /></div>
    <div id="navsidebar">
    <p class="navsidebarnormal">Loon Song Gardens,
    LLC<br />
    10910 109th Ave N<br />
    Champlin MN 55316<br />
    763.422.0015</p>
    <ul class="ulnavsidebar">
    <li class="ulnavsidebarli"><a
    href="../donotuse/indextest4.html">Homepage</a></li>
    <li class="ulnavsidebarli"><a
    href="about_loonsonggardens/aboutus.html">About
    Us</a></li>
    <li class="ulnavsidebarli"><a
    href="about_loonsonggardens/our_daylilies/aboutourintroductions.html">Our
    Introductions</a></li>
    <li class="ulnavsidebarli">Seedlings</li>
    <li class="ulnavsidebarli">Photo Gallery</li>
    <li class="ulnavsidebarli"><a
    href="pricelist2008/pricelist2008ab2.html">2008 Price
    List</a></li>
    <li class="ulnavsidebarli"><a
    href="pricelist2008/lsgorderform2008website.pdf">Order Form
    (PDF)</a></li>
    <li class="ulnavsidebarli"><a
    href="about_loonsonggardens/shippingandterms.html">Shipping and
    Terms</a></li>
    <li class="ulnavsidebarli"><a
    href="about_loonsonggardens/visitus.html">Visit
    Us</a></li>
    <li class="ulnavsidebarli"><a
    href="mailto:[email protected]">Email Us
    </a></li>
    </ul>
    <p> <span class="navsubheadbold">ABOUT
    DAYLILIES</span> </p>
    <ul class="ulnavsidebar">
    <li class="ulnavsidebarli"><a
    href="about_daylilies/howtoplant.html"
    class="ulnavsidebarli">How to Plant</a></li>
    <li class="ulnavsidebarli"><a
    href="about_daylilies/growingtips.html"
    class="ulnavsidebarli">Growing Tips</a></li>
    <li class="ulnavsidebarli"><a
    href="about_daylilies/howtodivideadaylily.html"
    class="ulnavsidebarli">How to Divide</a></li>
    <li class="ulnavsidebarli"><a
    href="about_daylilies/moreaboutdaylilies.html"
    class="ulnavsidebarli">More About Daylilies</a></li>
    </ul>
    <p> <span class="navsubheadbold">OTHER
    LINKS</span> </p>
    <ul class="ulnavsidebar">
    <li class="ulnavsidebarli"><a href="
    http://www.daylilies.org"
    class="ulnavsidebarli">American Hemerocallis <br />
    Society (AHS)</a></li>
    <li class="ulnavsidebarli"><a href="
    http://www.daylilies.org/ENews.html"
    class="ulnavsidebarli">AHS Daylily E-News <br />
    (FREE SUBSCRIPTION) </a></li>
    </ul>
    </div>
    <div id ="content">
    <h1>Welcome to Loon Song Gardens! </h1>
    <ul>
    <li class="contentli">We specialize in northern-hardy
    daylilies (<em>Hemerocallis</em>).</li>
    <li class="contentli">Our daylilies are field
    grown.</li>
    <li class="contentli">We offer competitive
    prices.</li>
    <li class="contentli">Loon Song Gardens, LLC, is a
    licensed and inspected nursery.</li>
    <li class="contentli">We are an American Hemerocallis
    Society Display Garden. </li>
    <li class="contentli">Visitors are welcome by
    appointment.</li>
    </ul>
    <p>Loon Song Gardens is a specialty daylily nursery
    and the home of Mike and Kathy Lamb in Champlin, Minnesota, USDA
    hardiness zone 4. We grow over 1,000 named daylily cultivars in a
    wide range of colors, sizes, and forms, from classics to cutting
    edge. If you are looking for northern-hardy daylilies, check with
    us! We will gladly share our growing experiences with you so you
    may have the best possible success.Kathy hybridizes daylilies and
    has introduced four daylily cultivars to date. For details, see
    <a
    href="about_daylilies/about_loonsonggardens/our_daylilies/ourintroductionsmain.html">Our
    Introductions </a> and <a
    href="about_daylilies/about_loonsonggardens/our_daylilies/seedlingsandfutures.html">Seedl ings.</a></p>
    <h2>Are you new to the world of daylilies? </h2>
    <p>Learn more about daylilies! Use the links in the
    left sidebar to find answers to your questions. Check back for
    updates. If you have questions, send us an email, and we will try
    to help.</p>
    <h2>To place your order</h2>
    <p class="contentp">Use our on-line <a
    href="about_daylilies/pricelist2008/pricelist2008v215ab.htm">2008
    Price List </a> to make your selections. We are a small
    nursery and quantities are limited, so it is best to confirm your
    order via email.</p>
    <p class="contentp">To place your order, print the
    <a
    href="about_daylilies/pricelist2008/lsgorderform2008website.pdf">Order
    Form (PDF)</a>, fill it in, enclose payment by check or money
    order (payable to Loon Song Gardens, LLC), and mail to:</p>
    <blockquote>
    <p class="contentp"> Loon Song Gardens<br />
    10910 109th Ave N <br />
    Champlin MN 55316</p>
    </blockquote>
    <p>We ship at least a double-fan size plant unless
    otherwise noted in our listings, we include a bonus for orders of
    at least $35, and we guarantee that our plants are true to
    name.</p>
    <h2>Visit Loon Song Gardens</h2>
    <p>Loon Song Gardens is an official American
    Hemerocallis Society (AHS) Daylily Display Garden, open by
    appointment. If you will be in the Minneapolis area and would like
    to stop by, please contact us to schedule a time. For details,
    click on <a
    href="about_daylilies/about_loonsonggardens/visitloonsonggardens.html">Visit
    Us</a>. </p>
    <h2>Join the American Hemerocallis Society
    (AHS)</h2>
    <p>The AHS website includes lots of great daylily
    information, so be sure to take a look. </p>
    <p>Join AHS today and take advantage of the voucher
    program! New AHS members receive a voucher good for at least $25.00
    toward daylilies from participating vendors (a minimum purchase may
    apply). To join AHS, go directly to <a href="
    http://www.daylilies.org/AHSmemb.html">AHS
    Membership</a>.</p>
    <p>Kathy is currently on the AHS Board of Directors as
    Chair of Publicity and Media Relations. She produces <em>AHS
    Daylily E-News,</em> an e-newsletter free for AHS members and
    non-members alike. To subscribe, click on <a href="
    http://www.daylilies.org/ENews.html">AHS
    Daylily E-News</a>. </p>
    </div>
    <div id="topofpage"><a href="#topofpage">Top of
    Page</a></div>
    </div>
    <div id="footer"><!-- #BeginLibraryItem
    "/Library/footer1.lbi" -->
    <p class="footer">&copy; 2008 Loon Song Gardens,
    LLC. All rights reserved. | Loon Song Gardens, LLC | 10910 109th
    Avenue North | Champlin MN 55316<br />
    <a href="mailto:[email protected]">Email
    us</a>| | 763.422.0015 | Fax 763.422.0131 | This page was
    last updated
    <!-- #BeginDate format:Am1 -->March 30, 2008<!--
    #EndDate -->
    </p>
    <!-- #EndLibraryItem --></div>
    </div>
    </body>
    </html>

  • Annoying CSS align problem.

    Before anything, an image I made to explain:
    I'm just learning CSS pretty much by having a play, then I'll google anything I get stuck with but can't find an answer for this.
    Sorry the code is on another computer so any syntax errors please ignore, I know it's not a syntax problem by the way I just don't know what to do.
    OK, so as you can see where the white text is, thats where I want to type. I could put an AP div in there but know that both bad practice and wont be fluid/liquid.
    I have tried setting the image as a BG, centering it, adding another div and changing the left-margin to the appropriate amt then going down with the space bar but this brings the image down with it.
    I've tried floating an extra div
    I've had extra divs in and out of the div with the background in.
    I've tried changing the Z-index of them both, still same problem.
    I'm sure it's simple to some but can't think what to go with!

    Start with a basic, pre-built  2-col layout.  If you want text superimposed on images, you'll need to put those images in the division's background.
    EXAMPLE - (view page source to see the HTML and CSS code)
    http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Please help with column float problem in IE8

    Hi there,
    Sorry to be so pushy - but I am desperate for help!!
    Having serious problems with my site in some PC's showing Internet Explorer 8. My right column floated right is moving down the page underneath the left column..
    It shows fine on IE8 on my PC - however on my clients PC (vista with IE8) it is showing up as mentioned above. Is there a fix for this.
    Here is my link http://www.dooks.com/pgs/welcome.html
    The css is all there! If you need anything please let me know as I need to get this sorted - I have had serious issues with this site that I have never had before with other sites and am starting to think there is a bug in my software. I redid the index page and this one page (linked above) to see what my problems are - so help with query v appreciated.
    Many thanks,
    Karen

    Lawrence_Cramer wrote:
    A point to keep in mind is that IE8 is still in Beta.
    Not anymore.
    http://www.microsoft.com/Presspass/press/2009/mar09/03-18IE8AvailablePR.mspx
    "REDMOND, Wash. — March 18, 2009 — Today Microsoft Corp. announced the availability of Windows Internet Explorer 8, the new Web browser that offers..."
    Mark A. Boyd
    Keep-On-Learnin' :-)

  • Help with css float layout

    Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right.  Any suggestions?  Here is my CSS.
    Thanks in advance, Matt.
    .banner {
    .line {
       margin-top: 5px;
       margin-bottom: 5px;
       .small_line {
       margin-top: 5px;
       margin-bottom: 5px;
        .long_line {
       margin-top: 50px;
       margin-bottom: 5px;
       margin-left:55px;
       marging-right:55px;
       .footer {
       font-size: small;
       text-align: center;
    .content {
      width: 710px ;
      margin-left: auto ;
      margin-right: auto ;
      background-color:#fff8e8;
      border-style:solid;
      border-width:0px;
      height: 1000px;
    .sub_heading {
    float:right;
    border-style:solid;
    border-width:2px;
    margin-top:20px;
    border-color:#473d33;
    width:530px;
    padding:5px;
    border-color:#ffedc7;
    background-color:#fff2d6;
    .sub_sub_heading {
    float:left;
    border-style:solid;
    border-width:2px;
    margin-top:20px;
    border-color:#473d33;
    width:250px;
    padding:5px;
    border-color:#ffedc7;
    background-color:#fff2d6;
    .text_centre {
    float:right;
    border-style:solid;
    border-width:0px;
    margin-top:5px;
    border-color:#473d33;
    position: relative;
    width:543px;
    background-color:#fff8e8;
    .links {
    border-style:solid;
    border-width:0px;
    margin-top:4px;
    margin-bottom:4px;
    border-color:#473d33;
    background-color:#fff8e8;
    font-size: small;
    text-align:center;
    A:link {text-decoration: none; color: #26221e; }
    A:visited {text-decoration: none; color: #26221e; }
    A:active {text-decoration: none; color: #ffffff; }
    A:hover {text-decoration: underline; color: #ff7d3e; }
    .float_left {
    float:left;
    width: 140px;
    border-style:solid;
    border-width:2px;
    margin-top:20px;
    margin-right:10px;
    margin-bottom:20px;
    padding: 5px;
    border-color:#ffedc7;
    background-color:#fff2d6;
    body {
    font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
    bont-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-color:#fff8e8;
    letter-spacing: 1px;
    color: #4c443c;
    h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
    h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
    h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
    h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
    h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
    h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}

    If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
    h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
    to:
    h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
    everything should be fine.

Maybe you are looking for