Adding image causes dropped columns in Firefox

It works fine for me.

Actually, on my machine, IE gets both right, but when there is no image FF egts it wrong, and with the image it is right.

IE7 and FF1.5.0.9 both on Windows XP SP2

This suggests that you have coded your page for IE, and then tried to get it work in FF.

It might be best to see if you can stabilisie the problem first, as we have three people seeing it 3 ways.

I have been viewing it in IE7 and FF2.0.0.1, not FF1.5.0.9 like you. (I must say that I am curious to know why you are not using the latest version of FF. Is it somehow uncool, unstable or unsafe?)

It displays fine even in FF if I preview the page from Dreamweaver, but as soon as I upload it to the web and load the appropriate URL, it falls apart (if an image is present).

I coded the page for FF2.0.0.1, not for IE, by the way. It always seemed fine in FF until it was uploaded to the web, when things went wrong. Maybe it is a Dreamweaver preview issue that is masking the true problem. It previews from Dreamweaver as a temporary HTML file on the local hard disk, rather than from a URL.

Can the person for whom it worked fine please share with us which FF browser version (and maybe platform) they were using?

I'm using FF1.5.0.9. And are you sure which version of FF is later?

Early adopting of new software means you have to cope with the bugs. e.g. I use a large number of extensions with FF. I always delay updating for a short while to improve the chances of all my extensions being updated for the new version when I upgrade. Right now, I'd be happy to upgrade to FF2.0.0.x, I just haven't got around to it yet.

I can make your page go wonky, but not in the way you describe. At narrower screen widths (narrow isn't that narrow, maybe 900px or so) the whole page jumps 50% of the viewport width to the right. That puts most of the page off-screen to the right. At widths wider than that it appears to display normally. In both cases the two right hand columns display at the top of the page (well immediately below the banner).

Why don't you use "margin: 0 auto" to center the page, instead of contorting with:

margin-left: -476px;
position: relative;
left: 50%;


The margin method has the advantage of you not having to recalculate anything should you decide to change the width of the page.

While it is true that both FF1.5.0.9 and FF2.0.0.1 were released on the same date (December 19, 2006), I guess the fact that FF1.5.0.x will only be maintained with security and stability updates until April 24, 2007 makes it likely to fade into history sooner than FF2.x.

Thanks for the information about screen widths. I have been designing for 1024x768 maximized, not smaller sizes. The target audience for the site tends to use reasonably high resolutions.

I used the margin-left, position and left CSS in order to center the page without having to use the following auto margins code:

body { text-align: center; min-width: 760px; } #wrapper { width: 720px; margin: 0 auto; text-align: left; } (this is taken from CSS Mastery, chapter 7)

which contains hacks for IE5, 6 and NN6, apparently. I don't plan on changing the width of the page in the near future, although I may play around with the column widths.

But maybe it would be better to use this technique because it creates scroll bars when the browser window is too small, rather than rearranging the content...

Which just goes to show you shouldn't pay too much attention to what you read in books

Code your CSS properly. IE5 isn't supported by microsoft any more are you sure you want to be supporting it? For IE, I believe it makes more sense to use IE conditional comments and include separate style sheets for the earlier versions of IE. Place styles in those style sheets to override styles in your main style sheets.

The key with older browsers isn't to try to make your site looks as near to modern browsers but to make it look ok. I doubt someone using IE5 is going to mind too much if your site isn't centered. Given the age of IE5, its quite probable that someone using it won't have a high resolution screen. In IE5's heyday 1024 x 768 was somethign to shout about!

I didn't bother too much with IE5 even when MS were supporting it

Is there anyone out there who has FF2 and who can see the dropping columns problem when there is a small image in the main content column, please?

Works fine here, FF 2.0.0.1, no column dropdown.

Still waiting for the active-x extension for v2 (unless you know where it is hidden).

I have simplified the problem so that it is clearer to everyone. The page is here:

http://www.designhowto.com/index_css04.html

and the new CSS file is here:

http://www.designhowto.com/css/main4.css

There is a small 'about' image placed after the first paragraph of Lorem Ipsum nonsense text. For some unknown reason, its presence makes the two rightmost columns to drop down to the bottom left hand corner, when viewed in Firefox 2.0.0.1. These two columns both start with the text "a little heading 1".

I have changed the doctype to XHTML transitional. I have eliminated the closing tags created by Google's search box. The HTML file validates properly. The CSS file validates correctly at w3.org. But the columns still drop down to the lower left.

You may need to press the Reload button if you have previously loaded the trouble-free page ( http://www.designhowto.com/index_no_img.html ), because otherwise the two right hand columns will be in their correct positions. The same goes for if you have loaded the bad page and then load the good page - the problem will appear to persist, until you hit Reload.

Can anyone suggest why this might be happening? Is this an insoluble CSS problem, a Firefox bug, or neither?

Since no one can solve the dropping floats problem on my previous layout, here is a different approach to the problem.

I have ditched my old HTML and CSS. Instead, I have used ClevaTreva's page generator program to create a new page that matches my layout (but with a slight column change). I want to integrate the CSS drop down menus into this layout. But when I do, they don't show up.

Here is the page without any CSS menus, looking OK:

http://www.designhowto.com/index05.html

And here it is with the additional CSS menus (which are not visible, I might add):

http://www.designhowto.com/index06.html

The extra CSS is at:

http://www.designhowto.com/css/noodle_real.css

and the new styles used by the drop down menus begin at line 96 in the CSS file.

As you can see, the Sub Header #3 area disappears totally in index06.html.

Can anyone give me a pointer as to why this might be happening?

Hi

This is what the latest generator makes (not released into the wild yet):

CSS:
/*** Style for 3 Column Template ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
html,body{height:100%}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#71695B; /*** Background colour of page ***/
min-width:866px; /*** Content Width ***/
text-align:center;
}
input,select{
margin:0;
padding:0;
}
strong,b{
font-weight:bold;
}
p{
font-size:84%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:866px; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-32px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background:#95928D; /*** Background colour of left AND right columns. ***/
}
#wrapper{
display:table-cell;
position:relative;
}
#outer{
position:relative;
margin-left:237px; /*** Left Column Width ***/
width:392px; /*** Center Column Width (takes into account left and right shady border widths) ***/
background:#FFF; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
width:392px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#left{
float:left;
display:inline;
width:237px; /*** Left Column Width ***/
margin-left:-237px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#right{
float:left;
display:inline;
width:237px; /*** Right Column Width ***/
margin-right:-237px; /*** NEGATIVE Right Column Width ***/
position:relative;
}
#center{
width:392px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
}
#clearheadercenter{
height:104px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:104px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderright{
height:104px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:31px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:31px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterright{
height:31px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
color:#FFF;
}
#footer-inner{
width:866px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subfooter1{
margin:0px;
background:#BEB182;
text-align:center;
height:31px;
overflow:hidden;
}
#subfooter2{
margin:0px;
background:#FFF;
text-align:center;
height:1px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
color:#FFF;
}
#header-inner{
width:866px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px;
background:#BEB182;
text-align:center;
height:71px;
overflow:hidden;
}
#subheader2{
margin:0px;
background:#FFF;
text-align:center;
height:1px;
overflow:hidden;
}
#subheader3{
margin:0px;
background:#56494B;
text-align:center;
height:31px;
}
#subheader4{
margin:0px;
background:#FFF;
text-align:center;
height:1px;
overflow:hidden;
}
#container-left{
color:#FFF;
}
#container-right{
color:#FFF;
}
#container-center{}

