Page looks great in IE6 but rubbish in FF... 2

[TobyA]

Dear Web Gurus,

I have been developing a site with a colleague and we've got a bit of a problem. The site was developed first in IE6, then checked in FF (our first mistake).

http://www.simply-delightful.com/category.asp?CAT_ID=2

The above page looks fine in IE6, but in FF the main page displays below the left menu, so it's clearing it instead of displaying side by side.

The site is written in xhtml transitional and the HTML validates OK.

Any suggestions would be greatly appreciated.

Thanks a lot,
Toby

 

[Foamcow]

Although the page looks different in FF to IE it isn't exhibiting the behaviour you mention.

For me, in FF the sectional navigation isn't aligned to the right and is instead touching the logo.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Vragabond]

Foamcow, being a table design, that thing is proned to unsuspecting problems. Refresh the page and see what the OP is saying.

Toby, I don't want to sound negative, but your page is ridiculously complicated for what it is achieving. I would do a restructuring with basically two floats under a common header and get rid of the table in favour of some more floats.

 

[TobyA]

Yep, that is happening for me also, AS WELL AS the main page appearing below the left menu.

Can you suggest a resolution for either?

Thank you.

Toby

 

[BabyJeffy]

Can you suggest a resolution for either?

I think Vragabond did.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[TobyA]

Ha ha!

Thanks for your post Vragabond.

I initially designed the site with the pink strip as a DIV floating to the left. However, I couldn't make it expand nicely as the content on the main page expanded (the products section is database driven).

Shifting the blame - My colleague designed the page as it is now to get round that problem.

How would you expand the left div as the content in the main div expanded? I think I tried a clear: both at the time but with no joy.

Thanks again,
Toby

 

[ChrisHunt]

I think it should work if you move div#header outside div#MiddleColumn .

developed first in IE6, then checked in FF (our first mistake)

That's probably true - it's better to develop in FF first, however the real mistake is to go so long without cross-browser testing, leaving you with a lot of trees in which to spot the rotten wood.

With CSS layouts, get the bare bones in first - with all the divs you want, giving them different background colours so you can see what's where - then test it on as many browsers as you can before you start worrying about fonts and colours and other presentational stuff. The less stuff there is in your CSS file, the easier it is to debug.

Incidentally, on an unrelated point, a slick way to implement a menu that's laid out as "option | option | option | option" is as a <ul>, where the vertical bars are actually a border-left on each <li> (which are floated or displayed inline). You can see this in action at

http://www.infolinx.org

. It makes little difference to most users, but I think the markup looks better that way.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TobyA]

Thanks for your reply Chris.

I agree that it's best to start with a bare bones structure and go from there. Unfortunately I wasn't able to get the left div to expand as the main div expanded, hence we had to think of a different approach.

Do you have any suggestions for acheiving this expanding div?

Nice tip about the top menu by the way - Thanks!

Toby

 

[ChrisHunt]

Well, the problem you seem to have, then, is that div#MiddleColumn is defined as 475px wide, and that just isn't wide enough for div#header.

Could you change the width to 618px, then introduce a new, narrow <div> to enclode the content below the header? I'd also give the header enough margin (100px?) to be certain that it won't run into the logo when the text size is increased.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TobyA]

Thanks again for your help Chris.

Sorry, I don't think I made myself clear....

How I designed the site initially was to have two floating divs under a comon header. This was simple markup and seemed to do the job well.

However, the products section is database driven (as you can see they are asp pages). So therefore some catergories contain more products than others, so the page has to expand downwards to cope with more content. The problem was that the left (pink) div wasn't expanding downwards as the main div expanded. We tried various things to fix it (such as height: 100%) but with no joy.

If somebody can explain a simple way of doing this then I'll redesign the site from scratch as per Vragabond's initial suggestion.

Anyway, I appreciate your advice guys.

Toby

 

[Vragabond]

Toby, do that with the help of overflow: auto; on the container div (to make it flow down to the end of the longest floating div) and faux columns technique on the container as well to create the illusion of the column.

 

[TobyA]

Aha!

Thanks Vragabond - That's what I wanted to know!

 

[ChrisHunt]

I've had a go at re-doing it from scratch, see what you think...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <title>Simply Delightful</title>

  <style type="text/css">
    body {
      text-align: center;
    }

    #container {
      width: 618px;
      text-align: left;
      margin: 0 auto;
      border:1px solid #FDEFF3;
      border-left-width: 150px;
      height: 100%;
    }

    /* Devious float enclosing method */
    #container:after {
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
    }

    #header {
       _width: 768px;  /* IE needs this */
       margin-left: -150px;
       overflow: auto;
       position: relative;
    }

    #logo {
       float: left;
    }

    #topmenu {
      text-align: right;
      margin-left: 150px;
    }

    #sidebar {
       width: 150px;
       clear: left;
       float: left;
       margin-left: -150px;
       _margin-left: -75px; /* another IE bug */
       position: relative;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="header">
      <img id="logo" src="/images/Logo_Top_Corner.jpg" alt="Simply Delightful" />
      <div id="topmenu">
        Top menu here
      </div>
    </div>
    <div id="sidebar">
      Menu here!
    </div>
    <div id="main">
      Main Content
    </div>
  </div>
</body>
</html>

This works in FF and IE6, I don't have access to any others right now. Note the leading underscore trick used to pass some values to IE only. You'll need to add some padding (at least) to div#topmenu, div#sidebar and div#main.

I've retained your ingenious approach of using the container's left border to colour the sidebar, but suspect it may cause problems in older browsers less competent with negative margins. It might be better to use an old-fashioned 150px-wide background image repeated down div#container, it'd certainly make the CSS a little simpler.

Vrag's [tt]overflow:auto[/tt] method of enclosing floats is usually the best method (I use it in div#header), but it sometimes results in unwanted scroll bars. For div#container I had to fall back on the method suggested in

http://www.positioniseverything.net/easyclearing.html

.

In an ideal world, div#main would appear first in the markup (or at least before div#sidebar). I'll leave you to figure out how to do that...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TobyA]

Chris,

Thank you so much for your help.

I've built the homepage again using your markup and it looks great in IE + FF....

You're a star.

Cheers,
Toby