CSS problem in IE6

  Ben Avery 12:13 03 May 05


It would appear that no matter what I try to do, IE6 makes it difficult to conform! I'm in the trhrows of redesigning my site after buying the rather excellent book "CSS - Designing without tables" by Dan Shafer.

I've pretty much re-layed out the basic page structure and in FireFox it looks fine. However, in IE6, the right hand div> which incorporates the right column seems a little "skew-whiffed" - specifically 1px too far to the left (therefore covering the dashed border) and doesn't match up correctly at the bottom (leaving a few lines "gap" which is rather unsightly!)

My page: click here

The CSS file: click here

I'm only learning the css as I go but can't work this bit out. The site is also linked to a dynamic js file (click here) which redefines the column height so that they all match.

Any thoughts on (a) layout structure and (b) troubleshooting?

P.S. Not all links are yet active!


  Ben Avery 15:43 03 May 05

I can 'bypass' the first problem by copying the entire stylesheet to blank new one, renaming it 'ie.css' and simply changing the right <div>'s right position to 10px.

However this makes no logical sense! Surely a 10px page margin + a 1px border = 11px for the right position??? How does IE interpret it as 10px when it manages to correctly render the left <div> which is also 11px???

I'm confused!


  PurplePenny 16:01 04 May 05

That is indeed an excellent book. (BTW it took me a while to work out that the illustration on the front was a joke!)

IE has a bug which doubles the margin of floated elements. If that is the problem you can adjust it by sticking in a conditional comment click here (It works: I used it just the other day to over come a similar problem.)

The site is looking really good. I love the through-glass effect of the ivy behind the text pane (very complex-spiral).

(PS Look forward to seeing the wedding photos)

  PurplePenny 16:04 04 May 05

I should clarify that: I mean the illustration on the front of "Designing Without Tables" which shows a family eating a meal ... and the plates, cutlery, glasses, bottle etc. have no visible means of support :-)

  Ben Avery 09:26 05 May 05

Must admit I didn't see it until about the 3rd time of viewing the book either!

I'll try the workaround and see what happens!


  Ben Avery 09:31 05 May 05

Just realised what your link is regarding. I've actually redesigned the page slightly using that theory by linking IE to a seperate stylesheet which has some "creative" margins to compensate.

Here's a riddle however for all you CSS guys and galls, open the page in IE6 and look at the right column. It has a 1px gap to the left in normal screen mode, but if you "maximize" the screen the whole right column floats 1px to the left leaving the 1px gap now on the RIGHT!



  PurplePenny 23:07 05 May 05

I'm pressing F11 like mad to go back and forth between normal and max. screen and I can't see the gap moving. The page looks just the same (but slightly bigger) to me.

  Ben Avery 09:15 06 May 05

Best way to tell is by looking at the green masthead at the top of the right column - e.g. on homepage the right masthead says "Recent Additions"

Is it just my browser or is something iffy?


  Ben Avery 09:48 06 May 05

It seems to be fixed now???

I think it may have been my browser actually. I swear to you it was moving but now I've had a reboot it seems to be ok! I've adjusted the ie.css sheet accordingly.

Now to find out what's wrong with the bottom of the right column!


  Ben Avery 13:14 09 May 05

...has now changed to click here

  Ben Avery 15:09 09 May 05

As an avid user of Opera, you may be able to tel lme something. I've just re-installed latest version of opera to test site and seem to have found a problem with the position of the search bar.

In Mozilla, it sits nicely between the top navigation menu and the bottom of the logo <div>

In opera, the search bar overlaps the right column slightly. How can I code around this?

In the css files I have set up:

{ position:absolute; top:39px; } for IE

{ position:absolute; top:32px; } for Firefox/Mozilla

In Opera, the correct postitioning would be as follows:

{ position:absolute; top:22px }

How can I adapt the standard stylesheet (or create another purerly for opera) which will allow for this change?


This thread is now locked and can not be replied to.

Apple Event as it happened | Apple October Event live blog: Apple unveils new MacBook Pro at…

1995-2015: How technology has changed the world in 20 years

Graeme Messer's exhibition aims to challenge fears and insecurities

New MacBook Pro release date, price and specs | New MacBook Pro 2016 announced: Now with Touch Bar…