CSS - Making A Table Ignore Margins

Hey guys, I'm having some trouble getting a table to stretch to 100% of the browser height.

It seems to work in IE but not in netscape. Any suggestions?

Here is what I'm doing in headder tag:

Code:

<style type="text/css">
		html,body { height:100%; }
		.outer{ height:100%; } 
	</style>

Then in my code for the table I have this:
Code:

<table width="808" border="0" cellspacing="0" cellpadding="0" class="outer">

Should I try using a DIV tag instead? Please let me know if you have any suggestions.

Thanks!

i have tried margins and padding but its not working!

Code:

.contenttable {
	font-family: Verdana;
	font-size: 12px;
	color: #606060;
}
.contenttable tr {
	margin-top:10px;
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:10px;
}

the table is here.

any ideas how i can improve it otherwise, after the <tr> margins are fixed?

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,

I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it.

Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1">
everything I have tried, I have had no success with.

Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked)

Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know.

TorqueSRO - Click Me

Am I commenting lines incorrectly?

If I prefix a line with two slashes // in the CSS, firefox will ignore it.

IE will recognize it and perform the CSS styling.

For instance: Code:

table.myTable tr td
{
    background-color: red;
    //background-image: url('mypic.jpg');
}

The TD element will not have a background in firefox. It WILL have the background image in IE.

P.S. I am using IE8 on Win7 RC1 (build 7100).
Thank you

i have a table with several header columns:
Code:

<table>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
<tr><td colspan=3>empty info</td></tr>
</table>

now i want to put a border inbetween the cells, to do this i simply used:
Code:

table th {
    border-left:1px solid black;
}

except this adds a border to the left hand side of the far left cell, making the table border of 1px actually 2px
if i give that end cell an id can it be ignored when applying the left border?
or would i have to add the lines:
Code:

table th#idname {
    border-left:0px;
}

Two questions:

1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements?

2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div.


thanks

Sorry for the slightly ambidgious title, hard to explain my issue.
Two clips of code below, the div "test" relates to an Rss feed i'm pulling in through the javascript below. A class is automatically applied to the RSS when it loads. However, it is being displayed as a bullet list despite the stylesheet having no reference to a bulleted list.

It seems to be due to the fact it sits within a <li> class. But is there a way to tell it to ignore any style in above classes? Aim being so it loads without being in a bulleted list.

Code:

 <ul id="column3" class="column">
            <li class="widget color-orange">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <div id="test"></div>
                </div>
            </li>

Code:

<script type="text/javascript"> $(document).ready(function () { 	$('#test').rssfeed('http://www.fmuforum.com/index.php?app=core&module=global&section=rss&type=forums&id=2', { 		limit: 5 	}); }); </script>

Thanks in advance

Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at:
67.207.72.2/test_styles.htm (forum rules won't let me include this as a url)

The css file for this page is at:
67.207.72.2/css/test_styles.css

My issue is that the right column stops short- I'd like the background color to continue down the length of the page.

To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color.

IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change.

I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked.

Can anyone point me in the right direction? Thanks for your time.

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?

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

Hey, I am currently learning how to do layouts in pure CSS and am running into a few problems. Some of these i've cleared up, but i'm still learning obviously. My currently issue is that margin / top settings are not consistent throughout browsers.

Example: in FF/Mozilla a margin setting or "top" pixel setting is "lower" than in IE.

The reason for this is, apparantly, when margins are set to zero my lower div table actually rides up "under" the above div's bottom border, this creates an offset of 5 pixels when setting margins, etc. Whereas, in IE, the div sits directly beneath the 5px border, as I would assume it should.

Here are the files i'm using:

1) Webpage: http://www.binjured.com/index2.php
2) CSS File: http://www.binjured.com/style2.css

important css (as i see it) a #nav, .top, .main (these are all near the bottom of the file, if you wish to skip extraneous code). I am trying to understand WHY css does the things it does and how I can make it do the right thing. Any help would be extremely appreciated. Finally, there may be some extraneous code that those who know css, know does nothing. It's in there because I am trying to "debug" it but i'm completely lost for the answer now .

I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8?

My html:


Code:

<!-- show_menu2 -->
 <ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">

    <li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
    <li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
     <ul class="ullev3">
        <li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
        <li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>

        <li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
        <li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
     </ul>
    </li>
    <li><a href="#" class=" navlev2" title="AMASP">AMASP</a>    </li>
    <li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>

    <li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
 </ul>

  
          </div>
                          <!-- end of subnavigation --> 

My CSS:
Code:

#submenu
{
	padding: 0;
	/* [disabled]width: 247px; */
	/* [disabled]position: relative;
*/
	/* [disabled]left: -15px; */
}
#submenu a
{
	text-decoration :none;
	color :#5b9acf;
	padding-left :12px;
	display :block;
	background-image: url(../images/bullets_micro/square3.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu a:hover
{
	color :#003366;
	background-image: url(../images/bullets_micro/square1.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
	border: none;
}
#submenu a.menu-current
{
	font-weight :bold;
	color :#003366;
	background-image: url(../images/bullets_micro/asst3.gif);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}
#submenu ul
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	/* [disabled]margin-left: -25px;
*/
	/* [disabled]position: relative;
*/
	/* [disabled]left: -10px;
*/
}
#submenu ul li
{
	padding :5px 0;
	/* [disabled]line-height :1.4em; */
	font-size :12px;
	list-style-type :none;
	border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
	padding: 0px 10px;
}
#submenu ul li li
{
	border-bottom :none;
	padding-bottom :0px;
	font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
	color :#003366;
	background-image: url(../images/bullets_micro/diamond4.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu ul li li a:hover
{
	background-image: url(../images/bullets_micro/diamond.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
	color: #6DB9FA;
}
/* ====================== */

My test page: (pardon the blue background I just added this to see the container.)
http://new.ssmarts.org/page.html


Thanks so much.

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!