|
CSS - Ie Adding Padding
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. 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? 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 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) 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? 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> 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 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... 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. 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 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? Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie Hello. I have a horizontal nav bar with a background color. When I add left padding it does do that but adds that amount of space onto the right side of the div so it's sticking out of my layout. What am I doing wrong? Here is my code: Code: body {
font-family: Arial, Helvetica, sans-serif;
background-color: #C0BFAB;
background-position: 195px 140px;
margin-left: auto;
margin-right: auto;
width:800px;
}
#header {
position: absolute;
margin-left: 140px;
margin-top: 5px;
width: 790px;
height: 173px;
z-index: 2;
background-image:url(images/header.gif)
}
#topnav {
position: absolute;
margin-left: 140px;
margin-top: 178px;
width: 790px;
height: 17px;
padding-left: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#C0BFAB;
background-color:#786350;
z-index: 31;
}
#main {
position: absolute;
margin-left: 140px;
margin-top: 195px;
width: 790px;
height: 606px;
z-index: 3;
}
#footline {
position: absolute;
margin-left: 140px;
margin-top: 802px;
width: 790px;
height: 13px;
background-color:#786350;
z-index: 18;
}
#footer {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 34px;
z-index: 19;
background-image: url(images/footer.gif);
top: 0px;
}
#bottomnav {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 13px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#786350;
text-align: right;
z-index: 32;
}
.binkwaffle {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
Code: <HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<style type="text/css">
<!--
@import url(binkwaffle_test.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="header"></div>
<div id="main" class="binkwaffle"></div>
<div id="footline"></div>
<div id="footer"></div>
<div id="topnav">home cards faq about contact</div>
<div id="bottomnav">home cards faq about contact</div>
</BODY>
</HTML>
Also the centering doesn't seem to be working. Thanks for the help. Heyhey Probably a very simple solution to this, but I just can't find it. Nesting DIVs and adding padding to the parent, so I can position the DIV within. I'm subtracting the amount of padding I am using from the width and height so that everything else around it will fit ok. Works fine in all browsers, apart from IE 5.5, which ignores the padding (thus making the div too small because of the subtracting of width and height from the parent DIV). Sample code: #holdera { background:url(images/header_banner_a.png) no-repeat; width:80px; height:57px; padding-top:25px; padding-left:80px; float:left; } #buttona { width:62px; height:27px; } I could use margins on the inner DIV instead, but that brings up a problem with Netscape. The DIV positions shift because of no padding on the parent. Real pain, anybody have any suggestions? Cheers (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 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! how do you remove the "padding" of the ul on the left hand side? |
|||||||