|
CSS - How To Prevent The <div> Tag From Introducing A Space At The Bottom Via Css???
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... 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 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 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? 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 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. 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 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. 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 Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system. Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up? I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible. Surely there must be a way to disable inheritance for a block...? I've got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock... I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated. The CSS: Code: #nav { background-color: #fff; width: 218px; height: 400px; float: left }
#menuContainer { margin-top: 120px; margin-left: 12px; position: fixed }
#menuContainer h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px }
.menu { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed }
.menu li { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 }
.menu a { color: #000; text-decoration: none }
.menu a:hover {}
.menu ul { list-style: none; margin: 0; padding: 0 }
.menu ul li { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 }
.menu ul a { color: #c00 }
.menu ul a:hover { color: #000 }
And the HTML: Code: <div id="nav"> <div id="menuContainer"> <h3>Site Name</h3> <ul class="menu"> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> </ul> </div> </div> I have a table that uses style sheets: <table class="Border"> but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this? Thanks! Scott. Hello, I'm really bad with CSS, so this probably a simple question. I've found some stuff on the 'net about how to set up a class to prevent <body> from printing, but I just want to prevent one table element from printing while still allowing everything else. Example - on print, allow First Name but do NOT print SSN: Code: <table> <tr> <td> First Name </td> <td> SSN </td> </tr> </table> I am trying to create a site with a footer below the content, and I want the footer to be at or below the bottom of the browser window (that is, on pages where the content is less high than the window, the footer should be at the bottom of the window, but on longer pages, the footer will be off the bottom of the browser window until you scroll down past all the content to see it). I've done this with the following code, where I have a DIV that's 100% high, then two futher DIVs inside this: one to contain the content of the page, and the second to contain the footer. The footer DIV is positioned with "bottom:0px" to make it appear at the bottom of the browser. This works fine, until the window is shrunk down, and then (I think because of the "bottom:0px") the footer DIV moves over the content DIV until its bottom is in line with the bottom of the content DIV. What I want to happen is that when the window shrinks, the footer moves up only until its top touches the bottom of the content DIV, and then if the window shrinks further, it will become invisibile until you scroll down. Please can somebody help me to acheive this? Many thanks, Gary Code: <body text="#000000" style="background-color:#008000; text-align:center; height:100%;"> <div style="background-color:#ffffff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:100%;"> <div style="background-color:#0000ff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:200px;"> </div> <div style="background-color:#00ff00;position:absolute; left:0px; bottom:0px; width:750px; height:100px; /*MainDivStyle*/" __AddCode="here"></div> </div> </body> This is a simple question. In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on... What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change... Thanks. So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line. I'm somewhat new to CSS so I don't know what to do to fix it. -Johnny Here is the code: /* ---------- Primary Nav ---------- */ div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;} div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;} div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;} div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;} div#primaryNav ul li a:hover {} div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;} Here is the navi: <div id="primaryNav"> <ul> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a class="selected" href="Item">Item</a></li> </ul> </div> |
|||||||