|
CSS - Unwanted Space At The Bottom Of The Image
Similar TutorialsHello, I am new to the css world, however I have followed some tutorials and became familiar with how to use css. However now I am trying to remove the space on top and bottom of an image, so that I bring two images one on top of each other. Here I placed some sample html code: Code: <html> <head> </head> <body> <div> Some text BEFORE the line. </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> Some text AFTER the line. </div> </body> </html> As you can see in the above code, I have a div tag with the text above, a div tag with an image line, another div tag with an image line, and some text below. However there is a space of around 5px from one line to another. I tried to do the css syntax for the image as follows: Code:
img {
border: 1px solid #000000;
margin-top: 0px;
}
However I can see the border on the image, but the space still remains there. I also tryied to use the padding-top, but it still did not work Is there anyone here that can help me out please? thanks & regards, sim085 Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian 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 am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks Please take a look at this page: http://www.4xp.net/template2/ I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF. Here is my css PHP Code: body { margin-top: 5px; margin-bottom: 5px; background-image: url('images/bg.jpg'); } #header { width: 900px; height: 90px; padding: 0; margin: 0; text-align: left; background-image: url('images/header_bg.jpg'); } img { padding: 0; margin: 0; } #menu { border-top: 1px solid #003366; border-bottom: 1px solid #003366; width: 100%; height: 25px; background: url('images/menu_bg.jpg'); background-repeat: repeat-x; text-align: left; } .menulink { margin-left: 20px; height: 25px; } #page { width: 900px; border: 1px solid #000000; text-align: center; margin-left: auto; margin-right: auto; } #status { width: 900px; height: 25px; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #003333; margin: 0; padding: 0; border: 0; } Any help would be very much appreciated. Thanks everyone! It seems the form that creates unwanted space in IE. Site in question: http://www.phaseninedesign.com/p/uber/ HTML: Code: <div id="topMenu"> <form action="#" method="post"> <div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div> <div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div> <div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div> <div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div> <div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div> <div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div> <div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div> <div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div> </form> </div> ----------------------- CSS: Code:
#topMenu{
width: 1005px;
height: 23px;
margin-left: auto;
margin-right: auto;
background-color: #282a1d;
background-image: url(images/topMenuBG.gif);
border-right: 1px solid black;
border-left: 1px solid black;
}
I've tried moving the form outside of the dive that its in, but that makes the space even bigger. I am trying to style a form using CSS instead of tables but am getting unwanted space above form elements when i use float:right to position them to the right of the prompt text. I have spent some time reading about the problem which appears to be an error with IEs rendering of CSS. I have tried several solutions posted on the web with no success. Can anyone recommend a solution to my problem. Thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> .form { font-size:10px; text-align:left; } .form input { width: 100px; font-size: 9pt; border: 1px solid #891C46; margin-left: 12px; padding-top:0px; float:right; } .form select { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form textarea { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form li{ list-style-type: none; clear:both; } .form img{ padding-top:10px; float:right; } </style> </head> <body> <table cellpadding="0" cellspacing="0" width="500"> <tr> <td width="50%" valign="top" class="form"> <ul> <li>Your name:<input name="textfield" type="text"></li> <li>Your email address:<input name="textfield" type="text"></li> <li>Your company:<input name="textfield" type="text"></li> <li>Your position:<input name="textfield" type="text"></li> <li>Subject:<select name="select"><option>Digital Advertising</option></select></li> <li>Query/comment:</li> <li><textarea name="textarea" cols="20" rows="8"></textarea></li> <li><img src="/carlton-newsite/img/contactus/send.gif" name="send" width="50" height="25" id="send"></li> </ul> </td> <td valign="top">sfasfasfasdfasdfasdfasdf</td> </tr> </table> </body> </html> When I browse the website with internet explorer, in the search section, there is a space after the form area. How can I remove it? http://www.refinethetaste.com/html/ I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there? html page: http://www.iainhamp.com/reality/hyborianwar.html css page:http://www.iainhamp.com/reality/reality_hyborian.css Thanks for any help you can provide. - iain Hi! I"m wondering how do I prevent the <div> tag from introducing a line break in the web browser immediately after the closing <div> tag, or </div>.... <span> doesn't do that.... Read the article that <div> is a block elements where <span> is a inline element. So, the block element is what introduce a line break before and after the tag, just like the <p> tag for example... Thanks for taking the time to read my question. I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why? In IE you can see the container color (the non Orange colors) but in FF you don't. I've tried a bunch of stuff but can't figure it out. http://stuccotech.bravehost.com/ CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}
.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline;
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}
.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}
.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}
.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}
p.MainText {
color: white;
font-size: 14px;
}
p.MainText:first-line {
text-indent: 5px;
}
.ContentText {
color: white;
font-size: 14px;
}
.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}
.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}
.PortfolioPicture {
width: 414px;
height: 318px;
}
.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}
.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}
.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}
.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}
.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}
.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;
}
.BottomNavHolder {
float: right;
}
.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}
.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}
.ListItemHome {
float: left;
width: 76px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}
.ListItemBuilding {
float: left;
width: 110px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}
.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}
.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}
.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}
a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}
a.BottomNav:visited {
text-decoration: none;
color: gray;
}
a.BottomNav:hover {
text-decoration: underline;
color: white;
}
a.BottomNav:active {
text-decoration: none;
color: white;
}
a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}
a.ContentText:visited {
text-decoration: none;
color: gray;
}
a.ContentText:hover {
text-decoration: underline;
color: white;
}
a.ContentText:active {
text-decoration: none;
color: white;
}
a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:hover {
text-decoration: underline;
color: white;
}
a.ListItemHome:active {
text-decoration: none;
color: white;
}
a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}
a.ListItemBuilding:active {
text-decoration: none;
color: white;
}
Thanks, Brad The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout. At the top, I could create the space I want. Margin-bottom: 30px doesn't do the trick. I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful! You can check out the site and css he I can't post the url because I'm a new user Can a mod post my url? EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site. Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? I have 2 div .In top div i have menu.In bottom div i have iframe . i want that top div should take about 20 % space and bottom div take rest of the space .iframe refresh every min and it content changes everytime .Currently scrollbar are appear both horizontally and vertically . How can i remove this scrollbar. I give a sample code <body class="body"> <div class="container"> <div class="top"> some contents here </div> <div class="bottom"> <iframe class="iframeclass></iframe> </div> </div> </body> how i design this classes The content of iframe is dynamic its height change everytime page refresh. i have a page where i float a block of text to the right. at the bottom of that text, there is a graphic that creates a footer for that block. in ie, it looks fine. but in firefox it's got 12px of space below the text (as opposed to ABOVE the graphic.) because it looks incorrect in ff and ok in ie, my hunch is that i've done something wrong - since ff is so much more reliable than ie. two last things. when i place a 1px border at the bottom of the text, the bottom margin disappears. but if i use a 0px border, the space remains. also, if i remove the <p> tags from within the text, the problem resolves itself. i do not address p formatting within the css document. this is my html: Code: <div id=outerwrapper> <div class=sidebar> <div id=sidebartext style="background: #acba6e url(images/sidebarbg.gif) 0px 0px repeat-y;"> <img src="images/image1.jpg" align=right> Some text. <p> <em>Some text</em> </div> <div class=sidebarbottom> <img src="images/image2.png"> </div> </div> <div class="maincontent"> <h1 style="text-align: right; line-height:120%; border-right: 30px solid #ffffff;">Some text</h1> More text <p> 123 Main Street, Your City, USA 512.555.1212 </div> </div> and this is my css: Code: html, body{
margin:0;
padding:0;
border:0;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 210%;
color: #847c69;
letter-spacing: .05em;
}
body {
text-align: center;
}
#outerwrapper {
position: relative;
top: 192px;
left: 0px;
margin-left: 45px;
margin-right: 45px;
display: block;
overflow: visible;
zoom: 1;
z-index: 1;
}
.sidebar {
margin-right: -27px;
float: right;
width: 305px;
display: block;
z-index: 1;
}
#sidebartext {
width: 265px;
padding: 0px 20px 0 20px;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 130%;
color: #ffffff;
text-align: left;
letter-spacing: .05em;
z-index: 1;
margin-bottom: 0;
}
.sidebarbottom {
margin-top: 0;
width: 305px;
z-index: 1;
}
.maincontent {
padding: 10px 30px 30px 30px;
background: #ffffff;
text-align: left;
border-right: solid 1px #666688;
border-bottom: solid 1px #666688;
z-index: 1;
color: #6c6b5e;
}
i would appreciate any help you can provide. this has stolen hours from my day. I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often.... ---------- Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve. So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening. Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome: Screenshot The page is just the index page at: GuyMerritt.net The CSS files looks like this: Code: body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial;
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
width: 100%;
max-width: 250px;
height: auto;
}
div#slides {
width: 500px;
height: 280px;
overflow: hidden;
}
div#slides div {
height: 280px;
width: 500px;
font-size: 100px;
line-height: 200px;
text-align: center;
color: #fff;
}
ul#ticker {
height: 1.4em;
overflow: hidden;
border: solid 1px #aaa;
background: #ccc;
}
ul#ticker li {
padding: 0.2em 0;
}
/* @group global */
p#links {
padding-top: 50px;
clear: both;
}
a#avatar {
position: absolute;
bottom: 10px;
right: 10px;
}
a#avatar img {
border: none;
}
h1 {
color: #0094d5;
}
a {
color: #0094d5;
}
a:visited, a:hover {
color: #00577e;
}
.red {
background: #e40053;
}
.blue {
background: #0094d5;
}
.green {
background: #43aa38;
}
/* @end */
At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)? Thanks again, Guy Merritt, Flint, MI |
|||||||