CSS - Firefox Adding Padding To Width
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? Similar TutorialsI am having what seems like the most elementary problem, yet I cannot figure out what is causing it. I am creating DIVs and nested DIVs to position, contain and format my content. And for some reason, adding padding to a style applied to a given DIV is causing that DIV to expand by the amount of padding added. So for example, if I have a style: Code: #contentBox { width: 500px; background-color: blue; } And apply it like so: Code: <div id="contentBox">My content goes here</div> It displays as it should: a blue box that is 500px wide. But if I change the style to add padding to the box likee so: Code: #contentBox { width: 500px; background-color: blue; padding: 10px; } The blue box is now 520px wide (it added the 10 px of padding on either side to the overall width. I thought that the padding was included in the width of a box so that changing the padding would not change the amount of space occupied by that element. Am I wrong or missing something here? hi, i was centering some divs thats 100% width with some padding on both sides, and position absolute it's like 3 layers...the background first is just black, second layer is gray with 10px margin on both sides...next layer has 10 more pixels margin... i see it doesnt work in FF but only IE and Opera...in FF the page gets bigger from the padding HOW can i center these div's instead, i tried without width and now they come very thin...maybe invisable... i also tried with position relative instead of abolute...then some other crazy things happen much respect for the people that helps me with this, its the last bit before my site is ready! I have a css problem with windows 2000 OS. Here's the CSS I have that creates the menu to the left. PHP Code: #nav{ float:left; clear:both; text-align:left; color:#FFFFFF; font-size:10px; height:177px; width:119px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 70px; background: url(http://www.moretanninglotion.com/images/backnav.gif) repeat-y; } The acutal size of the div is supposed to be 189px but the padding isn't getting factored into that when the browerser in windows 2000 renderes it. Does anyone have a hack or an idea of what to do? Below are screen shots of my page. http://www.browsercam.com/public.aspx?proj_id=180419 Hi, The site I'm developing is: http://www.jaysonsgroup.com/index2.html It's only a temporary page..some old <table> tags are in there..which don't validate as XHTML. But, I come across many IE 5.0 - related problems for many of my sites..i.e. even those that validate under W3C etc. So I'm just asking generally, does anyone know a site that has fixes for IE 5.0 bugs? My sites seem to be fine on most browsers except this one. In regard to the above link, I had some major problems with IE 5.0 on the middle area (i.e. the images & text under "news" and "login"). The basic HTML code for that: Code: <div class="outerblock"> <div class="news"> <div class="news_left"><div class="news_left_text">My text</div></div> <div class="news_mid"><img src='images/sinhala.gif' width='431' height='286' alt='' /></div> </div> <div class="login_right"> my login table </div> </div> and the CSS for that: Code: .outerblock { width: 100%; overflow:hidden; display: block; clear: both; } .news { width: 607px; overflow:hidden; float: left; border-right: 1px solid #C5C5DD; } .news_left { width: 163px; float: left; overflow:auto; display: block; background: url(../images/home_worldwide.gif) no-repeat; padding: 110px 0px 0px 0px; } .news_left_text { padding: 0px 0px 0px 5px; color: #3B537D; font-family: Verdana, Arial ; font-size:7.5pt ; font-weight:normal; line-height: 13px; } .news_mid { width: 440px; height: 300px; float: left; overflow:hidden; } .login_right { width: 160px; height: 250px; padding: 50px 0px 0px 0px; float: left; background: #ECEDF2; border-right: 1px solid #C5C5DD; border-left: 2px solid #FFFFFF; overflow: hidden; } One problem I had (on IE 5.0) was that the middle 'news_mid' image was overflowing, positioned just below the 'news_left' area. The widths etc are all correct because the container width is 771px. So the entire area should just fit and not overflow (even though in IE 5.0 it did). The 'news' overflow property was AUTO, and I fixed the problem by specifying the overflow:hidden. Likewise, the 'login_right' div was overflowing just below the entire news section, and not to the right as it should have been. Once again I fixed this by specifying overflow:hidden for the outer div. Is it common to use overflow:hidden for things like this? Or is there a more appropriate fix? Another small problem I noticed for IE 5.0 : http://www.jaysonsgroup.com/ie5win.jpg (screenshot). The login_right background does not extend all the way. The height of the div should be 250 pixels + 50pixels on the padding - so 300 pixels total. But IE 5.0 ignores the 50pixels padding and leaves the background with a height of 250px. Thanks very much in advance! I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container { width:770px; margin:0px auto 0px auto; background:#ffffff; text-align:left; } #header { position:relative; width:770px; height:109px; background-image:url(images/header.jpg); background-color:#ffffff; text-align:center; } div#leftcontainer { float:left; width:190px; background-color:#ffffff; } div.leftcontent { width:190px; background-color:#004994; padding-left:5px; padding-right:5px; } div#centercontainer { margin-top:3px; float:right; width:570px; background-color:#ffffff; padding:0px; } div.centercontent { width:560px; background-color:#ffffff; padding-left:5px; padding-right:5px; } #footer { clear:both; padding:4px; width:770px; font-size:.8em; font-family:arial, sans-serif, courier; color:#ffff00; background-color:#004994; margin:0px 0px 20px 0px; } Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. Hi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code: <style> .foo { width: 100px; padding: 10px; } </style> <div class="foo">Bar</div> Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) 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? 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> 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? 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 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 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> 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 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 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. |