margin not work in IE - FF

Discussion in 'CSS' started by mol, Aug 23, 2007.

0
  1. #1
    Hi all...

    I have problem with css layout , here is the link :

    http://molusca.com/css/index.html

    I style list (margin:10px) on the left side, when i view in FF(2.0.0.6) bullet appear but view in IE7 got no bullet and the list indent not like expected.

    On the other side, I got the problem with the text on right side, I set margin for the text (margin:10px) , got no effect in FF but i got it in IE7.

    how can i fix it, so i get the same look in FF and IE


    many thanks
     
    mol, Aug 23, 2007 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Replace your ul css with this code:

    ul{
margin: 10px 10px 10px 0px!important;
margin: 10px 10px 10px 30px;
}
    Code (markup):
    the !important code will basically be read by every browser except IE6, thus allowing it to show up properly in Firefox and possibly in IE7 aswell. (I only have IE6)

    In IE6 however, the bottom code will be read since it ignores the !important tags which will force it to be moved over 30px to the left allowing the bullets to be seen.

    Hope this helps.
     
    GWiz, Aug 24, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    The problem is that margin does not effect your bounding boxes for rendering - making you state a whole bunch of widths you really shouldn't have to... in addition to the classic 'IE double margin on float' error... that last one we can fix by setting display:inline on your floats - which is really stupid sounding since floats are inherently block overriding display:inline, but it works for IE 6 and earlier for some bizzare reason, and doesn't screw up the other browsers.

    Another issue though is the use of margins in a lot of places padding might be more effective.

    You are also making a whole bunch of unique classes for items that shouldn't need them... and I'd zero all margins 'just to be sure'.

    I think this is what you are trying to accomplish, right?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>css layout</title>

<!--<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">-->

<style type="text/css">

* {
  margin:0;
  padding:0;
}

body {
  font:normal 12px/16px geneva,arial,helvetica,sans-serif;
  color:#666;
  background:#fff;
}

.box {
  width:750px;
  margin:8px auto;
  background:#EEE;
}

.top {
  width:748px;
  height:100px;
  background:#069;
  margin-bottom:8px;
}

.left,
.right {
  float:left;
  display:inline; /* fix IE double margin */
  width:355px;
  margin-left:13px;
  position:relative;
}

p {
  padding:10px;
}

ul {
  margin-left:1.25em; /* make room for bullets */
  padding:10px;
}

.content_box {
  margin:0 0 8px;
  background:#DDD;
}


.footer {
  clear:both;
  height:35px;
  background:#069;
}

</style>

</head><body>

<div class="box">

  <div class="top"></div>

  <div class="left">

    <div class="content_box">
      <ul>
        <li>df ldf kdfdf dfkdfk </li>
        <li>klgork lkgri kdfgogr ldfg</li>
        <li>jkf gr ioert  kfgdr fgd</li>
        <li>irturtb pwepo o poweqe qwe</li>
        <li>yuer pier p ierw iwer weri  </li>  
      </ul>
    </div>
  
    <div class="content_box">
      <img src="http://molusca.com/css/leaf.jpg" alt="" />
    </div>

  </div>
  
  <div class="right">

    <div class="content_box">
      <p>
        Microsoft has made changes to the way that Internet Explorer 
        handles some content in webpages. When Internet Explorer 
        encounters a page with ActiveX controls, you might be required
        to approve (activate) those controls before they can be used.
        When your mouse hovers over the control, a note will appear
        asking you to click the note to activate the control. Sometimes
        the control will display a dialog box before the page displays.
        As soon as you click OK, the page will load normally.
      </p>
    </div>

  </div>
  
  <div class="footer">footer</div>

</div>

</body></html>
    Code (markup):
    I also axed the clearing DIV since we can set the clear on the footer... which doesn't really need margin-top since the .content_box classes have a bottom margin on them. (that and as a clear after floats, margin-top is usually ignored)

    Stylistically, I'd probably up the margin-bottom on those .content_box to the same 13px used for the side columns, but that's a personal preference sort of thing. (either that or I'd widen the columns so the side/middle margins are only 8px)

    Hope this helps.
     
    deathshadow, Aug 24, 2007 IP