...

View Full Version : negative values in IE



lalo
10-05-2004, 11:44 AM
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


#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?

ronaldb66
10-05-2004, 01:15 PM
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 (http://www.ryanbrill.com/)'s article on ALA: Creating Liquid Layouts with Negative Margins (http://www.alistapart.com/articles/negativemargins/).

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 (http://css.maxdesign.com.au/selectutorial/): Inheritance (http://css.maxdesign.com.au/selectutorial/advanced_inheritance.htm).

lalo
10-06-2004, 01:47 AM
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! :eek:

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.

ronaldb66
10-06-2004, 08:00 AM
Show us the code; you probably got your style rules crossed. A link would be nice.

lalo
10-06-2004, 09:23 AM
ok in short I have this:
the layout of the content box:

<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

.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

.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

.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 :)

ronaldb66
10-06-2004, 01:33 PM
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.

lalo
10-07-2004, 03:37 AM
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 :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum