Float Drop

I am having a float drop issue in IE6 (at least that's what I
think it is). My page renders fine in Firefox, and IE7, but drops
content in IE6. I have tried the Holly Hack, messed with margins to
get rid of 3-pixel-jog, and applied the float drop fix found on CSS
Advisor (using wrapper). I can't get anything to work. I'm sure
it's something simple I have missed. THANK YOU.
Site:
http://www.newsons.sons-of-liberty-sar.org
CSS:
@charset "utf-8";
body {
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(images/star.gif);
background-repeat: repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%
.NewSOL #container {
width: 880px;
background: #FFFFFF;
margin: auto;
border: 1px solid #000000;
text-align: left;
.NewSOL #sidebar1 {
float: right;
width: 300px;
background: #EBEBEB;
padding: 0;
background-image: url(images/dkBlueBkg.jpg);
background-repeat: repeat;
.NewSOL #sidebar2 {
float: right;
width: 270px;
padding: 0;
margin: 10px 15px 0px 15px;
background-image: url(images/dkBlueBkg.jpg);
background-repeat: repeat;
color: #fdffd1;
.NewSOL #sidebar3 {
float: right;
width: 300px;
background: #EBEBEB;
padding: 0;
.NewSOL #navBar {
margin: 0;
padding: 0;
width: 580px;
.NewSOL #headerBar {
margin: 0 300px 0 0;
padding: 0;
.NewSOL #mainContent {
margin: 50px 325px 0 0;
padding: 0 20px 0 20px;
.fltrt {
float: right;
margin-left: 8px;
.fltlft {
float: left;
margin-right: 8px;
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.NewSOL #wrapper {
width: 880px;
}

Any ideas???
eclipsme wrote:
>
http://www.eclipsme.com/fellsmerecra/facadegrants.php
>
> I am having an issue of float drop on this page in IE6
when text size is
> set to 'largest'. Clicking on the horizontal menu items
(PVII -
> thanks!)shows that none of the other pages exhibit this
problem and this
> page has no extra styling beyond the same style sheets
attached to the
> other pages.
>
> FF does not exhibit this, but it does wrap the
breadcrumbs menu
> differently than IE, dropping the entire <li> to a
new line whereas IE
> breaks the <li> into 2 lines. I don't care about
this, but is it
> significant to the problem?
>
> Thanks,
> Harvey

Similar Messages

  • CSS Float Drop in IE8 but not Compatibility Mode

    I'm testing code for my home page across different browsers, and encountered the common IE float drop problem.  This does not occur in Firefox, Chrome, Opera, or IE8 in Compatibility Mode; but does occur in IE8 standard mode.  It's a bit confusing, since I usually encounter this problem in Compatibility Mode.
    I have tried using clear:none; as I thought the content was clearing the float:left of a large flash image on the left side of the window, but it didn't solve the problem.  I have 3 image buttons whose combined heights equate that of the flash image (all 622px), and these are all in a column div floating to the right.  All of these are flush margin:0 and padding:0, border:none.  The flash image has it's own class stating margin:0, padding:0, border:none as well.  These divs are fixed pixel widths and heights.  I tried placing them in a larger container div with fixed width and height, which didn't solve the problem.  Again, this only occurs in IE8 Compatibility Mode.
    This is the code below:
    div id="container">                  
    embed src="index.swf" allowscriptaccess="always" allowfullscreen="true" height="622" width="509" align="left" class="flashhome"> /embed>                     
    div id="homecontright">           
      a href="services.html?panel=5">           
      img src="button1.gif" align="top" border="0" alt="b1" class="imageright"/> /a>                        
      a href="smt.html">          
       img src="button2.gif" align="top" border="0" alt="b2" class="imageright"/> /a>                       
       a href="jobs.html">          
       img src="button3" align="top" border="0" alt="b3" class="imageright"/> /a>        
    /div>       
      div class="floatfix"> /div>             
       div id="foot" align="center">      
       contact info footer      
       /div>             
       /div>
    Here is the style information from my separate stylesheet
    #homecontright { margin:0; padding:0; border:none; width:493px; height:622px; overflow:visible; float:right; display:block; }
    .imageright {margin-left: auto; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; display: block; float: right }
    .flashhome { width:509px; height:622px; margin:0; padding:0; float:left; border:none; }
    div#container { margin-left:auto; margin-right:auto; margin-bottom:0; width:1002px; background-color:#A8CBE9; }
    div#foot {      background-color:#003366;      border-color:#a8cbe9;      border-width:thin;      border-style:solid;      font-size:10px;      width:996px;      padding:0.2em;      margin-left:auto;     margin-right:auto;      text-align:center;      font-family:Arial, Helvetica, sans-serif;      font-weight:bold;      color:#FFFFFF;      height:10px; }
    .floatfix { clear:both; }
    I've tried removing all the floats, even, especially the ones in the nested divs/class elements; but this didn't do a thing.  This leads me to wonder if this really is a float drop problem or am I missing something?
    EDIT: I fail at posting code so I've removed the front bracket from all tags.  Also, added a diagram to show what it's supposed to look like and what is happening in IE 8 Compatibility.  The margins do not exist, they are there so you can see individual elements

    I tried adjusting the images on the right -10px and had the same result.  Those images were actually created with margins within the image, so everything should be flush.
    I noticed, however, that even in browsers where everything aligns correctly, there seems to be a 2-3px jog between the flash image and the buttons on the right.  That strange link to the bottom right of the flash image is still appearing as well, somehow having to do with the top banner image when right clicked.  I tried changing the URL of that banner and the link changed as well, confirming my suspicion that they're linked.  I attempted to contain that image in a fixed width div with no results.  This link does not appear in other browsers, nor does it appear on any other pages that I used that code on.
    Code for my banner:
    <...a href="index.html"><img src="index/accuweb_c3homebannerR1a.jpg" alt="banner" border="0" class="banner"/><.../a>

  • Need Help With Float Drop

    Hi,
    I'm working with a template with a fixed left sidebar and a
    liquid right main content area. I'm getting float drop with the
    main content area and I'm stumped as to how to fix it. I've never
    had this problem before with the same template. The temporary URL
    is www.allearsdogs.com. Any suggestions would be much appreciated!
    And Merry Christmas!
    Mychelle

    "Nikitadog31" <[email protected]> wrote in
    message
    news:gj0ta6$e6e$[email protected]..
    > Hi,
    > I'm working with a template with a fixed left sidebar
    and a liquid right
    > main
    > content area. I'm getting float drop with the main
    content area and I'm
    > stumped
    > as to how to fix it. I've never had this problem before
    with the same
    > template.
    > The temporary URL is www.allearsdogs.com. Any
    suggestions would be much
    > appreciated!
    Replace this:
    .twoColHybLtHdr #mainContent {
    float:left;
    margin:1px 10px 0px 2em;
    padding:10px 30px 10px 5px;
    width:70%;
    Witht his:
    .twoColHybLtHdr #mainContent {
    overflow:hidden;
    zoom:1;
    padding:10px 30px 10px 5px;
    The key is to keep things simple. No float, no width, no
    margin are needed
    here.
    overflow and zoom is all you need to make this layout behave
    the way you
    want.
    Thierry | Adobe Community Expert | Articles and Tutorials ::
    http://www.TJKDesign.com/go/?0
    Spry Widgets |
    http://labs.adobe.com/technologies/spry/samples/
    [click on
    "Widgets"]
    Spry Menu Bar samples |
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

  • Float Drop Problem

    I'm having a float drop issue with my layout. I've read
    several articles on this but can't figure it out, because my layout
    isn't just 3 columns.
    Here's the problem:
    *I have a <div> for my logo, floated left, then I have
    a <div> for a banner heading floated right.
    *I then have a top horizontal navbar, also a <div>, no
    floating.
    *below this I have my three columns (side bar-float left,
    contents-float left and right bar-float right).
    The problem is that Dreamweaver is showing a float drop error
    on the navbar div.
    I just don't know what to do to fix this and I've spent
    several days trying to figure it out. I'm using IE6 which is where
    the problem is supposed to occur, but the page displays correctly,
    so I can't actually see the error.
    My web site is not up so I can't provide a link but here is
    some of the code.
    CSS:
    #wrap {
    background: #999966;
    color: #303030;
    margin: 0 auto;
    width: 780px;
    #banner_logo {
    float: left;
    width: 190px;
    height: 100px;
    background-color: #cccc99;
    padding: 10px;
    border-bottom: 3px solid #FFFFFF;
    #banner_text {
    width: 550px;
    float: right;
    height: 100px;
    background-color: #cccc99;
    padding: 10px;
    border-bottom: 3px solid #FFFFFF;
    * html #navbar {
    height: 1px;
    #navbar {
    width: 758px;
    color: #FFFFFF;
    text-decoration: none;
    #navbar ul {
    margin: 5px 0px 5px 5px;
    padding: 0px;
    text-align: center;
    #navbar li {
    list-style-type: none;
    font-size: 8pt;
    padding-right: 50px;
    display: inline;
    HTML:
    <body>
    <div id="wrap">
    <div id="banner_logo"><img
    src="../Images/logo_smaller2.png" alt="logo" width="174"
    height="100" /></div>
    <div id="banner_text">
    <h1 align="center">Attic 2 Basement Home
    Inspections</h1>
    <h2 align="center">905-286-9586</h2>
    <div align="center"><span class="sub_head">Each
    home inspection is performed as if it were our
    own!</span><br />
    <span class="sub_head">Your peace of mind is our
    goal.</span></div>
    </div>
    <div id="navbar"> - HERE'S WHERE THE FLOAT DROP ERROR
    SHOWS UP-
    <ul>
    <li><a
    href="../index.html">Home</a></li>
    <li><a href="../about_us.html">About
    Us</a></li>
    <li><a
    href="../buying_selling.html">Services</a></li>
    <li><a href="../Contact_us.html">Contact
    Us</a></li>
    </ul>
    </div>
    <!-- TemplateBeginEditable name="SideNavBar" -->
    <div id="avmenu">
    <ul>
    <li><a href="#">LINK </a></li>
    </ul>
    </div>
    <!-- TemplateEndEditable --><!--
    TemplateBeginEditable name="SideBar" -->
    <div id="right_side_bar">
    <h3>Book Your Inspection</h3>
    </div>
    <!-- TemplateEndEditable --><!--
    TemplateBeginEditable name="MainContent" -->
    <div id="content">
    <h2>Page Heading Here</h2>
    <p>Content here</p>
    </div>
    </div>
    </body>
    I would appreciate any direction offered!
    Thanks so much,
    Deb

    I'm having a float drop issue with my layout. I've read
    several articles on this but can't figure it out, because my layout
    isn't just 3 columns.
    Here's the problem:
    *I have a <div> for my logo, floated left, then I have
    a <div> for a banner heading floated right.
    *I then have a top horizontal navbar, also a <div>, no
    floating.
    *below this I have my three columns (side bar-float left,
    contents-float left and right bar-float right).
    The problem is that Dreamweaver is showing a float drop error
    on the navbar div.
    I just don't know what to do to fix this and I've spent
    several days trying to figure it out. I'm using IE6 which is where
    the problem is supposed to occur, but the page displays correctly,
    so I can't actually see the error.
    My web site is not up so I can't provide a link but here is
    some of the code.
    CSS:
    #wrap {
    background: #999966;
    color: #303030;
    margin: 0 auto;
    width: 780px;
    #banner_logo {
    float: left;
    width: 190px;
    height: 100px;
    background-color: #cccc99;
    padding: 10px;
    border-bottom: 3px solid #FFFFFF;
    #banner_text {
    width: 550px;
    float: right;
    height: 100px;
    background-color: #cccc99;
    padding: 10px;
    border-bottom: 3px solid #FFFFFF;
    * html #navbar {
    height: 1px;
    #navbar {
    width: 758px;
    color: #FFFFFF;
    text-decoration: none;
    #navbar ul {
    margin: 5px 0px 5px 5px;
    padding: 0px;
    text-align: center;
    #navbar li {
    list-style-type: none;
    font-size: 8pt;
    padding-right: 50px;
    display: inline;
    HTML:
    <body>
    <div id="wrap">
    <div id="banner_logo"><img
    src="../Images/logo_smaller2.png" alt="logo" width="174"
    height="100" /></div>
    <div id="banner_text">
    <h1 align="center">Attic 2 Basement Home
    Inspections</h1>
    <h2 align="center">905-286-9586</h2>
    <div align="center"><span class="sub_head">Each
    home inspection is performed as if it were our
    own!</span><br />
    <span class="sub_head">Your peace of mind is our
    goal.</span></div>
    </div>
    <div id="navbar"> - HERE'S WHERE THE FLOAT DROP ERROR
    SHOWS UP-
    <ul>
    <li><a
    href="../index.html">Home</a></li>
    <li><a href="../about_us.html">About
    Us</a></li>
    <li><a
    href="../buying_selling.html">Services</a></li>
    <li><a href="../Contact_us.html">Contact
    Us</a></li>
    </ul>
    </div>
    <!-- TemplateBeginEditable name="SideNavBar" -->
    <div id="avmenu">
    <ul>
    <li><a href="#">LINK </a></li>
    </ul>
    </div>
    <!-- TemplateEndEditable --><!--
    TemplateBeginEditable name="SideBar" -->
    <div id="right_side_bar">
    <h3>Book Your Inspection</h3>
    </div>
    <!-- TemplateEndEditable --><!--
    TemplateBeginEditable name="MainContent" -->
    <div id="content">
    <h2>Page Heading Here</h2>
    <p>Content here</p>
    </div>
    </div>
    </body>
    I would appreciate any direction offered!
    Thanks so much,
    Deb

  • Yes, it's IE float drop again

    I have read the messages here until my head is spinning. I
    cannot detect
    an underlying principle that one can refer to when trying to
    prevent
    this from happening in every case--it seems so situation
    dependent. Or
    what I have read is over my head.
    I'm getting it at all of the pages of this site:
    http://www.eastbranch.net/process.html
    Al of the pages use the same underlying structure, so I'm
    hoping that if
    I fix it for one I can fix it for all.
    It doesn't happen in any Macintosh browser. If the page is
    too wide--and
    it almost always is--I get a horizontal scrollbar. I know.
    Client
    insists. He doesn't mind the horizontal scrolbar for people
    who don't
    use huge windows like he does, but I think the float drop is
    a more
    serious problem and I need to fix it.
    Can someone point me to a resource, ideally titled
    "Preventing IE float
    drop--every time--for dummies."
    James M Shook

    "James Shook" <[email protected]> wrote in message
    news:gl35os$hca$[email protected]..
    > Thierry wrote:
    >
    >> It is the content of #rightWrapper that makes that
    container drop,
    >> because it - wrongly - increases its width.
    >> The easy fix is to prevent such thing is to use the
    following:
    >>
    >> #rightWrapper {overflow-x:hidden;}
    >
    > OK, that sort of works, but it cuts off the content on
    the right. Do I
    > have to size rightWrapper to the size of the widest
    content it will
    > contain?
    Sorry James,
    I didn't look at it very well. Actually, I didn't even check
    in FF, that's
    why I was suggesting to use "overflow-x" ;-).
    It turns out that indeed there are maths errors.
    An easy way to find out about this kind of issue is to open
    firebug and to
    click on the "layout" tab.
    There you can see that:
    - #pageWrapper width is: 915px
    - #leftWrapper width is: 70 + 478 + 15 (563px)
    - #rightWrapper width is: 463px
    So to avoid a float drop you would have to set the width of
    #pageWrapper to
    be at least 1026px
    To contain everything within 915px you need to reduce by a
    total of 111px
    the inner containers (width or padding will do).
    As a side note I would *remove* the table you're using for
    the thumbnails as
    these are easily styled without the need of so much markup
    (which also allow
    for more flexibility - showing them on 3 columns instead of 4
    for example).
    Thierry | Adobe Community Expert | Articles and Tutorials ::
    http://www.TJKDesign.com/go/?0
    Spry Widgets |
    http://labs.adobe.com/technologies/spry/samples/
    [click on
    "Widgets"]
    Spry Menu Bar samples |
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

  • DWCS3 Float Drop Problem?

    My site passed the Browser compatibility check in DWCS3, however, after launching site online and viewing it on a IE6 PC computer, the home page does not display correctly: the center section drops down. I checked for a potential float drop problem by adding up my widths including margins and padding: Sidebar left is 170 px, main content area is 370 px (this is the area that drops), sidebar right is 180 px = 720 px. The container is 780 width so I don't understand why the center doesn't fit but drops down because there seems to be 60 px left in the overall width to provide plenty of room. The main content area doesn't have a width specified, just a left and right margins (left set at 170 and right set at 180). I didn't try a conditional comment because I am not that familiar with coding. Any suggestions would be helpful. Also, don't understand why this wasn't flagged in the DWCS3 Browser compatibility check when it scanned for IE6. The address is http://www.eastontroop66.org and it's the home page. Thank you!

    My site passed the Browser compatibility check in DWCS3, however, after launching site online and viewing it on a IE6 PC computer, the home page does not display correctly: the center section drops down. I checked for a potential float drop problem by adding up my widths including margins and padding: Sidebar left is 170 px, main content area is 370 px (this is the area that drops), sidebar right is 180 px = 720 px. The container is 780 width so I don't understand why the center doesn't fit but drops down because there seems to be 60 px left in the overall width to provide plenty of room. The main content area doesn't have a width specified, just a left and right margins (left set at 170 and right set at 180). I didn't try a conditional comment because I am not that familiar with coding. Any suggestions would be helpful. Also, don't understand why this wasn't flagged in the DWCS3 Browser compatibility check when it scanned for IE6. The address is http://www.eastontroop66.org and it's the home page. Thank you!

  • IE7 Float drop frustration

    > This message is in MIME format. Since your mail reader
    does not understand
    this format, some or all of this message may not be legible.
    --B_3318594685_1003681
    Content-type: text/plain;
    charset="ISO-8859-1"
    Content-transfer-encoding: 8bit
    Hi all
    I've just put a website live at www.burrbaxter.co.uk and it
    looks fine in
    all browsers except IE7 under XP where it exhibits the Float
    Drop bug. It
    drops the nav bar down into the title below it.
    Can anyone help me correct this as I¹ve followed the
    Three Pixel Text Jog
    and making the container DIV wide enough both to no avail.
    I¹m stumped here.
    Is there anything else I can try or correct?
    Cheers
    Garry
    --B_3318594685_1003681
    Content-type: text/html;
    charset="ISO-8859-1"
    Content-transfer-encoding: quoted-printable
    <HTML>
    <HEAD>
    <TITLE>IE7 Float drop frustration</TITLE>
    </HEAD>
    <BODY>
    <FONT FACE=3D"Calibri, Verdana, Helvetica,
    Arial"><SPAN STYLE=3D'font-size:11pt=
    '>Hi all<BR>
    I've just put a website live at www.burrbaxter.co.uk and it
    looks fine in a=
    ll browsers except IE7 under XP where it exhibits the Float
    Drop bug. It dro=
    ps the nav bar down into the title below it.<BR>
    <BR>
    Can anyone help me correct this as I&#8217;ve followed
    the Three Pixel Text=
    Jog and making the container DIV wide enough both to no
    avail. I&#8217;m st=
    umped here. Is there anything else I can try or
    correct?<BR>
    <BR>
    Cheers<BR>
    Garry</SPAN></FONT>
    </BODY>
    </HTML>
    --B_3318594685_1003681--

    Much appreciated Joe, I'll look to cleaning it up and
    streamlining it as you
    mentioned.
    On 27/02/2009 4:39 pm, in article
    [email protected], "Joe
    Makowiec"
    <[email protected]> wrote:
    > On 27 Feb 2009 in macromedia.dreamweaver, Garry Bradley
    wrote:
    >
    >> I've just put a website live at www.burrbaxter.co.uk
    and it looks
    >> fine in all browsers except IE7 under XP where it
    exhibits the Float
    >> Drop bug. It drops the nav bar down into the title
    below it.
    >>
    >> Can anyone help me correct this as Iûve
    followed the Three Pixel
    >> Text Jog and making the container DIV wide enough
    both to no avail.
    >> Iûm stumped here. Is there anything else I can
    try or correct?
    >
    > Nice look. Looking at the code: you seem to be suffering
    from
    > div-itis (the proliferation of <div>s because you
    can). And there are
    > a lot of validation errors:
    >
    >
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.burrbaxter.co.uk%
    > 2F
    >
    > (BTW, no float drop in IE6, but the header breaks up
    into multiple lines.)
    >
    > Try a simpler structure, like this:
    >
    > <style type="text/css">
    > #outerWrapper {
    > background-color: #fff;
    > margin: 0 auto 0 auto; /* Sets the margin properties for
    an element using
    > shorthand notation (top, right, bottom, left) */
    > text-align: left; /* Redefines the text alignment
    defined by the body element.
    > */
    > width: 978px;
    > }
    > #header {
    > height : 177px ;
    > }
    > #leftColumn {
    > float : left ;
    > width : 340px ;
    > }
    > #rightColumn {
    > float : left ;
    > padding : 10px ;
    > }
    > #footer {
    > clear : both ;
    > }
    > </style>
    >
    > <body>
    > <div id="outerWrapper">
    > <div id="header">
    > <h1>Header goes here</h1>
    > </div>
    > <div id="bodyWrapper">
    > <div id="leftColumn">
    > <h2>Left Column</h2>
    > </div>
    > <div id="rightColumn">
    > <h2>Right Column</h2>
    > </div>
    > </div>
    > <div id="footer">Footer</div>
    > </div>
    > </body>
    >
    > Some offhand suggestions:
    > - Put all your header images into a single image
    > -- You may also want to add the address on top of the
    page into the
    > graphic - it will prevent those resizing text from
    breaking the
    > layout.
    > - Put your top navigation into an ordered list, and use
    text. Project
    > Seven has some good tutorials on how to do this:
    >
    http://projectseven.com/tutorials/navigation/index.htm
    > - Externalize your javascript and CSS. There are several
    reasons:
    > -- It makes your page code cleaner and much more
    readable, making it
    > easier to edit and troubleshoot after the fact.
    > -- Browsers cache external CSS and JS files, so the
    first page will
    > take whatever time to download; however, subsequent
    pages which use
    > the same files will load that much quicker.
    >
    > In the 'you didn't ask, but...' department:
    > - Lose the clock. It takes up a lot of bandwidth with
    its javascript,
    > and adds no functionality that I don't already have
    available. (At
    > the moment, wall clock, wristwatch and computer clock;
    the one on
    > the website is more than redundant.)
    > - The history of the building is interesting; however,
    it could use
    > some cleaning up.

  • How to fix my float drop?

    I have a page with 2 sidebars and a maincontent.  Sidebar widths & padding plua maincontent margins, padding, border, add up to 546 pixels less than container.  I have a 495 pixel width JPG in the maincontent, and it drops ONLY in MS Explorer, all versions.  Fine in Chrome, Firefox, Safari, Netscape.  If anyone can tell me what to look for, I would be most grateful!
    Also, on other pages, I have some JPG files in a sidebar.  They show up fine in all the browsers I've tested except Explorer, which just has a line across the sidebar. 
    Thanks for any help - I feel as if I'm fighting my way out of a paper bag!

    Suggest you first validate the code
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sainttims.com%2F&charset=%28detect+auto matically%29&doctype=Inline&group=0
    The Float drop issue on the News page could also be related to invalid code
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sainttims.com%2Fnews.php&charset=%28det ect+automatically%29&doctype=Inline&group=0
    Fix lots of similar odd code like
    <p span class="BlueType">
    which should read
    <p><span class="BlueType">\
    The code for the sidebar photos reads
    <img src="images/photos/2012DOKSpringAssembly/Bishop-Susan-Boat.jpg" align="center" width="190" height="" />
    where height="", IE seems to rendering them at a height of 0px (i.e. invisible).

  • How do I fix my floating drop down navigational menu?

    Hello, I am currently reworking my website to make it responsive, but I have hit a roadblock with my navigation menu:
    My goal for the menu is to have a floating navigational menu in which as the user hovers over the link the image changes. One of the tabs is intended to be a submenu that drops down horizontally. I also am trying to get the menu centered on the page using fluid positioning.
    As of now, I have a functional drop down menu with the rollover effects. It wasn't until I began work on floating the menu that I ran into a problem. At first, the menu was not scaling proportioally with the rest of the page, but upon looking around, I found: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browse r-support.
    Using the code on the link, I recoding the menu. In the end, the drop down menu is causing the problem. When I have the drop down menu still included in the code, the menu is broken up in three lines. The submenu is grouped with its parent, but they are grouped boxy (at least in the browsers I have checked) and only two are visible.
    I decided to humor myself and removed the code for the drop down menu to find that the menu works perfectly--it does everything I was aiming for for the time being--rollover, center, floating.
    Is there something that I am overlooking that will fix the drop down menu?
    I was thinking that I would have to center the styles for the sub menu, but I didn't see any results.
    What am I missing that I am not seeing?
    The links to the two pages:
    http://ryanolsenstudios.com/WithDropDown.html
    http://ryanolsenstudios.com/WithoutDropDown.html
    If anyone can point me in the right direction it would be appreciated, I have been looking around trying to figure this out, but to no avail. Thank you.

    I don't advise you use images for navigation as they are NOT scalable to any good effect.
    Below is a simplified version of your image buttons with dropdowns in place.
    The jQuery used to create the rollover swaps is going to get very long and unmanagable (it's just as an example) I suspect there will be more streamlined solutions using jQuery if you Google, like just adding _static.jpg and_over.jpg to the end of the image src, which will keep the code to a minimum of lines.
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"><title>Ryan Olsen's Studio</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#home img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/hometabroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/home.jpg");
    $("#about img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/bioroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/bio.jpg");
    $("#shows img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/showsroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/shows.jpg");
    </script>
    <style>
    body {
        background-color: #000;
    .myMenu {
    margin:0;
    padding:0;
    display: block;
    text-align: center;
    .myMenu li {
    margin: 0;
    padding: 0;
    list-style:none;
    display: inline-block;
    position: relative;
    .myMenu ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;
    left: 0;
    top: 5em;
    z-index: 100;
    .myMenu li:hover ul {
    display: block;
    </style>
    </head>
    <body>
    <!--Navi Menu-->
    <ul class="myMenu">
    <li><a href="#" id="home"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    <li><a href="#" id="about"><img src="http://ryanolsenstudios.com/images/bio.jpg" alt="AboutMeTab" /></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    <li><a href="#" id="shows"><img src="http://ryanolsenstudios.com/images/shows.jpg" alt="ShowsTab" /></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

  • Float Drop CSS help needed, i'm loosing my mind.

    here is an example ...
    http://www.wiatrc.org/wiatrc/vendor/test.html
    i know my code is a mess, i've searched the board, but have
    succeeded in confusing myself even more.
    i did the 'float left' and even took out one of my columns to
    try to make it fit.
    it seemed to work over here
    http://www.wiatrc.org/wiatrc/vendors.html
    any help would be appreciated.
    dave h

    try messing with the padding and or margins setting them to
    zero in your CSS. I tmight be helpful to post your html and css
    code to get help more easily. There are lots of issues with
    relapsing margins, default padding differences between browsers .
    and some buggy stuff within IE.
    Take a look at this page, there are some good posts on best
    practices for preventing padding/ margin issues
    CSS Margin and Padding
    issues across browsers

  • Some form of float drop?

    Please check my site:
    http://www.bodymindawakening.com/index3.html
    I have applied the line: <br class="clearfloat"/> to
    various places with no luck. I've also played with widths and
    padding and margins. Nothing seems to work. It looks fine in DWCS3
    workspace. My browser is IE7.
    Can anyone tell why this is happening and how to fix it?
    Thank you

    Since I'm not understanding where I should place the css,
    this is my current css file (any suggested changes to accomplish my
    task?):
    @charset "utf-8";
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0; /* it's good practice to zero the margin and
    padding of the body element to account for differing browser
    defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5*
    browsers. The text is then set to the left aligned default in the
    #container selector */
    color: #000000;
    background-color: #000000;
    .thrColFixHdr #container {
    width: 890px; /* the auto margins (in conjunction with a
    width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center
    on the body element. */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #000000;
    .thrColFixHdr #header {
    background-color: #000000;
    margin-top: 10px;
    .thrColFixHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the
    #header div will avoid margin collapse - an unexplainable space
    between divs. If the div has a border around it, this is not
    necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will
    allow you to keep the element away from the edges of the div */
    .thrColFixHdr #sidebar1 {
    width: 180px; /* padding keeps the content of the div away
    from the edges */
    background-color: #000000;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    float: left;
    .thrColFixHdr #sidebar2 {
    float: right; /* since this element is floated, a width must
    be given */
    width: 160px; /* padding keeps the content of the div away
    from the edges */
    background-color: #000000;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    .thrColFixHdr #mainContent {
    width: 475px;
    margin-top: 0;
    margin-right: 200px;
    margin-bottom: 0;
    margin-left: 200px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #000000;
    padding-right: 10px;
    padding-left: 10px;
    .thrColFixHdr #footer {
    padding: 0 10px 0 20px;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    .thrColFixHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in
    the footer will avoid the possibility of margin collapse - a space
    between divs */
    padding: 10px 0; /* padding on this element will create
    space, just as the the margin would have, without the margin
    collapse issue */
    .fltrt { /* this class can be used to float an element right
    in your page. The floated element must precede the element it
    should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left
    in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or
    break element and should be the final element before the close of a
    container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

  • Help! Expand Box, Doubled Float Margin Bug & Float Drop Problem

    Hi,
    My website has a title problem in line 159, 161 and 164, and I couldn't fiugre out why since my design view is TOTALL messed up in dreamweaver. However, by using google chrome broswer, webpage is still displaying fine, but not IE or firefox.. I was wondering if someone can help me take a look and give me some feedback how to fix the issue....thank you very much,
    http://www.akuiskitchen.com/

    Thank you, all errors have been fixed from w3 validation site, but I still have browser compability problem..
    Ken, do you mean removing all below underline portion under demostyle.css?
    <!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>Unable to load page</title>
    <style type="text/css">
    #container {
              width: 50%;
              margin: 3em auto;
              font-family: Verdana, Geneva, sans-serif;
    #dwicon {
              float: left;
              margin-right: 2em;
    #error {
              padding-top: .5em;
    #desc {
    </style>
    </head>
    <body>
    <div id="container"> <img id="dwicon" src="dw://configuration/Shared/ICE/Images/warning_icon.gif" width="32" height="32" alt="Warning" />
      <h3 id="error">Server Not Found</h3>
      <p id="desc">The page "http://localhost/resources/demos/style.css" was not loaded because Dreamweaver could not find the server "localhost". Please make sure you are connected to the internet and the server name is correct.</p>
    </div>
    </body>
    </html>

  • Float drop when I switch column order

    I would like my main content column to load before columns 3
    and 4, which have external content that is sometimes slow to load
    (Flickr, Twitter, Furl).
    http://www.patiastephens.com/new/
    But when I move the main content column above columns 3 and 4
    in the source code, columns 3 and 4 drop below the main column.
    It's very frustrating! Any ideas?
    Thanks.

    Still really need help with this.
    Is there anything I can do to make my question more
    understandable, like pasting code here?

  • Need help with IE6 box drop problem DW CS4

    Having a problem with this page: http://www.recoverings.com/tarzan.html in IE6. Maincontent drops below the sidebar menu. Looks fine in FF, Safari, IE7.
    All other pages work well. I assume that this has something to do with the width of the .wrapnail and .thumbnail divs, but reducing the margins doesn't seem to help and the images start to get too close together. What am I missing here?
    Can someone help me solve this?
    I would also appreciate any suggestions on cleaning up my CSS. Seems like I have an awful lot of stuff in there. Maybe it's okay but could it be cleaner?
    Thanks for your help,
    Phil

    IE bug Float Drop is fairly common.  Make sure your page wrapper division is wider than the combined width of left sidebar + main content + left & right borders if any.  If that doesn't help, add an overflow: hidden rule to your floated container and make sure you have cleared both floats.
    More about float drop and the expanding box problem can be found here:
    http://www.positioniseverything.net/explorer/expandingboxbug.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • IE float bug

    A container div that is 500px wide. Two "column" div 250px
    wide. Float the left column (float left), and put a left margin on
    the right column of 250. If you look at this in Firefox (pc or mac)
    or Safari, it all looks good, two columns inside a container. If
    you look at it in IE, it doesn't work. Does anyone know a fix for
    this? Or, if I'm doing something wrong, any ideas what I'm doing
    wrong. I'll attach code.
    Any help would be much appreciated.
    (I accidentally posted this in the dynamic HTML forum, so I
    apologize for the double posting.)
    BTW, there is a similar issue which display: inline will fix,
    I left that in there to show that it doesn't help on this
    particular problem.

    See if the following is what you want. I used ids instead of
    classes
    though.
    Oh yes, if you decide to give any padding, borders or margins
    to any of the
    divs, you will need to reconsider your width values, so that
    you don't
    encounter float drop.
    <!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>Untitled Document</title>
    <style type="text/css">
    <!--
    #container {
    background-color: #CCCCCC;
    height: 500px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    #left {
    background-color: #003399;
    height: 250px;
    width: 250px;
    float: left;
    /* display: inline;*/
    #right {
    background-color: #999933;
    height: 250px;
    width: 250px;
    float: left;
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left"></div>
    <div id="right"></div>
    </div>
    </body>
    </html>
    PS - You may find this article useful also, because once you
    start floating
    divs, you will have to use clearer divs.......
    http://www.complexspiral.com/publications/containing-floats/
    http://www.positioniseverything.net/easyclearing.html
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    Customisation Service Available:
    http://www.csstemplates.com.au
    CSS Tutorials for Dreamweaver
    http://www.adobe.com/devnet/dreamweaver/css.html
    "-pk-" <[email protected]> wrote in message
    news:[email protected]...
    >A container div that is 500px wide. Two "column" div
    250px wide. Float the
    >left
    > column (float left), and put a left margin on the right
    column of 250. If
    > you
    > look at this in Firefox (pc or mac) or Safari, it all
    looks good, two
    > columns
    > inside a container. If you look at it in IE, it doesn't
    work. Does anyone
    > know
    > a fix for this? Or, if I'm doing something wrong, any
    ideas what I'm doing
    > wrong. I'll attach code.
    >
    > Any help would be much appreciated.
    >
    > (I accidentally posted this in the dynamic HTML forum,
    so I apologize for
    > the
    > double posting.)
    >
    > BTW, there is a similar issue which display: inline will
    fix, I left that
    > in
    > there to show that it doesn't help on this particular
    problem.
    >
    >
    >
    > <!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>Untitled Document</title>
    > <link href="main.css" rel="stylesheet"
    type="text/css" />
    > </head>
    >
    > <body>
    > <div class="container">
    > <div class="left"></div>
    > <div class="right">
    > </div>
    > </div>
    > </body>
    > </html>
    >
    > <!--CSS follows-->
    > .left {
    > background-color: #003399;
    > height: 250px;
    > width: 250px;
    > float: left;
    > display: inline;
    > }
    > .container {
    > background-color: #CCCCCC;
    > height: 500px;
    > width: 500px;
    > margin-right: auto;
    > margin-left: auto;
    > }
    > .right {
    > background-color: #999933;
    > height: 250px;
    > width: 250px;
    > margin-left: 250px;
    >
    >
    > }
    >

Maybe you are looking for

  • Creating a restore image on an external drive with package install options

    Hi, I'm looking to use a combination of tools maybe Deploy Studio, System Image Utility etc to create an image that isn't Netbooted but rather on an external drive (a fast Thunderbolt raid enclosure) - a restorable image which will contain OSX setup

  • Can I combine my two Apple IDs

    Recently, when upgrading my iPhone to a 4s I stupidly created a new Apple ID and have been using a mix of two IDs for some months now.  I guess I was too excited about the new Apple tech to be thinking straight! The upshot is that I now have two Appl

  • Photoshop CS3 web gallery bugs(?); vanishing metadata, bad sort order

    Running OS 1.5.4 on 24" Imac, I'm attempting to generate a "horizontal slideshow" from bridge-selected files in Photoshop CS3. [Sounded like the problem in this post: http://www.adobeforums.com/webx/.59b5a9fe/2 but on re-reading I've decided it's dif

  • Export for AppleTV - Settings messed up?

    I have done it this way before (at least I thought this is how I did it): File - Export - Using Quicktime Conversion - Format (Apple TV) -- name it and go... Then drag this file to iTunes, and all is great... I can watch it on my iPhone or my AppleTV

  • Wireless connection working on and off

    Hello all in desperate need of help! using Lenovo 3000 N200, Windows Vista Premium 32 bit. Wireless router: Edimax, g, WEP Hexadecimal  security. My wireless can't connect to router, unless it does so after disconnecting from a different network. Aft