/* css menu styles start here -------------------------- */
#menu {
list-style-type:none;
margin:0 0 100px 0;
padding:0;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 9pt;
font-weight: 600;
}

#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:78px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none;}

#menu dl {position:absolute; top:0; left:0; width: 78px; margin: 0; padding: 0; background: transparent url(transparency.gif);}
#menu dt {background: #56494B; margin:0;font-size: 1.1em; border-bottom:1px solid #fff; border-right:1px solid #fff;width:78px; float:left;}
/* menu dd border-bottom color below is the color of the 1 pixel line between menu items*/
#menu dd {
display:none;
background: transparent;
border-bottom:1px solid #FFFFFF;
clear:left;
margin:0;
padding:0;
color: #EFEFD5;
font-size: 0.9em;
text-align:left;
}
/* last padding value below is left indent of menu TITLES text. This is an independent value. If you want the menu titles to line up with the menu items, this
value should be the same as the last padding value (left) for "#menu dd a, #menu dd a:visited" below. */
/* The width value below should be the "#menu dl" width MINUS left padding below - I think. */
/* text-align:center is a new experiment which involves deleting left padding and making width the same as "#menu dt" width above.*/
#menu dt a, #menu dt a:visited {display:block; color:#EFEFD5; padding: 6px 0px 5px 0px; width:78px; text-align:center;}
/* 2nd & 4th padding values (right & left) PLUS final width value should ADD UP TO width in "$menu li:hover dl, #menu li a:hover dl" below.*/
#menu dd a, #menu dd a:visited {background:#56494B; color:#EFEFD5; text-decoration:none; display:block; padding:6px 10px 4px 15px; width:132px;}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:157px; border-bottom:10px solid #95928D;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #95928D; color:#FFFFFF;}
/* css menu styles end -------------------------- */

HTML:

Your Page Title Here
@import url("style.css");

layout

what is layout?

intro to grids

rectangles

grids

grid terminology

designing grids

using grids

type

what is type?

serif and sans serif

type families

type history

horizontal spacing

vertical spacing

type and images

type hierarchy

headings

color

what is color?

color systems

color on computers

color schemes

creating your own color schemes

color schemes from photos

logo

what is a logo?

logo design principles

good logo designs

image

what are images?

choosing good images

image and type

artwork

what is artwork?

vector illustration

pencil illustration

web

what is web design?

web design basics

about

the author

legal

books

general design books

layout books

type books

color books

logo books

image books

illustration books

links

general design links

layout links

type links

color links

logo links

image links

illustration links

I haven't touched your menu code.

Trevor

Thank you very much, ClevaTreva - that is a great improvement. Unfortunately, the menu bar is still about one third of the way down the page in Firefox 2. It is higher in Opera 9, although the dark brown background DIV has slipped instead. It actually looks best in IE 7, surprisingly. The menu and the dark brown background DIV are in more or less the right locations. There is a little bit of tweaking to be done, but that is in the menu CSS, not the underlying layout CSS, as far as I can tell.

I have posted your code on my site here:

http://www.designhowto.com/index08.html

and

http://www.designhowto.com/style.css

Would you have any suggestions on how to get it looking good in FF and Opera, please? I really do appreciate your efforts on my behalf.

Just change the #menu margin to 0. Sorry I didn't spot that!

Thanks a million! That's fantastic. You're a genius! CSS relief at last.

When do you plan to release your new page generator?

Late February (with a prevailing wind)