Fri, 2010-03-12 20:05
Hi All,
I have done a ton of searching around this site (and others), but nothing that I have found matches my situation. Most topics describing negative margins discuss left/right margins, which I have working fine. please take a look at my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Simple Style Assortment Tester</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <!-- <link rel="StyleSheet" href="http://sandal.rose.hp.com/~switkows/style.css" type="text/css" />--> <style type="text/css"> .footer {background-color:lightsteelblue;color:black;border-top:1px solid black; text-align:right;padding-bottom:0.2em;padding-right:0.2em; -moz-border-radius:0 0 8px 8px;-webkit-border-radius:0 0 8px 8px} .boxes h3 {padding:6px;font-size:x-small;background-color:#d8deb0;border-bottom:1px solid DarkGray; -moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0; margin:-1.6em;margin-bottom:1em;} ul.boxes {width:80%;padding:0;margin:auto;list-style:none} .boxes li {border:1px solid DarkGray;margin-bottom:2em;padding:1em; -moz-border-radius:10px;-webkit-border-radius:10px; background-color:white; -moz-box-shadow: 4px 4px 8px black;-webkit-box-shadow: 4px 4px 8px black;} li a.title {float:right;min-height:0;border:1px dashed red} .boxes li .footer {margin:2em -1em -1em -1em;min-height:0} /** html .boxes li .footer {height:1px}*/ * html .boxes h3 {height:1px;min-height:0} * html li a.title {height:1px;position:relative;min-height:0} </style> </head> <body> <ul class="boxes"> <li> <h3>header1<a class="title" href="#">Back to Top</a></h3> <p>body text.body text.body text.body text.body text.body text.body text.body text.body text.</p> </li> <li> <h3>header2<a class="title" href="#">Back to Top</a></h3> <p>body</p> <div class="footer"> some text<br style="clear:both" /> </div> </li> </ul> </body> </html>
My problem is that the negative margins set to the top of the h3 and the bottom of the div.footer elements are not being obeyed by IE (7 in my case). I have tried various things, like setting 'position:relative' in the '*html ...{}' lines, and min-height attributes, but none of them fixed the issue.
Also, you can see that the link 'Back to top' is not displayed properly in the header.
any help appreciated!
Thanks
Fri, 2010-03-12 21:11
#1
I avoid using negative margin
I avoid using negative margin settings altogether, in most cases, as they can be problematic. Not all browsers render it the same way.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-03-12 23:13
#2
the reason i am using
the reason i am using negative margins is so that i can pad the li, consistently, regardless of whether the div class="footer" is present or not. also, that's the only way to get left/right padding in the middle portion of the li, without inserting another div element. I had it doing mostly the correct thing (without side padding) with no negative margines, but i had to set the class of the li when the div class="footer" was present.
I figured the more elegant solution (and less coding) would be to get negative margins to work. It looks great in standards-compliant browsers, but then there's IE..
Fri, 2010-03-12 22:02
#3
yeah, i didnt understand that
yeah, i didnt understand that post. some of it is getting cut off or something.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-03-12 23:13
#4
sorry, i had added some html
sorry, i had added some html tags in my explanation 