CSS - Combining 'float' With Opposite Margins

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.

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

I created to CSS classes and I am applying them to elements like so:
Code:

<div class="IC16 ICR16"></div>

The CSS is the following:
Code:

.IC16 {
	width: 16px;
	height: 16px;
	padding-top: 2px;
	display: run-in;
	cursor: pointer;
}
.ICR16 {
	margin-left: 5px;
	padding-right: 16px;
}

Is there any way I could compress the CSS code above so that ICR16 gets the styles from IC16 (without IC16 losing individuality) so that I only have to use "ICR16" in the example I gave?

For a page I'm writing, when I call a new object, a document.write() line is called in which it writes html/css tags to bring a picture corresponding to that object on the page. The problem is it won't let me change the properties that I normally could, such as .top or .left, etc.

For example, when I make the object "chef" there is a line:

document.write("<div id='chefDiv' style='position:absolute; top:"+this.y+"; left:"+this.x+"; z-index:2'><img src="+this.src+" name='chefbmp'></div>");

Then, in a totally different area of the code I try:

document.getElementById('chefDiv').style.top = 200;

... and the location of the chefDiv does not change. However if I try the code:

alert(document.getElementById('chefDiv').style.top);

... it will bring an alert message that says "407px".

What am I doing wrong here? Is there something different about this because I'm using objects and constructors? Or is it because I'm using document.write(....) instead of directly writing the html in the page?

How can I change the aspects of my chefDiv?

Thanks!
Kevin

Some of you may have seen my other post where I was trying to encorporate css into a JS menu. After some of your thoughts I decided to scrap that and write it in CSS. I am relatively new to CSS. I am not looking for you to code this for me, but maybe give me some ideas on what to try and why I am breaking things .

here is a link to the page with just the code posted below in action: PAGE IS HERE



Here is my CSS:
Code:

/**************** nav coding *****************/ 
#nav1 { padding: 0; margin: 0; list-style: none; line-height: 18; width: 10em; background: #555555; font: normal 12px Verdana;}
#nav1 ul { padding: 0; margin: 0; list-style: none; line-height: 18; width: 100%; font: normal 12px Verdana;}
#nav1 a { margin: 0; display: block; width: 10em; color: #f2f2f2; border-bottom: 1px solid #c0c0c0; text-decoration: none;}
#nav1 ul li a:hover { color: #f2f2f2; background: #8b8b8b; }
#nav1 li { float: left; width: 10em; background: #555555;/* width needed or else Opera goes nuts */ }
#nav1 li ul { /* second-level lists */ 
    position: absolute; width: 10em; left: -999em; border-left: 1px solid #c0c0c0;
    /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav1 li ul ul { /* third-and-above-level lists */ margin: -16px 0 0 10em; }
#nav1 li:hover ul ul, #nav1 li:hover ul ul ul, #nav1 li.sfhover ul ul, #nav1 li.sfhover ul ul ul { left: -999em; }
#nav1 li:hover ul, #nav1 li li:hover ul, #nav1 li li li:hover ul, #nav1 li.sfhover ul, #nav1 li li.sfhover ul, #nav1 li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

#nav-menu ul { list-style: none; padding: 0; margin: 0; font: normal 12px Verdana;}
#nav-menu li a{ float: left; margin: 0;}
#nav-menu li a{ background: url(MenuBackground.jpg) #fff left repeat-x; height: 30px; line-height: 18px; float: left;
                 width: 9em; display: block; border-right: 1px dotted #c0c0c0; color: #f2f2f2; text-decoration: none; text-align: center; }
/* Hide from IE5-Mac \*/
#nav-menu li { float: none; margin: 0;}
/* End hide */

#nav-menu { width: auto; }

here is my page code:
Code:

<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li style="border-style: none;"><a href="#">Contact us</a></li>
</ul>
</div>

 <br><br><br>    

<ul id="nav1">
<li><a href="#">Services</a>
    <ul>
        <li><a href="#">Link 1</a>
            <ul>
                <li><a href="#">Sub Link 1</a></li>
                <li><a href="#">Sub Link 2</a></li>
                <li><a href="#">Sub Link 3</a></li>
                <li><a href="#">Sub Link 4</a></li>
                <li><a href="#">Sub Link 5</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</li>

</ul>

What I am trying to do is make it so that on mouseover the 1 menu system you see, the second menu drops down below whichever element your mouse is on. I keep making it so that my background image is adopted into the lower menu system and I don't want that. I just want the first menu to maintain its look while the second one drops down below it, maintaining its look. (I haven't gotten it to look the way it should in IE yet. FF has a better representation right now)

hello everyone,
does anyone know how can i connect both the outline and the border-radius?
it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?)

code is:

Quote:
outline: #ffc614 solid 5px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;


thank you.

hi,

is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so.
Code:

a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}

a.big {font-weight:bold;}

thank you

Join Date: May 2008
Posts: 2

Firefox bug combining absolute and fixed positioning
Hey helpful people.

I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display.
JavaScript is dealing with the transition.

The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design.

Anyone know a workaround? (webpage and css below)

Code:

