Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    negative values in IE

    I have these classes that need to have a negative value in oder to work well in IE, and I was wondering if thats ok, I've seen some tutorials that say that its not such a good idea but it doesnt work any other way.

    Notice that I'm using positive values for the other browsers but then I use an "ie hack" and put the negative value there, this is how I'm doing it

    Code:
    #menuleft{
        	float:left;
    	width:171px;
    	border: 0px solid #fff;
    	margin: 1px 0px 0px 4px;
    	padding-left: 0px;
    }
    /* IE Hack */
    *html #menuleft{
        	float:left;
    	width:171px;
    	border: 0px solid #fff;
    	margin: -11px 0px 0px 2px;
    	padding-left: 0px;
    }
    Another question: Why does sometimes the properties from a parent "div" overlap some child "div" or "p" properties, like for instance text aligning and padding/margin. Is that normal?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Negative margins, inheritance

    Negative margins can indeed be applied to achieve some interesting positioning effects; as far as I know all modern browsers support this as it is allowed. You could check the W3C specs for other properties that accept negative values.
    Some applications of negative margins can be found in Ryan Brill's article on ALA: Creating Liquid Layouts with Negative Margins.

    Properties from parent elements influencing child element properties is called inheritance and is one of the key aspects of CSS; you can read something about it in the Selectutorial: Inheritance.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks that answers my first question, but about the second question: "inheritance"... I dont get it? for example if I have a parent with a text align center class and then I choose its child to have a text align justified class, it wont work, instead it gets centered anyway ..... unless I write it right over there like style="text-align:justify", and well....that would be against of what css is suppossed to be, easier and faster to modify stuff!

    So is there no solution to this? btw, I did read the article and even the other resource links that it mentiones, but I'm stuck in the same place since I kind off already knew about that "inheritance" thing.
    Last edited by lalo; 10-06-2004 at 01:54 AM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Code, please

    Show us the code; you probably got your style rules crossed. A link would be nice.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    ok in short I have this:
    the layout of the content box:
    Code:
    <div class='storytable'>
       <div class='story'>
          <div class='contentbox1'>
             <div class='boxtop1'>
                <div><div><h3>Box title</h3>
                </div>
             </div>
          </div>
          <div class='boxcontentwrap1'>
            <div class='boxcontent1'>
              <div class='divcenter'>
                      Hero goes the content, paragraps and stuff
    	  </div>
            </div>
            <div class='boxbottom1'>
              <div>
                 <div>
                 </div>
              </div>
            </div>
          </div>
       </div>
    </div>
    this is the box style
    Code:
    .storytable{
      	float: left;
      	width: 595px;
            margin: 0px;
    }
    .contentbox1  { background: url(images/bg.gif) repeat; }
    .boxtop1         { background: url(images/topmiddle.gif) repeat-x; }
    .boxtop1 div     { background: url(images/topleft.gif) no-repeat top left; }
    .boxtop1 div div { background: url(images/topright.gif) no-repeat top right; }
    .boxbottom1         { background: url(images/bottommiddle.gif) repeat-x; }
    .boxbottom1 div     { background: url(images/bottomleft.gif) no-repeat top left; }
    .boxbottom1 div div { background: url(images/bottomright.gif) no-repeat top right; }
    .boxcontentwrap1 { background: url(images/left.gif) repeat-y; }
    .boxcontent1     { background: url(images/right.gif) repeat-y right; }
    .boxtop1 div, .boxtop1 {
    	width: 100%;
    	height: 26px;
    	font-size: 12px;
            text-align: center;
    }
    .boxbottom1 div, .boxbottom1 {
    	width: 100%;
    	height: 16px;
    	font-size: 1px;
    }
    .boxcontent1  { padding: 0em 1em 0em 1em; margin: 0px;  }
    .contentbox1 { width: 100%; margin: 1em auto;  }
    /* This overlaps the classes within it- so I wont use it */
    /*.boxcontent1 p {
    	padding: 0px;
            margin: 0px;
            text-align: center;
    }
    */
    .boxcontent1 h3 {
            background-color: #0489D3;
            font-size: 11px;
        	color:#ffffff;
            padding: 0px;
            margin: 0px;
            text-align: center;
    }
    .boxcontent1 div {
    	padding: 0.1px 5px 1px 5px;
            margin: 0px 8px -1px 5px;
    }
    /* IE Hack */
    *html .boxcontent1 div {
    	padding: 1px 5px 1px 5px;
            margin: 0px 8px 0px 5px;
    }
    the default p / h3 / div styles
    Code:
    .story{
    	clear: both;
    	padding: 0px; margin: 0px 0px 10px 0px;
    	font-size: 80%;
    }
    /*.story p{
            padding: 0px; margin: 0px;
            text-align: center;
    }
    */
    .story div{
            padding: 0px; margin: 0px;
            text-align: center;
    }
    .story h3{
    	color:#fff;
    	padding: 3px 0px 0px 0px;
            margin: 0px;
            text-align: center;
    }
    and I also have this other style to customize each paragraph if I need to
    Code:
    .textjustified {
            font: 12px verdana, arial, helvetica, tahoma, sans-serif;
            color: #000066;
            text-align: justify;
            line-height:1.5;
            padding:0px 5px 5px 5px;
    }
    .textcentered {
            font: 12px verdana, arial, helvetica, tahoma, sans-serif;
            color: #000066;
            text-align: center;
            line-height:1.5;
            padding:0px 5px 5px 5px;
    }
    And the only way for the "textjustified" paragraphs to work is to disable the dafault paragraphs "story p" and "boxcontent1 p" for this section, otherwise the text-aligning and the margins and padding wont work, and I had to add another class with the text centered "textcentered" in case I need it. So that's my solution I just disabled story p and boxcontent1 p. I have it working at this (Edit: "Link Removed per user request") site, but with the rest of the layout.

    And if you wonder why there are two "default" paragraphs, well its because I'm using (Edit: "Link Removed per user request") CMS and this is how it works so that I can have my style without tables, or at least I dont know other way .

    But thanks anyway
    Last edited by sage45; 10-04-2005 at 04:39 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Specificity

    Since you supplied incomplete code - the structure of headers and paragraphs inside the "divcenter" div remains a mystery - I can still only make an educated guess, but it seems like a case of specificity: each style rule is assigned a specificity or weight if you want, based on its selector.

    Ids have a higher weight then classes, which in turn have a higher weight then simple (element) selectors, and several selectors weigh more then only one.

    If "story" is a class used on an element surrounding the paragrahs - here's where the guesswork comes in, the selector ".story p" has both class and an element selector, which gives it a - slightly - higher specificity then the ".textjustified" selector which only comprises one class selector; therefore, the ".story p" selector takes precedence.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize for not showing the complete style sheet but you'll punch me in the face if I did, because right now its a bit of a mess since it includes style classes I used before going "table-less" and some names are even in spanish....but if I understood right if I had "p.textjustified" instead of ".textjustified" it would take precedence instead of ".story p"? (btw I didn't thought of that before) or would that not matter at all?

    right now I'm only asking in order to learn, since, like I said before, I have managed to make it work by disabling ".story p" completely.

    Sorry for giving you headaches


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •