CSS - Issue: Margins And Borders

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!

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.

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 All,

I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this,

margin:0px 31px 0px;

Is it top,right and bottom?

Thanks

Prena

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!

Hi,

My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin:

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</body>
</html>

CSS:
Code:

div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}

The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve.

Can anyone help me with this?

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

ok 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.

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.

Hello.

I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however.

Anyway, on to the issue I'm having.

I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE.

The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either.

Here's the style definition:

Code:

.newsTypeSection{
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	display: inline;
}

the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it.

Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE.

URL

The bottom is what shows up in IE8, and probably other version of IE as well.

Can anyone help me with this? It's beyond frustrating.
Please let me know if you need more information. I can't link to the page because it's not public at the moment.

i have a left margin of 5px on the navigation links that pushes them away from the edge. however. However, for Corporate Leadership and board of directors, the second line does not indent. How can I fix this?

http://zettalogica . com/fulcrum/index.html

Also, if anyone has an opinion, do you think it would be better to keep the text for that line the same size as the other links, or would you make the text smaller so that the bar itself is the same height as all the others in the navigation.

Thank you

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?

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 .