|
CSS - Align Prob (padding? Margin?)
Hi again.
okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Similar TutorialsPHP Code: body { margin: 0px; font-family: Tahoma; font-size: 10px; background-color: #777; } #bodywrapper { margin-left: auto; margin-right: auto; width: 750px; background-color: #FFF; } #logo { margin-left: 15px; margin-top: 7px; margin-bottom: 7px; } .image { display: block; } .topnav { float: right; margin-top: 25px; background-image: url( images/line.gif ); } #left { float: left; width: 180px; background-color: #ccc; } #right { float: right; width: 180px; background-color: #ccc; } #center { margin-left: 190px; margin-right: 190px; background-color: #ccc; } #clear { clear: both; } #contentwrapper { margin: 0px; } PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-us" /> <link href="/css/layout.css" type="text/css" rel="stylesheet" media="all" /> <title>Petroleum Listing Service</title> </head> <body> <div id="bodywrapper"> <div id="header"> <div class="topnav"> image image image </div> <div id="logo"> <img class="image" src="images/logo.gif" /> </div> </div> <div id="contentwrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="center"> center </div> <div id="clear"></div> </div> <div id="footer"> </div> </div> </body> </html> The problem I am having is it seems that FF starts rendering the white background only once the image is placed...it doesn't count the margin above it as content I assume... IE however does what I want it to do...renders the margin above the image as content, and thus the white background starts at the very top of the page, thus a white margin between the top of the page and the logo. How do I rectify the problem? I understand that FF is probably doing it right...but how do I make FF also start the white background at the top. 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 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? 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? 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>
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. Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. 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" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
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 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}
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 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, 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? 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 Remove. 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 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>
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. 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. |
|||||||