CSS customization doesn’t work on IE

• 

  kaplandani · Member · Nov 10, 2010 at 8:07 am

  • Copy link
  • Add topic to favorites

  Hi,
  I’ve added some changes (below) to the css of my site.
  It looks great on Firefox and Chrome, but on IE (8) the sidebar is Under the text and not on the side.
  As it works great and correct in Firefox and chrome, what might be the problem with IE and how can I fix it ?

  Thanks,
  Dani

  Here are the CSS changes:

  #content {
  float:right;
  width:650px;
  margin:-50px 30px 0;
  padding:0 0 20px 45px;
  }
  
  #topbar {
  max-width:950px;
  height:25px;
  line-height:23px;
  background:#FFFFE6;
  overflow:hidden;
  border-bottom:1px black solid;
  margin:0;
  }
  
  #pagebar {
  background:url('images/blue_flower/pagebar.jpg');
  width:950px;
  height:35px;
  border-bottom:1px black solid;
  margin:0;
  padding:0;
  }
  
  #pagebar .children li,#pagebar .sub-menu li {
  min-width:105px;
  border-left:1px #e1e1e1 solid;
  border-bottom:1px #e1e1e1 solid;
  margin:0;
  padding:0;
  }
  
  #pagebar ul a {
  background-color:#f1f1f1;
  width:101px;
  }
  
  #page {
  width:950px;
  }
  
  #sidebar {
  width:200px;
  padding:20px 200px 10px;
  }
  
  #headerimg {
  background:url('http://physiocall.files.wordpress.com/2010/11/banner1.jpg') no-repeat;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  kaplandani · Member · Nov 10, 2010 at 8:09 am

  • Copy link

  The site is http://physiocall.co.il/

• 

  thesacredpath · Member · Nov 10, 2010 at 8:46 am

  • Copy link

  Well, first off, IE has never, ever been compliant with XHTML or CSS standards. MS continually thumbs their noses at standards.

  I’m not that versed on IE CSS, so you are going to have to wait for hallluke to pop around and offer advice. It might be about this time or a little earlier tomorrow before he shows back up in the forums.

• 

  kaplandani · Member · Nov 10, 2010 at 8:49 am

  • Copy link

  10x, I guess I’ll wait for him ro someone else knowledgeable with this issue. Shame on MS about that, still the most popular browser, so I’ll have to find a solution.

• 

  thesacredpath · Member · Nov 10, 2010 at 8:50 am

  • Copy link

  That said, I don’t see any of the normal things that would trip up IE in the CSS that you posted, but you might want to check out the CSS validation report.

  http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fphysiocall.co.il%2F&profile=css21&usermedium=all&warning=1&lang=en

• 

  thesacredpath · Member · Nov 10, 2010 at 8:54 am

  • Copy link

  IE makes web designer’s pull out their hair and scream. I know it does that with me.

  This could also be an issue with the original CSS for RTL languages possibly.

• 

  hallluke · Member · Nov 10, 2010 at 11:21 am

  • Copy link

  I can’t be of much help currently because the new version of Firefox (3.6.12) that I’ve downloaded doesn’t seem to load the CSS, some sort of compression problem. If I find a fix or manage to switch back to a previous version then I’ll take a look.

• 

  kaplandani · Member · Nov 10, 2010 at 12:37 pm

  • Copy link

  Hi, That is strange. 3.6.12 works good here, are you sure it’s Firefox and not some other add on that blocks you ?
  (firefox and chrom reads my site perfectly. it’s IE that does the problem….)

• 

  hallluke · Member · Nov 11, 2010 at 1:29 am

  • Copy link

  I’ve tested in Safari and Opera and they seem to be fine but I tend to use Firebug for all my CSS tinkering and without it I’m a little bit lost (well, mostly lazy). I did worry that it was my connection, I’m using a fairly unreliable USB dongle, but the fact that other browsers can cope does lead me to worry. When I have time I’ll reset things one by one to see if I can track down the culprit.

• 

  kaplandani · Member · Nov 11, 2010 at 1:45 pm

  • Copy link

  Well, Good/Bad News..

  If I remove
  #sidebar {
  width:200px;
  padding:20px 200px 10px;
  }

  It works good on IE, but then Firefox and Chrome doesn’t work ok (side bar is “hidden” with blank).

  if I add it back, FF and chrome looks ok, and IE sends the sidebar below the entire page….

  Now what….

• 

  kaplandani · Member · Nov 14, 2010 at 9:23 am

  • Copy link

  I’ve found the solution:

  #sidebar {
  float:left;
  width:200px;
  margin:-20px 10px 5px 5px;
  }

  it looks like IE and FF default differently to the float value.
  now it’s ok on both browsers.