|
CSS - Firefox Padding Around Table Inside Div
Code:
-- HTML
<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>
-- CSS
/* Dashboard */
#Dashboard {
border: 1px solid #b5bfbf;
padding: 2px;
}
/* Overview Table */
#Overview {
width: 100%;
border-collapse: collapse;
height: 50px;
background-image: url(../images/dashboard/overviewtable_bg.png);
background-repeat: repeat-x;
}
#Overview td {
padding-top: 8px;
padding-left: 5px;
border: 1px solid #b5bfbf;
margin: 0;
}
#Overview td.Detail {
width: 45px;
}
#Overview span {
font-size: 20px;
font-weight: bold;
display: block;
margin-top: 2px;
}
so there is a DIV with a 2px padding on the inside. But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right. I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous. I am not sure what the issue is? edit: screenshot: http://ricebox.whiteazn.com/tabpadding.png Similar Tutorialsi have an iframe that points to some random ad pages, but the ads that come up are basic html and the browser gives them some default padding. is there a trick (besides editing the actual HTML in those ad pages) to make that padding go away? Hi, so basically I have a problem with padding in css. For example, when I use padding-left 15px then in IE it moves the specific stuff from left to right exactly 15 pixels but in FF it moves almost everything 15 pixels. I would post an example-image here but the forum wont let me cause I'm new so we'll just have to deal with the text. Any possible solution would be helpful so post here, I'm keepin' this link in my bookmarks. (see attached) CSS Snippet Code: #contentBox{
float:right;
padding:0;
margin:17px 15px 0 0;
width:423px;
/* overflow:hidden; */
}
#content{
background:url(images/layout/content_bg.gif) top left;
margin:0;
padding:15px 15px 0 15px;
width:393px;
overflow:hidden;
}
* html #content {
width: 423px; /* for IE5 and IE6 in quirks mode */
w\idth: 393px; /* for IE6 in standards mode */
}
#contentTop{
background:url(images/layout/content_top.jpg) top left;
padding:0;
margin:0;
width:423px;
height:41px;
overflow:hidden;
}
#contentTop h3{
padding:15px 0 0 0;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:14px;
color:#036;
}
#contentBottom{
background:url(images/layout/content_bottom.gif) top left;
padding:0;
margin:0;
text-indent:-15000px;
width:423px;
height:28px;
overflow:hidden;
}
HTML Snippet Code: <div id="contentBox"> <div id="contentTop"><h3>What Is The Shalom Foundation?</h3></div> <div id="content"> <p>The Shalom Foundation is a non-profit 501(c) (3) organization dedicated to providing financial support for under-privileged children and their families in the United States, Central and South America.</p> <p> We are dedicated to providing basic educational opportunities, home construction and repair for families at risk, essential food and clothing needs and medical support and assistance for critical as well as basic healthcare. </p> <p>The Shalom Foundation seeks funding through personal donations, corporate contributions and special event fundraisers. Contributions to The Shalom Foundation are 100% tax deductible.</p> <p>If anyone has material possessions and sees his brother in need but has no pity on him, how can the love of God be in him? Dear children, let us not love with words or tongue but with actions and in truth. 1 John 3:17-18</p> </div> <div id="contentBottom"></div> </div> Now, why on earth are they different!?!? Thanks in advance! I'm working on a proof of concept, to be able to create a rounded edge button that will expand with the text on it. To do this I've been using a button tag with a span inside it, such as: Code: <form onsubmit="return doSomething()"> <input type="text" name="textfield" /><br /> <button type="submit"><span>Button Tag and a really long blah</span></button> </form> Unfortunately, IE and Firefox put some default padding on their buttons which is hard to get rid of. With some fiddling, I got this: Code: BUTTON {
background:url(btn_right.jpg) no-repeat top right;
padding: 0px;
border: none;
width: auto;
overflow: visible;
}
BUTTON SPAN {
background:url(btn_left.jpg) no-repeat top left;
display: block;
padding: 15px 25px 25px 20px;
margin: 0px -3px;
white-space: nowrap;
position: relative;
top: -1px; /* for Firefox */
}
* HTML BUTTON SPAN { margin: 0px; top: -2px;} /* for IE */
Looking at it in Opera 9, the same top: -1px that makes it work in Firefox is what breaks it in Opera. Past browser detection and serving different stylesheets, is there an easy way to make this work for both Opera and Firefox? CSS pisses me off. Just about every new class I implement, I have to debug it for either IE or Firefox. I can't figure this one out, anybody wanna help? In Firefox, when I use padding on the #inner-box instance, the container overflows. It should only extend to the end of the white line. It works fine in IE. http://www.rhizaowns.com/holly/index.php It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left... Thanks in advance... This is my HTML code: Code: <div id="ManagerFastMenu" style="padding:5px;margin:0px;border-width:1px;border-color:#2D3B72;border-style:solid;background-color:#FFF;"> <!-- Buuton --><a href="/Editor.asp" class="SiteB">Edit here</a><!-- Buuton --> <!-- Buuton --><a href="/index.asp" class="SiteB">Edit</a><!-- Buuton --> </div> This is my CSS code: Code:
.SiteB,
a.SiteB,
a.SiteB:visited
{
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#2D3B72;
display: inline;
padding-top:10px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
white-space: nowrap;
cursor:pointer;
text-decoration: none;
}
a.SiteB:hover,
a.SiteB:focus,
a.SiteB:active
{
border-color:#000000;
background-color:#6280F6;
text-decoration: none;
}
Somehow Firefox don't recognize this too: Code: padding-right:10px; padding-left:10px; Why? Hi I'm having a problem with padding <a> tags in firefox i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues? here is my code: Code: <html>
<head>
<style type="text/css">
.mybox {
border: 1px solid #000000;
}
.buttonbox{
/*padding: 5px;*/
}
.buttonbox a{
padding: 5px;
background-color: #33F4FF;
border: 1px solid #FF0000;
}
.buttonbox a:hover{
background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>
I have a menu structure that I am trying to create with CSS. The features I want are the following:
Variable width elements
Resizable text from user
Image at left of link
I have an example page up he URL I've got it working with a table, but when I've tried with a unordered list, I start having problems. Here's what is happenning: Firefox -- when I put padding on my anchor tags, the anchor elements expand outside of the list item elements. Firefox -- anchor elements don't expand to the full width of the list item element. Internet Explorer -- IE seems to only allow for fixed/percentage with list item elements. Is there a way to allow for variable width elements? Thanks for the help! -- Doug Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
I'm just playing around with some HTML and CSS for my student home page. I'm trying to use divs only, without the aid of any tables. All seems to be going well, except for my content area. I cannot post a link, becuase I'm a new user, but here is the page I'm working on: http://students.uww.edu/beghindb27/. The page is CSS and HTML validated properly, but only views properly in IE 6, not Firefox. In Firefox there appears to be a 10px padding below the content_top and above the content_bot divs. This should not be there, and does not appear in IE. In the past I've been able to remove this by using "!important" in my CSS to have Firefox ignore the accepted padding, but I'm looking for a better way to fix this, or the actual reason these paddings are showing up. CSS: Code: <style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
</head>
<body>
<div align="center">
<div id="header"></div>
</div>
<div align="center">
<div id="content_top"></div>
<div id="content_mid_wrapper">
<div id="content_mid">
<p align="justify">
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, what is the point? Look, we all know who is at fault here, what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Huh? No, what the **** are you... I'm not... We're talking about unchecked aggression here, dude.<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: What the **** is he talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: My rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Forget it, Donny, you're out of your element!<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, the chinaman who peed on my rug, I can't go give him a bill, so what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about? The chinaman is not the issue here, Dude. I'm talking about drawing a line in the sand, Dude. Across this line, you DO NOT... Also, Dude, chinaman is not the preferred nomenclature. Asian-American, please.<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, this isn't a guy who built the ****ing railroads here. This is a guy...<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, he peed on my rug!<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: He peed on the Dude's rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Donny you're out of your element! Dude, the Chinaman is not the issue here!
</p>
<p><font size="6">beghindb27 [at] uww [dot] edu</font></p>
</div>
</div>
<div id="content_bot"></div>
</div>
</body>
</html>
Thank you. I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS.. Code: <div class="im_left"> <div class="im_container"> <div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div> <div class="im_info"> 164149536 </div> <div class="clear"></div> </div> <div class="im_container"> <div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div> <div class="im_info"> Incomplete Gamer </div> <div class="clear"></div> </div> </div> Code: .im_left {float:left; width:270px;}
.im_container {
margin:0 0 0 30px !important;
border:1px solid #900;
}
.im_container a:link,
.im_container a:visited,
.im_container a:active,
.im_container a:hover {color:#FFF;}
.im_logo {
margin:0px 0 0 0;
float:left;
width:30px; margin:0px; padding:0px;
}
.im_logo img {border:0px; margin:0px; padding:0px;}
.im_info {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 5px;
text-align:justify;
width:200px;
float:left;
}
.im_title {
text-align:center;
font-weight:bold;
}
I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. is it possible to add table padding in the same way it is applied to divisions etc given the following code Code:
<table class="forums">
<tr>
<td></td>
</tr>
</table>
<div class="forums"></div>
Code:
.forums
{
padding: 10px;
}
Using the above gets to different sizes as the padding it not applied to the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've taken out a snippet of the code thats not working and put it into a page here, both validate (sorry I didn't make them links as I'm a new user and it won't allow me to): ucair.cs.uiuc.edu/pdovyda2/test.html ucair.cs.uiuc.edu/pdovyda2/test.html Basically there should be 8px of padding on the table with class 'innerbox', and it works fine in FF but in IE it ignores the padding completely. I can't seem to figure out what the issue is, it seems like it should work just fine, any ideas? Thanks! I searched the forum before posting but didn't find anything. This is a fairly straight-forward problem, but it's one that I can't find a solution to. The site I'm working on is centered in the window. The body has a 3600x1 pixel background image repeating vertically that is also centered in the window. The layout of the site depends on this background being in the right place. In every browser I've tested so far, the site layout lines up perfectly with the background image, and all is good. But in Firefox 1.5 and Firefox 2.0 (both on Mac), the centered container div sits one pixel to the right of where it should be. Is this a known bug with Firefox? I'm including the code for the body tag and the container div, even though a quick glance will show that it's pretty standard stuff: Code: body {
font: 12px/1.5 "Lucida Grande", Helvetica, Arial, sans-serif;
color: #363636;
background: url(body_bg.gif) top center repeat-y white;
text-align: center;
}
#container {
margin: 0 auto;
width: 720px;
text-align: left;
}
Any help at all would be terrific. Thanks. Note: I changed the title of this post in the hopes someone will help me. |
|||||||