17 replies [Last post]
cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

I have a layout which is working fine in IE, FF and Opera - until I insert an image into the main content area. Firefox sends the two columns on the right down below everything else, although neither IE 7 nor Opera 9 have the same problem.

http://www.designhowto.com/index.html (the one with the image, which causes problems in Firefox)
http://www.designhowto.com/index_no_img.html (this is the one without the image in the main content area. It is working fine, even in FF)
http://www.designhowto.com/css/main.css (the main css file)
http://www.designhowto.com/css/rollovers.css (minor image rollover CSS)

Can anyone please identify why I cannot add images in the content DIV without causing layout problems in Firefox?

Cassepied.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 19 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It works fine for me.

It works fine for me.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Actually, on my machine, IE

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.

cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

I have been viewing it in

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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 19 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm using FF1.5.0.9. And

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

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

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.

cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

While it is true that both

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 19 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Which just goes to show you

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

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!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 14 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Chris..S wrote:IE5 isn't

Chris..S wrote:
IE5 isn't supported by microsoft any more are you sure you want to be supporting it?

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

Verschwindende wrote:
  • CSS doesn't make pies

cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

Is there anyone out there

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?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 14 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Works fine here, FF 2.0.0.1,

Works fine here, FF 2.0.0.1, no column dropdown.

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

ClevaTreva wrote:IE7 and

ClevaTreva wrote:
IE7 and FF1.5.0.9

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

cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

I have simplified the

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?

cassepied
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 8
Points: 0

ClevaTreva's page with drop down menus

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?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi This is what the latest

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");

This is the
Main Content

This is the Left Sidebar

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

    cassepied
    Offline
    newbie
    Last seen: 16 years 2 weeks ago
    Joined: 2007-01-16
    Posts: 8
    Points: 0

    Thank you very much,

    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.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 4 years 12 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Just change the #menu margin

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

    cassepied
    Offline
    newbie
    Last seen: 16 years 2 weeks ago
    Joined: 2007-01-16
    Posts: 8
    Points: 0

    Thanks a million! That's

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

    When do you plan to release your new page generator?

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 4 years 12 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Late February (with a

    Late February (with a prevailing wind)