<div class="toolbar_O">
  <div class="toolbar_I">
    <!-- top page info -->
    <div class="pageInformation cf">
      <!-- Page Status Info Start -->
      <div class="pageStatus">
        <h4 class="statusLabel">Status: </h4>
        <span class="status">Live</span> </div>
      <!-- Page Status Info End -->
      <div class="RHS cf">
        <div class="toolbarMenu">
          <ul>
            <li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <form>
                    <p>
                      <label for="email" class="expiryDate">Set expiry date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
                    <p>
                      <label for="email" class="liveDate">Set live date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
                  </form>
                </li>
              </ul>
            </li>
            <li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
                  <p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
                  <p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
                </li>
              </ul>
            </li>
            <li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
             <ul class="popup">
                <li>
                  <p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- bottom user functions -->
    <div class="userFunctions cf">
      <!--Left Hand Side Buttons Start -->
      <div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
        <div class="toolbarMenu pageActions">
          <ul>
            <li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <ol>
                    <li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
                    <li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
                    <li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
                    <li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
                    <li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
                    <li><a href="#">Preview</a></li>
                    <li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
                  </ol>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- Left Hand Side Buttons End -->
      <!-- Right Hand Side Buttons Start -->
      <div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
      <!-- Right Hand Side Buttons End -->
    </div>
  </div>
</div>

Code:

div.toolbar_O { 
	background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
	border: 1px solid #3a8ea8;
	padding: 9px 0px;
	width: 729px;
	color: #0a3b3f;
	font-size: 0.9em;
	position: fixed;
	bottom: 20px;
	left: 100px;
	height: 82px;
	}
body.editMode div.toolbar_O {
	position: relative;
	left:0;
	bottom: 0;
	float:right;
}	
	
.toolbar_O .toolbar_I {
	border: 1px solid #073f58;
	background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
	margin: 0px 9px;
}


.toolbarMenu ul li a, 
.toolbarMenu ul li a:visited {
	font-weight: bold;
	color: #77aeb5;
	border: 1px solid #287e95;
	text-decoration: none;
	padding: 4px 5px 6px 5px;
	background: #e6f4f5;
	color: #0a3b3f !important;
	display: -moz-inline-box;
	display: inline-block;
	height: 13px;
}

.toolbarMenu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	margin: 0;
}

.toolbarMenu ul li {
	float:left;
	position:relative;
	margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
	margin: 0;
	font-size: 0.9em;
}
.toolbarMenu ul li ul {
	visibility: hidden;
	position:absolute;
	bottom: 27px;
	left:0;
	padding: 5px;
	background: #ebf6f8; 
	border: 1px solid #2e869c;
	margin: 0;
	z-index: 1000;
	font-size: 1em;
	text-align: left;
}

.toolbarMenu ul .moreArrow {
	display: -moz-inline-box;
	display: inline-block;
	padding: 6px 8px;
	width: 1px;
	margin-left: 10px;
	border-left: 1px solid #89abb7;
	background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
	visibility: visible;
	
}

.toolbarMenu ul li.versions.open ul {
	width: 250px;
}

div.toolbar_O .toolbarMenu ul li.open a {
	color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
	background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
	padding: 6px;
	height: 25px;
}
 
.toolbar_O .pageInformation .pageStatus {
	color: #FFF;
	font-size: 1.3em;
	width: 170px;
	float: left;
}
.toolbar_O .pageInformation .RHS {
	float: right;
}
h4.statusLabel {
	height: 100%;
	display: inline;
	text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label, 
div.toolbar	_O div.userFunctions .label {
	width: 75px;
	float: left;
	text-align: left;
}
div.toolbar_O div.pageInformation .value, 
div.toolbar	_O div.userFunctions .value {
	font-weight: bold;
	text-align: left;
	float: right;
	vertical-align: top;
	width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
	width: 80%;
}

/* bootom part of toolbar */
.toolbar_O .userFunctions {
	padding: 8px 0;
	height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
	float: right;
	margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
	float: left;
	margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp, 
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
	padding: 5px 5px 5px 25px;
	margin: 1px 5px 0 0;
	background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
	float: left;
	border: 1px solid #287e95;
	text-decoration: none;
	font-weight: bold;
	color: #0a3b3f;
	height: 12px
	
}
.toolbarMenu.pageActions {
	float: left;
}
.toolbarMenu ol {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 60px;
	list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
	min-height: 8px;
	display: inline-block;
	border: none !important;
	color: #0a3b3f !important;
	font-size: 1.2em;
	background: none;
	}
div.toolbar_O div.toolbar_I a.pageNotes {
	font-weight: bold;
	color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
	color: #FFF;
}

/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	border: 1px solid #287e95;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	text-decoration: none;
	height: 12px;
	padding: 5px 15px 5px 0;
	background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
	display: -moz-inline-box;
	display: inline-block;
	color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
	background-color: #135d82;
	border: 1px solid #FFF;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}



li.otherPageActions ul,
li.otherPageActions ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}

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!

Hello,

I have the following issue. I need to create a full screen gray div with another white div inside it, positioned with 5 pixel margin. Basically it looks like a white div with 5px border around it. That wouldn't be a problem after i set body and html height to 100%, but here's what breaks: i add the first gray div (relatively positioned) and make it's min-height: 100%, then add lots of text and see if it autoexpands. It does! Now i add another absolutely positioned white div inside of it and set its position to 5px from each side. And now everything breaks ... doesn't autoexpand ... at least in opera. Here's the css:

Code:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#maindiv {
    position: relative;   
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #777777;
}
#fullscr {
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    background: #FFFFFF;
}

<div id="maindiv"><div id="fullscr">
lots of text with linebreaks
</div></div>

Does anyone have any ideas how to make it work?

Hi, I have a list item that extends onto a second line. How do I keep the second line the indented more than the first line?

thanks
-S

Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation)

http://section31.us/temp/tortilla/tortilla.html

Note: This works fine on firefox, but goes ape**** on IE.