|
CSS - Unwanted Padding/margin + Messed Up Height.
So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE.
I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. Similar TutorialsHi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! Please look at http://certified.tmhdesign.com/know.asp in FF I have a div element with an id of "know" that is appearing under an h1 element with an id of know_header In Firefox there is an unwanted top margin on the div#know (or a bottom margin on the H1 element). I can't seem to understand why? T Hi there, I'm building a page that requires 100% width & height, and absolutely NO margins on any side. I've applied the following inside my CSS: body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: 000000; } For this to work in Firefox, I've also had to add the same code just above the head tag (inconvenient, but I don't mind). My problem is the unwanted right margin that appears in IE. I have no idea how to remedy this. You may view the page here. Thanks so much! 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. My content and navigation bars, though set to 100%, are actually 100% (of the body/html element) plus 100 pixels (their "top" property). If I set their "top" property to 0, they fit the page perfectly but I need them below the title banner. Is there a way to make the 100% height value of these two columns relative to the fixed height of the title banner? Note: One solution was to set their "bottom" properties to 0px. This does not work in IE so it's not a valid option. Also, I do not have the option of setting the navigation's and content's divs to a "top" value of 0 and rasing the title banner's z-index to cover them as I need the overflow scroll bars to extend from the bottom of the title banner to the bottom of the page and not from the top of the page to the bottom of the page. (think frameset ) Code: <!DOCTYPE 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" xml:lang="en">
<head>
<title>100% Height - CSS Problem</title>
<style>
html {
height:100%;
}
body {
height:100%;
padding:0px;
margin:0px;
background-color:#CCCCCC;
}
#title_banner {
display:block;
position:absolute;
width:600px;
height:100px;
left:0px;
top:0px;
background-color:#CC6666;
}
#navigation {
display:block;
position:absolute;
width:140px;
height:100%;
left:0px;
top:100px;
background-color:#66CC66;
overflow:auto;
}
#page {
display:block;
position:absolute;
top:100px;
left:140px;
width:460px;
height:100%;
background-color:#6666CC;
overflow:auto;
}
</style>
</head>
<body>
<div id="title_banner">
Set width and heighth title banner image.
</div>
<div id="navigation">
Navigation links.
</div>
<div id="page">
Page content.
</div>
</body>
</html>
I'd appreciate any links you can share as well. All of the tutorials I've seen for 100% high pages do not include a horizontal, fixed-height banner across the top. 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? 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? 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 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 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 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 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; } 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 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, 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? 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'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. 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 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>
|
|||||||