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>

Similar Messages

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!

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>

<div id="avmenu">
<ul>
<li><a href="#">LINK </a></li>
</ul>
</div>

<div id="right_side_bar">
<h3>Book Your Inspection</h3>
</div>

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

<div id="avmenu">
<ul>
<li><a href="#">LINK </a></li>
</ul>
</div>

<div id="right_side_bar">
<h3>Book Your Inspection</h3>
</div>

<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

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>

Double Float Margin Bug "error"

I did a browser compatibility check on one of the pages that
I am building and got this error.............
"Line 112, Double Float Margin Bug 'error'
When a margin is applied to a floated box on the same side as
the direction of the float, the margin is doubled. This bug only
affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely"
I have many thumbnails for a gallery page in their own divs,
within the content div, and they are floated in there.
When I viewed solutions, they suggested:
"When a margin is applied to a floated box on the same side
as the direction the box is floated AND the floated box is the
first one inside its containing box, the margin is doubled. (In
other words, a left-floated box with margin-left set to move it
away from its containing box will be twice as far away from the
left edge of the containing box as intended.)
SOLUTION
Specify display: inline; for the affected float.
DETAILED DESCRIPTION
This bug only reproduces when the floated element's margin
extends in the same direction as the float itself, and is between
the float and the container box's inside edge. Subsequent floats
with similar margins won't reproduce this bug- just the first float
in any row of floated elements."
Does anyone have any solutions, suggestions as how to fix
this? I will attach my code. And if anyone has a better solution as
to laying my thumbnail divs in another div container, please say
so. The reason I am putting them in separate divs is because that
is what someone suggested to use them with Lightbox2. He said they
needed some kind of special CSS to enable some of the functions and
they (the thumbnails) were easier to style if they were in their
own separate divs. I'm open for any suggestions.
Thanks!

Just add "display:inline" to the styling like this:
.image {
background-color: #121922;
height: 100px;
width: 100px;
float: left;
margin: 20px;
display: inline;
}

How to convert value from exp. value to double/float???

Hi all,
I am fetching values from database, which is of type double / float.
eg. values will be like -22,777,548 will be stored in database.
NOw if i use
float a= rs.getFloat(1);
out.println("a="+a);
I get output as a= -2.2777548E7
I want to remove "E" from out put value and display as it was given in DB.
How to solve this problem?
Please Help!
Regards
Ashvini

What do you mean - 'how does it work' ? All format classes (MessageFormat, DecimalFormat , SimpleDateFormat etc) are used to convert data from one form to other. Go through the java.text.* api. They work based on some pattern searches, pattern matches etc - dont know in detail :)
As for the other things, thanks :)
cheers,
ram.

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

SQL*loader support database columns Of Binary Double/Float

Does SQL*loader support database columns Of Binary Double/Float when applying Direct Path?

Why not use Google and find out for yourself.
The first hit on Google is this
Go see for yourself
Regards
FJ

Double - Float casting or Why isn't there float sqrt?

Is there any reason why not to include float sqrt? I'm pretty pissed since, it is just... well plain stupid. I hope it can be added, not to mention that casting takes away performance, not much, but I have to do a lot of casting since I'm doing 3d grahpics... Anyone know any solluions? Is there any point going the hard way and implementing own sqrt for float?
WHY WHY WHY, OH WHY.
Something is rotten in the state of java.

The absence of Math.sqrt(float) and float versions of other relevant methods is apparently becuase early versions of the Java compiler could not distinguish overloaded methods which only differed in double/float parameters. The current compilers do not have this problem and it has been proposed that the extra methods should be added but I don't know when this might happen.
In any case how sure are you that casting between double and float is causing any significant performance problem? This cast is NOT particularly expensive (casting to 'int' from float or double is usually much more expensive).
What processor are you using --- as far as I know Intel processors do not give any speed benefit from doing sqrt on float instead of double. I believe that many RISC processors do benefit from using float where possible.

Double/float/BigDecimal

Hi all
What is the major difference between
double, float, BigDecimal inorder to use for
the accurate results in currency calculations.
Thanks in advance.

