|
CSS - Floats, Getting Rid Of Annoying Space
Hello all,
I've been working on a layout for a bit now and can't seem to get rid of a small space. The background image is not coming down far enough. The background image is in applied to the body div. Both of the divs in the body are floated so I had to use a hack recommend by the people at positioniseverything, their easy clears page. the hack applied is the following class that I apply to the body div. .clearfix:after { content: "."; display: block; height: 0; margin: 0; padding: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ Like I say, the hack works except for that annoying little gap at the bottom. Please take a look at it www . cocoliso ..us/blog/ Much thanks. Jesse Similar TutorialsAs a way to learn XHTML-Strict/CSS, I'm making a funny site with the goal of recruiting new people to be my friend. However, I can't seem to get rid of a horizontal bar of white space between the Title div and News & Content divs. I could fix it by making the News and Content positions absolute, but then I'd be unable to have a footer. Does anybody know why that white space exists, or better yet, how I can get rid of it? Site is http://www.kennygraham.net/index.html and CSS is http://www.kennygraham.net/perfect.css Thanks in advance to anyone who can help. I have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. 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">
<head>
<title>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. Ok, Now when I am trying to nest divs for the header bar, left column. Nothing gets put into the header div and I've tried tons of stuff to get it to work. Heres a sample: Code:
<HTML>
<HEAD>
<title>
Page Title
</title>
<style>
.defaultText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.titleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.addModuleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.adminHeaderText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
border: 1px solid #0099FF;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #1C4F9B;
}
.smallText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.moduleTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.TabBg {
background-color: #1C4F9B;
border-color: black;
}
.NormalTabsBg {
background-color: #559cec;
border-color: black;
}
.selectedTab {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:white;
font-weight: bold
}
.normalTabs {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:gainsboro;
text-decoration:none;
font-weight: bold
}
.textBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
.largeTextBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
#addNewModule {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
}
#addNewModule a
{
border: 1px solid #000;
background-color: #1C4F9B;
padding: 5px;
}
#bodyWrapper {
border: 1px solid purple;
background-color: #559CEC;
width: 100%;
}
#header {
background: #EEE;
border: 1px solid red;
}
#header #headerLeftColumn {
float: left;
width: 500px;
}
#header h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
vertical-align: top;
color: #000;
padding-left: 15px;
padding-top: 20px;
width: 100%;
}
#header #loginControl {
float: right;
width: 250px;
border: 1px solid #000;
}
#container {
float: left;
width: 100%;
margin-right: -260px;
border: 1px solid red;
}
#content {
border: 1px solid yellow;
margin-right: 260px;
}
#left
{
float: left;
width: 250px;
border: 1px solid #FFF;
}
#middle {
margin-left: 260px;
border: 1px solid orange;
}
#sidebar {
float: right;
width: 250px;
border: 1px solid #000;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000000;
font-size: 10px;
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
body {
color: #000000;
background-color: #E8E8E8;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
}
</style>
</HEAD>
<BODY>
<form runat="server" ID="frm">
<DIV id="header">
<DIV id="headerLeftColumn">
<h1>Site Title
</h1>
<p>
Paragraph left text
</p>
</DIV>
<DIV id="loginControl">
Login buttons
</DIV>
</div>
<DIV id="bodyWrapper">
<DIV id="container">
<DIV id="content">
<DIV id="left">Left</DIV>
<DIV id="middle">Center</DIV>
</DIV>
</DIV>
<DIV id="sidebar">Sidebar text</DIV>
</div>
</form>
</BODY>
</HTML>
This is REALLY basic and annoying the hell out of me. http://www.magikwebs.co.uk/chromeborder/ This looks fine in Firefox, but in IE there is a small gap between the images in the top div and the one in the bottom. I've tried styling the divs to remove padding, margins etc but to not avail. Can anyone tell me how to fix this for stupid IE? Thanks, John. Hi, I've gone as long as I can without asking for help, but this has got me stumped. I have a site I'm trying to make at http://joe.terrarum.net/test.html If you resize the window so its less than 600px or so, the drop shadow starts getting clipped. I know why this is happening (the height is set to 100%, so it's just following the rule of being 100% the size of the window when the window is smaller than the inside block) but I would like it to be the same size as the block inside even when the window is smaller. Make sense? The block is actually the block showing the background. It's 532px in length from the header. The gray box is just a simple context box (that should also push the height of the background box if it gets too big). Anyone have any ideas? Thanks! -Joe Hi guys, I'm new to this forum but the advice looks great - I hope someone can help me out! I'm having a really weird problem with my CSS in Windows Firefox. Everything displays fine in Mac.Opera, Mac.Firefox, Mac.Safari, Windows.IE7 but doesn't display correctly in Windows.Firefox! For some reason it's creating a gap between the menu tabs and the line below, it's coming from the padding-bottom of #ddcolortabs a .link which is 3px. However, I need this to create the right spacing between the bottom of the words in the menu and the top of the line. I'm not allowed to put a URL in this post, which is very annoying! If you think you could help I'll send you the link in a message I guess?! Let me know if there's another way! If anyone has any ideas for a solution I would be very grateful! Cheers, Andrew Hi! Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness) [HTML] <div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div> [/HTML] Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this? Thanks Dear All, On top of my page I like to have a picture which is stretched from left to right with an gap (left/right) of 11px. That works for IE & Opera. BUT in Netscape & Firefox it doesn't stop 11px on the right site. ?????? Does anybody have an idea .. damn think is quite important for my design. The call in (XHTML validated) page is. <div id="banner"> <img class="ocean" src="/_img/headers/texture.gif" alt="" /> </div><!-- end banner --> the CSS: .ocean { position:absolute; top:12px; width: 100%; left:11px; right:11px; height: 110px; border: 0; } banner #banner { background:#fff; background-color: #7adaff; height:110px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid white; voice-family: "\"}\""; voice-family: inherit; height:110px; } html>body #banner { height:110px; } body { margin:10px 10px 10px 10px; padding: 0; font: 'verdana', 'geneva', 'arial', 'sans-serif'; color : #6388ff; background-color: tomato; border: 1px solid white; } Appreciate any ideas Jack Hey everyone, I am making a design for my site, and when I use a rounded image for my background, IE shows a whitespace around it. Here is my code. Code:
#menu_outer {
background-image: url( menu1.png );
background-position: top left;
background-color: #0000000;
width: 250px;
}
Here is an example. Any suggestions? I have an imaged logo on top of my page that I want to link to the startpage. However, whenever I link the image, I get the typical border that signalizes a link. How can I get rid of this border with the help of my Stylesheet? It seems like I can't even change the color of the border in IE?? Thanks a lot Steve Edit: Never mind -- searched before posting and did not find anything, but after I posted, there it was... Used {border:0;} on the img tag -- voila... Can you guys tell me why code below does not show properly in firefox 2 when it shows up right in IE7? If I add clear:both to footer then it displays right, but should not it show it alongside the div #2 anyways? Code:
<!DOCTYPE html 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" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">
<head>
<title>Test</title>
<style>
body {
margin:0px;
}
.container {
margin: 0 auto;
height:500px;
width:500px;
border-width:thin;
border-style:dotted;
}
.leftcontent {
float:left;
width:100px;
height:100px;
border-width:thin;
border-style:dotted;
}
.rightcontent {
float:left;
width:100px;
height:100px;
border-width:thin;
border-style:dotted;
}
.footer {
border-style:dotted;
border-width:thin;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="leftcontent">
1
</div>
<div class="rightcontent">
2
</div>
<div class="footer">
3
</div>
</div>
</body>
</html>
After fighting with JS to get scrolling content to work, I now have a problem with IE8/9, where a wide div bleeds outside of containing div. Works fine in FF and Chrome code and css are in http://rentz.phi.co.uk/testanimate.html Any ideas? Hey, k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out. Here's the html; Code:
<div id="homelistbox"><b>Upcoming Tradeshows:</b>
<ul class="homelist">
<li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water
Boat Show,</a> Sept 14-17 2006</li>
<li><a href="http://www.torontoboatshow.com">Toronto International Boat
Show,</a> Jan. 12-21 2007</li>
<li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman
and Cottage Show,</a> Feb. 22-25 2007</li>
<li>See the various models of Custom Weld Boats at all these shows.
<a href="contact.php">Contact us</a> for more information about locations
at the shows.</li>
</ul>
</div>
<p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts
exciting new and pre-owned products for the water, trail, and road.</p>
<p>Flexibility, great pricing, and innovative products will keep you coming
back for all your recreational needs!</p>
<p>Please be advised that we are currently working to improve your online
experience, so your patience is greatly appreciated!</p>
<div class="clear"></div>
and the CSS; Code:
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}
#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}
.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}
.homelist a {
color:#FF0000;
text-decoration:underline;
}
.homelist a:hover {
color:#255CBE;
text-decoration:none;
}
i'm also having similar issues with simple image floats, as seen here. It forces the paragraph underneath in IE...boourns. Anyways, any guidance'd be greatly appreciated. Cheers. Hello everyone, Newbie here Can anyone show me how to CSS objects or text inline horizontally in the banner/header such as at the top of this forum? My banner/header uses large text for a logo on the left, and I would like to put a search form or something on the right side of the header. Do I have to declare the width of each? See how much newbie I am? Thanks for any help. Ken Hey, yet again I am having issues with some floated elements in IE (6 + 7). Have a look here. The product details start under the bottom of the photo of the product, and I've tried a bunch of different things to get it lined up with no joy. Here's the CSS: Code:
#features {
position:relative;
float:right;
margin:0 20px 20px 20px;
width:350px;
border:1px solid #E1DCC6;
border-top:0;
}
* html #features {
margin:0 10px 0 10px;
}
#features p, #features p strong {
font-size:10px;
margin:4px;
padding:2px;
}
#picbox {
width:350px;
height:350px;
margin:0 20px 0 20px;
float:right;
border:1px solid #E1DCC6;
border-bottom:1px dashed #E1DCC6;
}
* html #picbox {
margin:0 10px 0 10px;
}
#detail-list {
margin:10px 60px;
}
#detail-list li {
list-style:square inside;
margin:2px;
}
#buynow {
margin:5px 10px 5px 30px;
}
#priceTable {
margin:10px 40px;
border:1px solid #E1DCC6;
}
#priceTable td {
padding:4px;
}
#priceTable td.priceRight {
background-color:#E1DCC6;
font-size:14px;
font-weight:bold;
color:red;
}
#priceTable td.priceLeft {
text-align:right;
color:white;
font-weight:bold;
background-color:#B8A488;
}
.liner {
text-decoration:line-through;
}
Any insight, as per usual, is greatly appreciated. This may be a stupid question, but I recently noticed something with floats and side by side elements that confuses me. I thought you always had to specify a width when it came to floating elements along side each other, as block level elements inherit 100% width usually. But on the last 2 sites I coded, I was able to float divs without specifying a fixed width. The div boxes only took up the width of there content. Worked in FF, Chrome, Safari, IE7/8. This is great, as it saves time, but makes no sense. Am I confused? Hello, I'm currently working on a website layout that uses CSS for everything. I have a header, and two columns below that. The header works perfectly. I used float:left on both of my two columns, and they both appear side-by-side as intended. However, I want the right column to fill up the entire right side of the screen. When I try to use CSS's width: 100%; the entire right column jumps down below the left column, which is not what I want. I made a little screenshot: http://img282.echo.cx/img282/6555/tms1od.png I believe it can be done, but I'm stumped. Help is appreciated Hi All, I am almost tearing he little hair I have left out! I can't get the div in the middle to clear the floats. Works just lovely in FF, but that IE thing won't work!!! Grrree http://www.tuxdiscs.com/sscp7b/ Any advice would be appreciated! Thanks |
|||||||