|
CSS - Colored Padding/margins Like In Firebug
I am looking for a way to color the padding/margin/border of all the elements on my page, so that I can, with a quick look, see how the elements are interacting with eachother.
If you have used firebug, then you know what I mean, because in Firebug, when you hover over an element in "inspect" mode it shows the margins and padding in different colors. I have heard of diagnostic CSS before, but have never seen anything quite like this. Does anyone know how Firebug does it, or know of anything similar? Similar Tutorialsok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with. thanks in advance, Trizen www dot cooperativecreditsystems slash Untitled-2 dot html apparently being a new user i cant post links but just add the dots as dots and you should be able to find it. Please bear with this CSS learner...again Am trying to understand why IE adds extra spacing at times, while other times doesn't. As opposed to Firefox doing it right all the time. Is there something I'm doing wrong or missing? Here is my code(all comments included) Code:
<html>
<head>
<title>Dude's Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: center; /*IE hack for margin: auto;*/
}
#area {
background: #F5F5F5; display: table;
width: 776PX;
margin: 0 auto;
padding: 0px;
text-align: left;
}
#header {
float: right; width: 100%;
margin: 0; padding: 0;
background: white;
}
#header img {
margin: 5px 0 5px 5px; padding: 0;
height: 67px; width: 440px;
border-style: none;
}
#header h2 {
float: right;
text-align: center;
font-size: 18px; width: 38%;
border: 3px solid black;
margin: 15px 5px 0 0;
}
#toplinks {
background: #D3D3D3;
margin: 0; padding: 0;
line-height: 25px;
}
#toplinks a {
display: block: float: left;
padding: 0 10px; margin: 0 2px;
color: darkblue; text-decoration: none;
font-size: 16px; font-weight: bold;
vertical-align: middle;
border: 4px double gray;
}
#toplinks #firstlink {
margin-left: 10px;
}
#toplinks a:hover {
background: white; color: blue;
}
#menu {
float: left; margin: 20px 5px 0 5px;
background: white; width: 20%;
border: 1px solid black; border-width: 0 1px 1px 1px;
}
#menu a {
display: block; text-decoration: none;
border-top: 1px solid black;
padding: 5px; margin: 0;
font-size: 12px; color: black;
}
#menu a:hover {
font-weight: bold;
background: #EEE;
}
#maincontent {
float: left;
margin: 0; padding: 0;
width: 78%;
background: white; color: #191970;
font-size: 15px;
text-align: justify;
}
#maincontent h2 {
font-size: 20px; text-align: center;
padding-top: 20px;
}
#maincontent h3 {
font-size: 18px; padding-left: 15px;
}
#maincontent p {
padding: 0 20px;
line-height: 1.3em;
}
#maincontent img {
float: right;
width: 132px; height: 90;
margin: 0 20px 0 0; padding: 0;
border-style: none;
}
#maincontent ul {
padding-bottom: 30px;
}
#maincontent li {
padding: 0 20px 5px 5px; line-height: 1.3em;
}
</style>
</head>
<body>
<div id="area">
<div id="header">
<h2>Serving blah blah State Since blah</h2>
<a href=""><img src="Logo.gif" alt="Logo" title="Logo" /></a>
</div> <!-- end header -->
<div id="toplinks">
<a href="" id="firstlink">First top link</a>
<a href="">Second</a>
<a href="">Third</a>
</div> <!-- end toplinks -->
<div id="menu">
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</div> <!-- end menu -->
<div id="maincontent">
<h2>My Margin or Padding or Whatever Dilema.</h2>
<p>I am getting oh so very confused regarding why IE is adding extra space from the sides on only SOME of my images/div/headings and not others---as opposed to Firefox doing everything perfectly. This is pretty much my exact stripped down page. Notice below list of Minor Annoyances plaguing me. Yeah, sure, I could simply let things be cause, hey, it still works...but I am nagged why perfect browser harmony cannot be attained.</p>
<h3>List of Minor Annoyances</h3>
<ul>
<li>Notice in top header section: IE makes my h2 with border twice the width from the right than I would like. </li>
<li>In top header section: Logo looks great on left and top, but twice the space from bottom in IE.</li>
<li>Top links: spacing is perfect in both browsers(go figure).</li> <li>Onto side menu: space from top is perfect. IE space on left side is twice what's wanted.</li>
<img src="" alt="Front Desk" id="frontdesk" />
<li>Now image sitting here to right: IE puts no padding between letters and image. I could add margin: ; to the img, but that further increases my firefox space.</li>
<li>And, well, okay, that's it. Just wanna understand this IE extra spacing thing.</li>
</ul>
</div> <!-- end maincontent -->
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div> <!-- end area -->
</body>
</html>
Any input/advice is appreciated...Thanks, James Btw, can I size these code boxes? It's huge. Hi, I am shifting from table-based layouts to CSS layouts and having a hard time with padding and margins. In the code given below, I had placed the DIV bodypan within the parent DIV mainpan to create a box look. I had given the padding and margins of both the DIVs accordingly. But in IE6,the child DIV bodypan is not displayed as intended. The top and right borders of the inner DIV is streched more than the bottom and the left borders. In FireFox, only the right border is getting streched. Any help in solving this issue for both IE6 and FireFox will be very much appreciated. Code: <html>
<head>
<title>My page</title>
<style type="text/css">
.mainpan
{
float:left;
width:450px;
height:370px;
display:block;
border:1px solid #000000;
margin-left:auto;
margin-right:auto;
padding:10px 10px 10px 10px;
background:#BABB99;height:100%;
overflow:hidden;
}
.bodypan
{
width:410px;
height:330px;
margin:10px 10px;
background:#FCFAE6;
color:#3D3C2C;
padding:10px 10px 10px 10px;
border:1px solid #FF0000;
}
</style>
</head>
<body>
<div class="mainpan">
<div class="bodypan">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</body></html>
thanks, Rajkhowa I'm using the following code below to try and get a CSS template that I can use on sites to make them as consistent as possible across browsers. I've done fairly well (I think), but I'm having trouble with odd stubborn space around textarea's and other form elements. Any suggestions on how to remove these margins/padding? Both CSS and HTML is validated OK. Code:
/* CSS Document */
/* TAG DEFAULTS */
HTML {
font-size:100%; /* IE correction */
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height:100%;
margin-bottom:1px;
color:#352819;
font-family:"Times New Roman", Times, serif;
}
BODY {
/* Text-Sizing with ems: (URL address blocked: See forum rules) */
font-size:1em;
background-color:#FFFFFF;
margin:0;
}
TABLE {
font-size:100%; /* IE correction */
border-collapse:collapse;
border:0px none;
}
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE {
margin:5px 0 10px;
line-height:100%;
}
H1 {font-size:2em;}
H2 {font-size:1.5em;}
H3 {font-size:1.25em;}
H4 {font-size:1em;}
H5 {font-size:.75em;}
H6 {font-size:.55em;}
INPUT, SELECT, TEXTAREA, TH, TD {
font-size:1em;
font-family:"Times New Roman", Times, serif;
margin:0;
padding:0;
}
INPUT, SELECT, TEXTAREA {
border:1px solid #352819;
}
TEXTAREA {
overflow: auto;
width:300px;
height:100px;
}
FORM, LI {margin:0;}
UL {list-style-type:disc;}
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}
OL, UL {
margin:0;
padding:0;
padding-left:23px;
}
A:LINK {color:#a47832;}
A:VISITED {color:#a47832;}
A:HOVER {color:#e5a135;}
/* END TAG DEFAULTS */
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Style Test</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <table> <tr><th>Cell TH 1</th><th>Cell TH 2</th></tr> <tr><td>Cell TD 3</td><td>Cell TD 4</td></tr></table> <h1>This is H1</h1> <h2>This is H2</h2> <h3>This is H3</h3> <h4>This is H4</h4> <h5>This is H5</h5> <h6>This is H6</h6> <p>This is P</p> <UL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </UL> <OL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </OL> <form action=""> <div><input value="Input" name="name" type="text"><input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <input type=submit name=submit value="My Button"> <input type=submit name=submit value="My Button"><br> <input type=submit name=submit value="My Button"> </div></form> <div><a href="contact.shtml">Hyperlink</a></div> <blockquote><div>This is a blcokquote This is a blcokquote This is a blcokquote This is a blcokquote</div></blockquote> </body> </html> Hi all! I am a bit of a newb to CSS, and could certainly use some help on this slight problem that I can't seem to figure out. Here is the link. And the code is at the bottom as well. If you look closely you will see that in the main page content, the text to the right of the quote is just a little bit further right than text below the quote. I must admit that I find a bit of CSS still quite confusing. I could certainly use any help that all of you could provide. Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
background: #006600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
text-align: left;
color: #FFFFFF;
text-decoration: none;
}
div#head {
background: #FFFFFF;
width: 100%;
height: 100px;
}
div#menu {
text-align: right;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 88px;
right: 50px;
color: #000000;
font-variant: small-caps;
}
div#title {
text-align: right;
font-size: x-large;
margin: 25px;
margin-right: 50px;
font-style: oblique;
}
div#quote {
text-align: center;
font-size: large;
width: 200px;
margin-top: 50px;
margin-left: 10px;
float: left;
}
div#content {
margin-left: 250px;
padding-left: 25px;
padding-right: 25px;
border-left: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
Link 1 | Link 2 | Link 3
</div>
<div id="title">
Welcome to CLA
</div>
<div id="quote">
"This is a quote from some guy who said something profound."<br />
- Leonardo da Vinci
</div>
<div id="content">
<p>Established at the University of California, Irvine in November of 2001, The da Vinci Research Center for Learning Through the Arts builds on the expertise and combined knowledge of faculty in the Arts disciplines, Education, Social Ecology and Medicine to study the nexus of relationships between arts education, aspects of cognitive and social development, civic engagement, and public policy information.</p>
<p>The center fosters interdisciplinary studies that involve appropriate faculty from several other parts of the campus as well as from other institutions.</p>
<p>For more information please contact us: </p>
<blockquote>
(949) 824-8942<br />
Wendy Lee, Assoc. Director<br />
Claire Trevor School of the Arts<br />
University of California<br />
Irvine, CA 92697-2775
</blockquote>
</div>
</body>
</html>
Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Can some explain (briefly) how one goes about specifying CSS styles for different link areas in a page. for example, I want navigation links to have a different set of "rules" than footer links. ted Hi all, I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code: Code:
.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px; border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color. And here is the HTML in question: Code:
<!-- Navigation Level 3 -->
<div class="round-border-topright"></div>
<h1 class="first">TurnkeySolutionsNow</h1> <!-- Navigation with grid style -->
<dl class="nav3-grid">
<dt><a href="whyusetsn.html">Why Use TSN</a></dt>
<dt><a href="productdevelopment.html">Product Development </a></dt>
<dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
<dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
<dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
<dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
<dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
<dd><a href="productdevelopment-industries.html">Industries</a></dd>
<dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
<dt><a href="contact.html">Contact Us</a></dt>
</dl>
<p> </p>
</div>
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues. Any help is appreciated - thanks in advance! Patrick Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. Hi All, I would like to figure out a way to have my menu item font stay a different color if the user is on that page. I thought that the a:active would do the trick, but apparently a link is only active immediately after clicked and does not carry over to the page that was linked. I am trying to stay away from images and javascript because I can't get them to look right against my background, so I was wondering if there was a css way to create this effect without changing every page. I have a header file that contains this menu because I will be updating it frequently with new links and pages and would rather only change it once... thanks! I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it! For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so! If anyone could even just give me the proper name for it so I can google it, I would be very thankful! I need a little assitance here. I'm trying to get something lined up on a WP Template I made with Artisteer, and for some reason, when I edit the inherited attributes in the CSS, nothing seems to change. the url is http://76.76.237.87/test/ If someone with Firebug can tell me where the calendar widget isn't lining up right in the CSS (1st right sidebar), I would be appreciative. I've checked it with FB, and from what I can tell, I've made the corrections needed, but nothing seems to fix it. And yes I've cleared my cache. I know the user can enable printing of bg grcs and colour, this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example, "no system id specified." Quote: Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages. so if I put that system identifier in it then the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence. The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they? I have proprietery attributes also and they are kinda necessary. The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874..... Anyway here is an example http://demo.tixrus.us/98 How can I get this page to print correctly??? Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! |
|||||||