double and float are basically the same, other than double is twice as large. They are not accurate. I belive that (you can test this yourself) if you:
<code>
double d = .001 + .001 + .001 + .001;
System.out.println(d == 0);
</code>
you get true. at least something similar to above shows this.
BigDecimal is incredibly large and it is accurate.

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

Expanding box issue I.E. 6

Hi, Can anyone tell me how to fix expanding box issues in I.E. 6. When viewed in I.E. 6 The text in my main content area expands causing the box to expand and jump down to the bottom of the page. Does anyone have a hack for this? Thanks
My link is http://www.innervisionfilms.tv
My CSS code for the page is
<!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>Welcome to Innervision Films Royalty Free Stock Footage, post production, motion graphics and photography gallery</title>
<style type="text/css">

</style>


Johns right, I would not worry too much about IE6 but if it is a necessity a couple of minor css amends will get it working in that browser.
Add to your .twoColFixRtHdr #mainContent css
float: right;
width: 494;
And then comment out /* */ the below also in the .twoColFixRtHdr #mainContent css
/* margin-right: 250px; */

Spry Vertical Submenu - Expanding Box Problem, white background

Hello everyone. I've recently incorporated a Spry Vertical Menu on my site for the first time and I'm experiencing problems with the submenu in IE7. (Things look fine in FF, Safari, and Opera.) A white box appears behind the text area (the "bios" and "contact us" links). And....In IE6 the entire menu bar becomes a horizontal mess.
I've come to learn that this is called an Expanding Box Problem but I don't know how to fix it. Perhaps this is seperate issue from the white panel issue altogether. I dunno. Can anyone be of assistance? I've been trying to solve this problem for days.
http://www.exposedproductionsnyc.com
Below is the CSS:
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 8em;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 31.5px;
    background-color: #000;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 160px;
    background-color: #000;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 100px;
    padding-left: 29px;
    padding-top: 3px;
    margin-top: 1px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
/* Submenu containers have borders on all sides */
/*ul.MenuBarVertical ul
    border: 1px none #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0em;
    color: #FFF;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #000;
    color: #6CC3D7;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #000;
    color: #6CC3D7;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: transparent;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: transparent;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;

Long answer = z-index
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Nancy O.

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’ve followed
the Three Pixel Text=
Jog and making the container DIV wide enough both to no
avail. I’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.

Expanding box problem in some browsers

My bottom three dividers are having an expanding box problem in some browers. Any idea how to fix? This is my first website and I am clueless.....
www.privateinsurancebrokers.com
Source Code:
V <div id="container">
    <div id="main_image"><img src="Images/ThreeArch.jpg" width="960" height="400" alt="Kenneth G. Harris Insurance Agency" /></div>
    <div id="left_colum">
        <strong><a href="employeebenefits.html"><img src="Images/Website_EmployeeBenefits.jpg" width="310" height="127" alt="Employee Benefits Orange County" /></a>Employee Benefits
      </strong><br />
      Since 1972, Kenneth G. Harris Insurance Agency has advocated for our clients in the process of securing the highest value employee benefit program. <a href="employeebenefits.html" target="_new">Learn More»</a> </div>
    <div id="center_column"><strong><a href="HealthInsurance.html"><img src="Images/Family and Individual Insurance.jpg" alt="Family and Individual Insurance Services" width="310" height="127" align="top" /></a>Individual & Family Insurance Services
    </strong>Kenneth G. Harris Insurance Agency will work with our insurance and financial partners to assist you with all aspects of your personal insurance needs. <a href="individualinsurance.html" target="_new">Learn More»</a></div>
    <div id="right_column"><a href="news.html"><img src="Images/blog.jpg" width="310" height="127" alt="Health and Life Insurance News Orange County" /></a>
      <strong>Information</strong> <br />
Keep up-to-date with the latest employee benefits and private insurance news. Let us serve as your resource for health care reform news and<a href="article2.html" title="Kenneth G. Harris Insurance Agency Group Health and Individual Insurance" target="_new"> more»</a></div>
</div>

Your CSS Layout has a provision for clearing floats but I don't see it in your HTML markup.
Insert a float clearing <br> <p> or <hr> right above your footer division like so:
<hr class="clearfloat" />
<div class="footer">
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

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

Similar Messages

Maybe you are looking for