|
CSS - Padding Error?
No matter what i will always get
http://img217.imageshack.us/img217/5108/23765004.png the bit highlighted Yellow wont go away i want the blue to hit the top of the image so there is no black space there.. no matter what i try different bits of padding it just wont work.. CSS code Code: #nav {
mergin: 0;
padding: 6px;
background-color: #0970de;
}
#nav li {
display: inline;
list-style: none;
padding: 0 15px 0 0;
}
#logo {
padding: 9%;
background-image:url(images/logo.jpg);
}
Similar TutorialsHello, 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> 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. 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 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. 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... is it possible to add table padding in the same way it is applied to divisions etc given the following code Code:
<table class="forums">
<tr>
<td></td>
</tr>
</table>
<div class="forums"></div>
Code:
.forums
{
padding: 10px;
}
Using the above gets to different sizes as the padding it not applied to the table. 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 For some reason in FF, even though I have the most nested element set to 0px for the right padding, padding is showing up in FF. ** removed ** That white line should be flush against the text of the menu items, like you'll see it is in IE. Looking at Firebug, there's no other styles being applied to this item that would cause it to do what it does. Interestingly enough, if I change the padding using Firebug to anything else, then change it back to 0, it moves the padding back to 0. Here's the HTML: Code: <div id="navBar"> <ul> <li><a href="http://www.radiantsuntherapies.com" id="navBarSelected">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="services.php">Services</a></li> <li><a href="practioners.php">Practioners</a></li> <li><a href="appointments.php">Appointments</a></li> <li><a href="shop.php">Shop</a></li> <li><a href="bms.php">Body Mind Spirit</a></li> <li><a href="blog/" id="navBarLast">Blog</a></li> </ul> </div> And here's the CSS: Code: #navBar{
background:url(../images/navBarBackground.png) repeat-x top left;
float:left;
height:43px;
overflow:hidden;
width:910px
}
#navBar ul{
font-family:garamond;
font-size:14px;
text-transform:uppercase
}
#navBar ul li {
display:block;
float:left;
}
#navBar ul li a:first-letter {
font-size:16px
}
#navBar ul li a{
color:#e4ad43;
text-decoration:none;
display:block;
border-right:1px solid white;
padding:11px 0 18px 14px; /* overflow vertical to work w/ all browser no matter how text is rendered. hidden by parent layers */
}
#navBarLast{
background-image:none !important
}
#navBarLeft{
background:url(../images/navBarLeft.png) no-repeat top left;
float:left;
height:43px;
width:5px;
}
#navBarRight{
background:url(../images/navBarRight.png) no-repeat top right;
float:left;
height:43px;
width:5px
}
#navBarSelected{
color:#ffffff !important
}
Thanks! The line "between" the columns is actually a background image in the second column. I'd like to reduce the area between the top of the text and the top of the div (so the text is about even with the line). I've tried setting the padding to 0, but that has no effect. Any ideas? Code: #inner_wrap_2_col {
margin:0 auto;
width:690px;
}
#news_col_left {
float:left;
width:345px;
color: #330;
line-height: 1.5em;
padding: 0;
}
#news_col_right {
float:right;
width:345px;
color: #330;
line-height: 1.5em;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}
I'm having some troubles getting my div to appear correctly. WHat I want is for the div to be completely contained by a FLASH movie with no whitespace. In Firefox I'm getting an approximately 5px tall white bar at the top. TWH is the url, the flash movie only appears on the main page. My container div uses a background image with a greenish colored 200px left edge, and then a white edge to fill the rest. I know this is what's coming through, but what baffles me is that even when specifying a background color for my div it's not coming through. Here is some of the code: CSS: Code:
#container {
width: 760px;
height: auto;
margin: 0 auto;
text-align: center;
overflow: auto;
background: url('../images/style/container_back.jpg') repeat-y;
border-bottom: 20px solid #6e868f;
}
#lcol {
width: 200px;
height: 380px;
float: left;
text-align: left;
}
#nav {
height: auto;
background-color: #000000;
width: 100%;
text-align: center;
}
#nav ul
{
list-style: none;
padding: 20px 0px;
margin: 0px;
}
#nav ul li
{
padding: 7px;
}
#info {
height: auto;
width: 190px;
text-align: center;
padding: 5px;
font-size: 11px;
}
#flashcontent
{
width: 560px;
height: 380px;
padding: 0;
margin: 0;
float: right;
}
HTML -- I've taken the content out so that the structure is more clear. Code:
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="quote"></div>
</div>
<div id="lcol">
<div id="nav"></div>
<div id="info"></div>
</div><!--lcol-->
<div id="flashcontent">
FLASH player is required to view portions of this site.<br /><br />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">
<img src="images/logos/get_flash_player.gif" alt="FLASH player" height="31" width="88" /></a>
</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "gallery", "560", "380", "6", "#6e868f");
so.write("flashcontent");
</script>
</div><!-- end container --><br />
I can't seem to set any padding on the fieldset element with ie7 Has anyone else had these problems and is there a way I can fix this. I even set the fieldset element to a block level element but that didn't work either. example http://section31.us/scripts/testing/xhtml/fieldset.html Hi All, I am trying to fix a problem with IE 6. In Firefox everything lines up correctly. in IE6 the images in the gallery on the left side of the page and the full size image have 5px of padding underneath. I cannot get this to disappear no matter what I've tried. Any ideas? Top shots l:andy p:andy Here is some code of the thumbnails.. This will probably look like a mess since I am programming on a huge monitor.. But anyway. Code:
<div id="pagebody">
<?php include 'mainmenu.html' ?>
<div id="contentpane">
<div id="content_port">
<div id="port_menu">
<span id="gallerymenu1">
<span id="submenu1" class= "submenu" > <a class="portmenu" href="#" id = "portmenulink1" onClick="changeCategory(1);return false;"> --Wedding--</a> </span>
<span id="submenu2" class ="submenu"> <a class="portmenu" href="#" id = "portmenulink2" onClick="changeCategory(2);return false;" > --Promotional--</a> </span>
</span>
</div>
<span id="thumb">
<div id="thumb1div" class = "thumb">
<img src="images/blank.gif" title = "1 <?php echo "$title"; ?> 1" alt = "<?php echo "1 $alt"; ?> 2" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(1);"
width = "<?php echo $thumb_width; ?>" name = "thumb1" id = "thumb1">
<input type="hidden" id="t1" value="">
</div>
<div id="thumb2div" class = "thumb">
<img src="images/blank.gif" title = "2 <?php echo "$title"; ?> 2" alt = "2 <?php echo "$alt"; ?> 4" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(2);"
width = "<?php echo $thumb_width; ?>" name = "thumb2" id = "thumb2">
<input type="hidden" id="t2" value="">
</div>
Hi All, Im giving my site a slight update, but have encountered a strange IE problem. Saying that i have nothing but problems with IE some days with both 6 and 7. The menu system seems to work fine in Safari and firefox, however in IE the last tab seems to go to the next line. I think it may be a problem with the padding/margin however thats only a guess. Any help would be appreciated. Thanks Here is the link: http://www.michaelpalmer.info/new/index.php Here is the full CSS code: http://www.michaelpalmer.info/new/css/style.css Here is the CSS code for the menu system: css Code: Original - css Code /************ pageMenu ************/ #pageMenu { background: repeat url(../images/pageLayout/pageMenu.gif); width:780px; margin: 0px auto; border-left: 1px solid #000000; border-right: 1px solid #000000; } .menuButton { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/blackDot.gif) bottom repeat-x; color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrent { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrent.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentLeft { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentLeft.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentRight { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentRight.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ .menuCurrentLeft a { color: #000000; text-decoration: none; } menuCurrentLeft a:hover { color: #000000; text-decoration: none; } .menuCurrentRight a { color: #000000; text-decoration: none; } menuCurrentRight a:hover { color: #000000; text-decoration: none; } .menuCurrent a { color: #000000; text-decoration: none; } menuCurrent a:hover { color: #000000; text-decoration: none; } .menuButton a { color: #ffffff; text-decoration: none; } .menuButton a:hover { color: #dba549; text-decoration: none; } /************ pageMenu ************/ /************ pageMenu ************/ Heres the code for the html html Code: Original - html Code <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> Hi, 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! 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. Hi. I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image). To sum it up, here is an image: http://img40.imageshack.us/i/helpo.jpg/ Here is a link to the website: http://hiq.identityprojects.co.uk Here is the code for the image: Code:
h1#logo a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-size: 250%;
width: 283px;
height: 92px;
padding-bottom:-20px;
background: url(../images/logo.png) no-repeat;
text-indent: -99999px;
}
The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me. |
|||||||