|
CSS - Why Does Margin & Padding Create A Side Scroll Bar
Ive been using styles for years now but only in a limited fashion - being very aware of some browsers problems with some of the styles but now I want to dive in head first & create full xhtml pages WITHOUT the use of tables (5 years is enough). Anyway Im playing with setting up a layout using only div tags & I was playing with the margin & padding tags. My question is this:
Why does a div set to a width of 100% create a side scrollbar in the browser when any right or left margin value is used? I have also seen the exact same problem with padding when applied to the left or right. Shouldnt the margin or padding be inclusive in the 100% width? What I have ended up having to do is nest a div within a div, setting the inner div's margin (or padding) to some amount & then leaving the padding &/or margins on the outer div set to 0. Its kind of starting to remind me of nesting tables. Am I doing something wrong or is this normal. Ive tested this in Firefox, IE, Mozilla & OPera - all with the same results thanks! Similar TutorialsHi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. This might be a newbie question. There is a extra space on the top of the side bar in IE and not in FireFox Probably a browser style issue, however I do not know what to over-write. Example is at the following. holzgreen.com/padding/ Thanks for looking. Hi! Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better? P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding? Thank you Okay, So here is the situation and it has had me stumped for 2 days. I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8. Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE. Why would there be a difference between a local view and an online view in IE? I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround? For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results. Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy. Any other ways to achieve the same result? Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
#container{
margin: 0px;
padding: 0px;
width: 1000px;
background: #ccc;
}
.block {
background: #0ff;
float: left;
height: 100%;
margin: 10px;
text-align: left;
width: 230px;
}
.block2 {
background: #0ff;
float: left;
height: 100%;
padding: 10px;
text-align: left;
width: 230px;
}
</style>
</head>
<body>
<p>First:<p>
<div id="container">
<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>
<div class="block">ddd</div>
</div>
<p>Second:<p>
<div id="container">
<div class="block2">aaa</div>
<div class="block2">bbb</div>
<div class="block2">ccc</div>
<div class="block2">ddd</div>
</div>
</body>
</html>
Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T I am using TinyMCE and the ENTER button makes the newline and new paragraph. I read the TinyMCE docs and it says I can make the <p> attribute have a smaller gap between line by using CSS p {margin:0; padding: 0;} How do I implement this please? Here is my code for the html headers : Code:
<html>
<head><title>Strikeforce - Newsletter</title>
<!-- tinyMCE -->
<script language=\"javascript\" type=\"text/javascript\" src=\"tiny_mce/tiny_mce.js\"></script>
<script language=\"javascript\" type=\"text/javascript\">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : \"textareas\",
theme : \"simple\"
});
</script>
<!-- /tinyMCE -->
</head>
<body bgcolor=#C0C0C0>
<font face=Tahoma size=2 color=#6A6B03>
<style type='text/css'>
<!--
A:link {color:#6A6B03; text-decoration:none}
A:visited {color:#6A6B03; text-decoration:none}
A:active {color:#6A6B03; text-decoration:none}
A:hover {color:#000000; text-decoration:underline}
-->
</style>
TIA First time poster here - bear with me! I've used the CSS Validation link, and have come to find the developer of the theme I'm using has some sloppy code that needs cleaning up, although I'm not so certain that's the cause of my dilemma. Let's get some basics out of the way: My current theme is supplied for WordPress (Yes, I'm using WordPress too) My current browser is Google Chrome (I experience the issue in Firefox and IE as well) I've tried requesting help on the WP forums, but they redirect posters to third-parties for assistance with what they label "fundamental formatting". I've tried several Google searches to no avail (not sure my current theme title is actually the problem) To be more specific, I seem to be having issues with excess margin/padding on my theme, and haven't a clue how to remove it. When uploading a background image, the right side of the image seems to "crinkle" and looks absolutely hideous. When I change the background color of theme (via theme settings in the WP dashboard), I can see a substantial amount of space on the right side of the screen, which appears to be an issue with excess margin or padding (not sure which, if either). I've performed at least a dozen searches, and haven't been able to find a solution to the problem, let alone someone with the same issue. I should also mention I'm using a widescreen 1980x1080 resolution, however the problem persists even with a different resolution. Expanding the background image only worsens the "crinkling" and shrinking it just looks plain silly. Adjusting the background color of the site seems to help with the odd margin/padding, (rendering it invisible by giving it the same exact color as the image) - but this still leaves me unable to customize my background image further, only being able to have graphics or additional imagery on the left side. I'm not exactly the most "advanced" user of CSS. I have limited knowledge, but can typically troubleshoot the most basic issues (centering text, adjusting positioning of content, etc). If this post doesn't provide enough information, by all means, say so! You can have a look-see at my site -> ImperiumUO [dot] com. I appreciate any and all effort this community may provide in getting this annoying issue resolved. I am trying to create some margin inside the "idag, poll and content" boxes but whatever I try I can not seem to get it working. The text keeps pushing against the edge of the boxes. This is the CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}
#header {
margin: 0 0 15px 0;
}
#idag {
float: left;
width: 510px;
margin-right: 5px;
background-color:#FFFFFF;
}
#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}
#content {
float: left;
width: 340px;
}
#footer {
clear: both;
}
.left {
width: 510px;
margin: 0 0 0 0;
}
.middle {
width: 340px;
margin: 0 0 0 0;
background-color:#FFFFFF;
}
.right {
width: 130px;
margin: 0 0 0 0;
}
body {background: url("../images/body.jpg") repeat;}
img {border: 0px;}
hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}
a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}
This is the HTML: Code:
<html>
<head>
<title>Motstand</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('includes/header.php'); ?>
<?php include('includes/links.php'); ?>
</div>
<div id="container">
<div id="idag">
<img src="images/idag.gif" /><br />
<p class="left">Dit is slechts een test om te zien hoe het allemaal werkt. Of <a href="link.php">links intern of extern</a> werken en hoe een zin wordt afgebroken indien hij het einde van de regel haalt.</p>
<hr>
<p class="left">See how the next topic appears</p>
</div>
<div id="content">
<img src="images/nyheter.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
<br />
<img src="images/tidigare.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
</div>
<div id="poll">
<img src="images/poll.gif" /><br />
<p class="right">Poll ingave.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Hi, I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use? I've got a best practices question. Traditionally I put the following code at the top of all my css files to make browser compatibility easier. Code: *{margin:0; padding:0; border:0}
It works great and I've never questioned it till now. I'm working on creating a "sub-site" that's part of a much larger and already defined site. They don't do my little trick above, which means I can't do it to guarantee compatibility (I can't break their styles). So, I'm left with going through and setting margins and paddings to 0 on individual elements. The only other idea I had was to give a blanket margin:inherit to all elements below a certain div, but that clearly doesn't work as then I've got inherited margins that I don't want. My questions a 1. Is the above trick (setting all margins and paddings to 0 and then overriding later) a good one? What's the current best practice thoughts on this? 2. Anyone have a good workaround for my current problem other than just setting the margin and padding in each and every element? thanks. Remove. Hello, I always use EM for text size, letter spacing and line heights. For DIV widths I usually use PIXELS if fixed width web site and PERCENT if fluid layout web site. I think in both cases I am doing the right thing ... I think. But what unit should I use for padding and margin? EM? PIXEL? Thanks, Miguel Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Nevermind guys, I figured it out. I looked back at an old thread I posted about a year ago with the same issue. The fix was to add vertical-align: top; to the flt_rt img css. ========================================== This issue is affecting both FF (3) and IE (6)...I haven't tested in another browser yet. I just inherited this site and am in the process of converting it from a table layout to valid css. EVerything's going pretty well with the exception of my right column images. An approximately 5px gap is appearing so the images do not fit flush. I have looked at this so long that I can't see where it's happening and would appreciate another set of eyes. This version of the site is on a private test server, so I've attached screenshots. In each screenshot you will see the gap colored in green. In FF it appears below the images, while in IE it's appearing in between. Thanks in advance! Here is my css: Code:
@charset "UTF-8";
body {
background-color: #191919;
margin-top: 5%;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: #000000;
padding-left: 30px;
padding-top: 30px;
text-align: left;
}
.heading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #B3DB10;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.style2 {
color: #FFFFFF;
background-color: #7d990b;
display: block;
position: static;
padding-left: 8.5px;
height: 18px;
padding-top: 5.5px;
}.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
color: #333333;
}
.heading3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #999999;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.maintext2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 200%;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
color: #CCCCCC;
}
.heading4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #CCCCCC;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 0px;
}
HTML (with some content removed) 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=utf-8">
<title>Home - .</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {color: #B3DB10}
-->
#container {
width: 925px;
height: 600px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#nav {
float: left;
width: 200px;
height: 425px;
background-color: #b3db10;
}
#nav ul {
margin: 27px 0 0 0;
padding: 0;
}
#orion_logo {
border: none;
}
#rcol {
float: right;
height: 425px;
width: 725px;
}
#heading {
float: left;
height: 47px;
width: 475px;
background-color: #ababab;
padding: 53px 0px 0px 30px;
margin: 0;
font: 20px normal;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
#maintext {
clear: left;
float: left;
background-color: #FFFFFF;
height: 325px;
width: 505px;
text-align: left;
}
#flt_rt {
float: right;
width: 220px;
height: 425px;
background-color: green;
padding: 0;
margin: 0;
}
#flt_rt img {
padding: 0;
margin: 0;
}
#heading2 {
clear: both;
height: 155px;
width: 725px;
background-color: #000000;
text-align: left;
padding-left: 200px;
padding-top: 20px;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="nav">
<a href="http://">
<img src="images/logo.png" width="200" height="100" alt="Orion logo" title="http://www..com" id="orion_logo"/>
</a>
<ul id="MenuBar1" class="MenuBarVertical">
<li><span class="style2"> Home</span> </li>
<li><a href="02.html"> Proven Credibility</a></li>
<li><a href="03.html"> Leading-Edge Products</a> </li>
<li><a href="04.html"> Benefits of the Program</a></li>
<li><a href="05.html"> Benefits of the Products</a></li>
<li><a href="06.html"> Benefits of the Partnership</a></li>
<li><a href="07.html"> Contact</a></li>
<li><a href="http://www.com/login.asp"> Partner Login</a></li>
</ul>
<a href="07.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/apply2.gif',1)"><img src="images/apply1.gif" name="Image4" width="100" height="20" hspace="50" vspace="30" border="0" id="Image4" /></a>
</div> <div id="rcol">
<h1 id="heading">Stake Your Claim in a Billion Dollar Industry!</h1>
<div id="flt_rt">
<img src="images/orion2.jpg" width="220" height="216" alt="" /><img src="images/orion05.jpg" width="220" height="209" alt=""/>
</div>
<div id="maintext">
<p class="maintext">text here<br />T</p>
<p class="maintext">text here</p>
<p class="maintext"><strong></strong>, President and CEO</p>
</div>
</div>
<div id="heading2">
<span class="maintext2">The U.S. Retrofit Market Opportunity:</span>
<span class="heading4"><span class="style3">text<br />
<span class="style3">20.6 billion</span> square feet need to be retrofitted*<br />
<span class="style3">$9.6 billion</span> retrofit market size</span>
<span class="maintext2">*Source: EIA 2003</span>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div> <!-- end container -->
</body>
</html>
Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas Hi Guys, Having a problem on IE7, whereby a UL is still indenting itself, even when the padding and margin are set to zero. Anyone got any suggestions please? Charlie PHP Code: .nav{list-style: none; } .nav ul { padding: 0; margin:0; list-style: none; width:10em; z-index:99; position:relative; overflow:visible; left: 0px; } .nav li { margin:0; position: relative; float:left; width: 12em; text-align: center; color: #FFFFFF; background-color: #006699; border:solid 1px #black; display:block; height:auto; left: 0px; } Hi, i try to print some variables on a ticket. A ticket which is already printed. I try to reach a result like this: This is the html: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Printing Ticket...</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css"> <link rel="stylesheet" type="text/css" media="screen" href="foo.css"> </HEAD> <BODY> <div id="menu" class="menu"><center><p><br>The ticket will be printed...<p> <input type=button value="Close Window" onClick="javascript:window.close();"> </p></p></center></div> <div id="content" class="content">C 25 3 12345</div> </BODY> </HTML> The foo.css: PHP Code: @media print { body { background: white; font-size: 12pt; FONT-FAMILY: Verdana; background: transparent none; } #menu { display: none; } #content { margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; text-align: left; } } @media screen { body { font-size: 14px; line-height: 1.2 } #content { display: none; } } This piece of the div tag 'content' don't listen to me: PHP Code: margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; I have most of them at 0px, but whatever i insert into there it doesn't change the position of the variables. Are there are other codes to define a position? Thanks for any help. |
|||||||