|
CSS - Ie6 Doubling Padding
EDIT: Fixed
[s]Anyone know why that ie6 keeps doubling the padding to the left of the that avatar image on the top [/s]http://new.gifdump.com/ Similar TutorialsPlease bear with this CSS learner...again Am trying to understand why IE adds extra spacing at times, while other times doesn't. As opposed to Firefox doing it right all the time. Is there something I'm doing wrong or missing? Here is my code(all comments included) Code:
<html>
<head>
<title>Dude's Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: center; /*IE hack for margin: auto;*/
}
#area {
background: #F5F5F5; display: table;
width: 776PX;
margin: 0 auto;
padding: 0px;
text-align: left;
}
#header {
float: right; width: 100%;
margin: 0; padding: 0;
background: white;
}
#header img {
margin: 5px 0 5px 5px; padding: 0;
height: 67px; width: 440px;
border-style: none;
}
#header h2 {
float: right;
text-align: center;
font-size: 18px; width: 38%;
border: 3px solid black;
margin: 15px 5px 0 0;
}
#toplinks {
background: #D3D3D3;
margin: 0; padding: 0;
line-height: 25px;
}
#toplinks a {
display: block: float: left;
padding: 0 10px; margin: 0 2px;
color: darkblue; text-decoration: none;
font-size: 16px; font-weight: bold;
vertical-align: middle;
border: 4px double gray;
}
#toplinks #firstlink {
margin-left: 10px;
}
#toplinks a:hover {
background: white; color: blue;
}
#menu {
float: left; margin: 20px 5px 0 5px;
background: white; width: 20%;
border: 1px solid black; border-width: 0 1px 1px 1px;
}
#menu a {
display: block; text-decoration: none;
border-top: 1px solid black;
padding: 5px; margin: 0;
font-size: 12px; color: black;
}
#menu a:hover {
font-weight: bold;
background: #EEE;
}
#maincontent {
float: left;
margin: 0; padding: 0;
width: 78%;
background: white; color: #191970;
font-size: 15px;
text-align: justify;
}
#maincontent h2 {
font-size: 20px; text-align: center;
padding-top: 20px;
}
#maincontent h3 {
font-size: 18px; padding-left: 15px;
}
#maincontent p {
padding: 0 20px;
line-height: 1.3em;
}
#maincontent img {
float: right;
width: 132px; height: 90;
margin: 0 20px 0 0; padding: 0;
border-style: none;
}
#maincontent ul {
padding-bottom: 30px;
}
#maincontent li {
padding: 0 20px 5px 5px; line-height: 1.3em;
}
</style>
</head>
<body>
<div id="area">
<div id="header">
<h2>Serving blah blah State Since blah</h2>
<a href=""><img src="Logo.gif" alt="Logo" title="Logo" /></a>
</div> <!-- end header -->
<div id="toplinks">
<a href="" id="firstlink">First top link</a>
<a href="">Second</a>
<a href="">Third</a>
</div> <!-- end toplinks -->
<div id="menu">
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</div> <!-- end menu -->
<div id="maincontent">
<h2>My Margin or Padding or Whatever Dilema.</h2>
<p>I am getting oh so very confused regarding why IE is adding extra space from the sides on only SOME of my images/div/headings and not others---as opposed to Firefox doing everything perfectly. This is pretty much my exact stripped down page. Notice below list of Minor Annoyances plaguing me. Yeah, sure, I could simply let things be cause, hey, it still works...but I am nagged why perfect browser harmony cannot be attained.</p>
<h3>List of Minor Annoyances</h3>
<ul>
<li>Notice in top header section: IE makes my h2 with border twice the width from the right than I would like. </li>
<li>In top header section: Logo looks great on left and top, but twice the space from bottom in IE.</li>
<li>Top links: spacing is perfect in both browsers(go figure).</li> <li>Onto side menu: space from top is perfect. IE space on left side is twice what's wanted.</li>
<img src="" alt="Front Desk" id="frontdesk" />
<li>Now image sitting here to right: IE puts no padding between letters and image. I could add margin: ; to the img, but that further increases my firefox space.</li>
<li>And, well, okay, that's it. Just wanna understand this IE extra spacing thing.</li>
</ul>
</div> <!-- end maincontent -->
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div> <!-- end area -->
</body>
</html>
Any input/advice is appreciated...Thanks, James Btw, can I size these code boxes? It's huge. Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? Around this dropdown image? http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm I have padding and margins all set to 0... Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told: "Basically you want to add more white space between the vertical line and the text" How would I go about doing this? The site Im talking about is: www.ohiocichlids.com Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward. ??? Any help will be greatly appriciated. Hi there, I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div. This is the code I am using: PHP Code: #related_links{ width: 165px; height: 237px; background-image: url('images/related_bg.jpg'); background-repeat: no-repeat; float:right; padding-right: 10px; } #related_inside{ padding: 10px; } #content{ padding-right: 10px; } #content_inside{ padding: 10px; } PHP Code: <div id="related_links"><div id="related_inside">right hand text</div></div> <div id="content"> <div id="content_inside" >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div> I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu. I have a ul that contains my menu list. The CSS and xhtml are as follows: Code: /* Menu */
li {
border: 1px solid #000000;
border-bottom: 0px none;
display: inline;
line-height: 14px;
margin: 0px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
}
ul#menu {
background-image: url(img/menu.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
background-position: left bottom;
vertical-align: text-bottom;
}
/* End Menu */
<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>
(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.) the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work. to see what i'm talking about if my words are il formed (as they often are) click here. to view the CSS click here. 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. how do you remove the "padding" of the ul on the left hand side? (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! 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. 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>SiteDevs • Home</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:url(background.png) repeat-x;
margin:40px 0px 0px 0px;
font-size:12px;
color:#000;
}
div#content{
width:700px;
background:#FFF;
margin:0px auto;
height:100%;
}
div.bottomLeft {
background: url(bottomLeft.png) 0 100% no-repeat;
}
div.bottomRight {
background: url(bottomRight.png) 100% 100% no-repeat;
}
div.topLeft {
background: url(topLeft.png) 0 0 no-repeat;
}
div.topRight {
background: url(topRight.png) 100% 0 no-repeat;
}
div.left {
background: url(middle.png) left center repeat-y;
padding-top:15px;
padding-bottom:15px;
}
div.right {
background: url(middle.png) right center repeat-y;
padding-top:15px;
padding-bottom:15px;
margin-left:-15px;
margin-right:-15px;
}
div.top {
background: url(topMiddle.png) top center repeat-x;
margin-left:15px;
margin-right:15px;
}
div.bottom {
background: url(bottomMiddle.png) bottom center repeat-x;
}
</style>
</head>
<body>
<div id="content">
<div class="bottomLeft">
<div class="bottomRight">
<div class="topLeft">
<div class="topRight">
<div class="top">
<div class="bottom">
<div class="right">
<div class="left">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Validates. Problem is this Any idea? Hi all, My CSS for a <DIV> is: Code:
.title {
width: 350px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
When I enter text in the DIV, it shows a bit to the right of the left border, which is what padding property is supposed to do! The problem is, in Internet Explorer, this "shift" is PERFECT and there is no extension beyond the right border, but in Firefox, the background color can be seen extended 10px to the right border. I searched on internet and people called it a problem with I.E. Everywhere I visited, people seemed to curse a Microsoft product and give a line of code, "DOCTYPE" etc to force I.E. to change mode and behave like Firefox. Those guys dont understand that what the coder wants is a solution so that Firefox shows the DIV exactly like I.E. 1) So please! Stop cursing I.E. and give solution as to how to modify the code...! 2) A person said that the width is calculated as: width + padding + margin. In my case, since margin is "0", the suggession seemed to use the following code: Code:
.title {
width: 340px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
i.e., subtracting the padding-left from width. But that makes "no sense" because if we do the above, it should do nothing but to just change the width of the DIV, and so the end result would be that in Firefox, instead of spanning to 360 px horizontally, this would cause it to span in 350px horizontally. Keeping in view that its the "only" DIV on the page, setting the width parameter should not be a problem. 3) Now, if Firefox follows standard, then how will firefox ever show the padding property correctly if the above scenario is considered...! 4) Microsoft may not follow the standards sometimes, but the result "is" userfriendly most of the times...! Thanks! Hi there, I am trying to add some padding to my inputs, but the padding is being ignored by IE. This is my CSS: PHP Code: INPUT { background-color:#FFFFFF !important; border: 1px solid #ececec; padding: 10px; } Any ideas why it is not working? I have a beautiful looking site when viewed in Firefox but I am having some problems with Internet Explorer (surprise, surprise!) http://cbo4edu.org/newSite/index.html I want the Headings, OUR MISSION and CBO NEWS to be lined up just below the navigation div. In Firefox, my CSS and padding renders perfectly, with the background on OUR MISSION blending in with the navigation div's bottom border. In IE, these headings are mostly hidden behind the navigation div. How can I adjust my CSS for IE without disturbing the Firefox version? just read a post on ALA regarding how to create a simple thumbnail gallery using CSS. while the styling of the CSS provided on ALA seems to render the same on both FF and IE, the original code renders slightly different. everything seems to work fine except for the padding around the caption, underneath the image. there is more space around then caption when viewed in IE. please look at this link where the html file and css are hosted - (view source) can you make out anything that could be adjusted to fix this tiny bug? really appreciate if you could help out a little here. been at this for the last couple of days, and now really dead with any ideas to fix this tiny issue :-/ thanx for your time, z looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code:
.topa { width: 1000px; padding: 5px; background:#000000 }
edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. |
|||||||