|
CSS - Padding, Float, And Height Elements...
Hey all... I'm doing some testing in Firefox, and I've encountered a problem.
Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! Similar TutorialsI'm trying to get 2 div's to be side-by-side and taking up the full width. The one on the right should be able to resize automatically to accomodate the user name ("Logged in as: ..."). The one on the left will display a random tip, which might carry over onto the next line. I tried to pad both div's for style's sake, but only the one on the right is padding in Firefox. If I float the left one to the left, then it pad's, but doesn't look right anymore. I've attached an image of the problem. The one on the top is Firefox, on the bottom is IE. As you can see, the bottom borders don't line up in Firefox because of the padding issue. Here's my code: Code: <div class="login"> <span class="text">Logged in as: <strong>USERNAME</strong> | <strong><a href="/store/index.php?logout=true">Logout</a></strong></span> </div> <div class="tip"> <span class="text"><strong>Random Tip: </strong></span> </div> And my CSS: Code:
.login {
background: #fff;
float: right;
text-align: right;
padding: 4px 10px 4px 10px;
border-left: #666666 1px dashed;
border-bottom: #666666 1px dashed;
}
.tip {
background: #fff;
height: auto;
text-align: left;
padding: 4px 10px 4px 10px;
border-bottom: #666666 1px dashed;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
line-height: 160%;
}
on my site http://www.fasttracksites.com/ i have the right column set to a width that has my padding subtracted from it so that it will sit off of the left border, and off of the right side, the overall div for the center of the page is 800px and everything is based off of this, the file containing my css is http://www.fasttracksites.com/stylesheets/main.css The problem is that even though the padding is set, the right column still sits on the borders, if anyone can help me fix this, i would greatly appreciate it Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer Firstly, excuse my title, I couldn't think of a better way to put it . Now to the problem. In my layout I have a floated object, and text that flows around it, I can pad the text away from this floated object by using margins on the floated object. But I have created a class for <p> that I want to be padded further, and if I add padding-left to p.quote (the class) it makes no difference because the padding is simply going behind the float... As rubbish as that explanation was, I expect someone will pick up on what I'm going on about. How can I have some text indented (padded) further away from the float than other ? Thanks in advance. This is driving me crazy!!! The headings elements (h1, h2, etc) have this padding or margins above them, and I can't get rid of it. here's an example http://my-test-site.comli.com/high-type.html I've tried to reset the padding and margins to 0. With no change. Any ideas IE5 doesn't support this (trying to apply padding-left to links). Has anyone found a good workaround - Don't really want to put each one inside a DIV I'm floating an image left and on the right, I'm placing a tabbed menu. FF lines the menu at the top-right corner, IE lines it up at the bottom-right(which is correct). I've tried margin, padding, vertical-align, but nothing will pull that menu down without severely affecting IE. Any suggestions? Hi guys, as you all know when you got lot of text in a <button> element, the padding (left and right) of the latter becomes very annoying. Any way of removing it? P.S. I am fully aware of the fact that setting margin:0 and padding:0 has no effect at all. Thank you My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice. Anyone have any pointers or tutorials that you think might be worth checking out? TIA. I'm still fairly new to CSS-only layouts, having always relied on tables heavily until just recently. I'm having a couple of problems that I can't seem to fix by myself. Here is an image of how the layout should look, so you can understand what I'm aiming for: http://squirrel.10pinleague.com/img/layout.jpg. And here is what it currently looks like: http://squirrel.10pinleague.com/. Here is the code that I have so far, they should be fairly clear to follow. Firstly, "index.php": Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='style.css'> <title>Red Squirrel Website!</title> </head> <body> <div id="minHeight"></div><!-- Safari hack --> <div id="outer"> <div id='topspace'> | <a href='#'>Home</a> | <a href='#'>Contact</a> | <a href='#'>Sitemap</a> | </div> <div id='header'> <div class='logo'> </div> <div class='search'> <form method='post' action='index.php'> <input type='text' name='frmSearchText'> <input type='submit' value='Search' name='frmSearch'> </form> </div> <div class='links'> <table width='315' height='25'> <tr> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 1</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 2</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 3</a> </td> <td width='5'> </td> </tr> </table> </div> </div> <div id='mainarea'> <div id='directory'> Directory > Home </div> <div id='leftlinks'> <div class='top'> <div class='10padtop'>Hot Links</div> </div> <div class='main'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom'> </div> <div class='top1'> <div class='10padtop'>Hot Links</div> </div> <div class='main1'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom1'> </div> </div> <!-- close "leftlinks" div --> <div id='content'> Hello!<p> </div> <!-- close "content" div --> </div> <!-- close "mainarea" div --> <div id='clearfooter'></div> </div> <!-- close "outer" div --> </div> <!-- close "minHeight" div --> <div id='footer'>Created by Rob Masters 2007 </div> </body> </html> Style.css: Code:
a:link {text-decoration: none; color: #fff; font-weight: bold;}
a:visited {text-decoration: none; color: #fff; font-weight: bold;}
a:active {text-decoration: none; color: #fff; font-weight: bold;}
a:hover {text-decoration: underline; color: #fff; font-weight: bold;}
body { font-family: verdana, arial; background-color: #f0fdee; margin: 0px; }
html,body {margin:0;padding:0}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
#outer{
min-height:100%;
margin-bottom:-22px;
height:auto;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #f0fdee;
}
* html #outer{height:100%;}
div#topspace {
position: relative;
width: 800px;
height: 20px;
text-align: right;
font-size: 12px;
}
#topspace a:link {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:visited {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:active {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:hover {text-decoration: underline; color: #000; font-weight: bold;}
div#header {
position: relative;
width: 800px;
height: 100px;
float:left;
vertical-align:top;
border:0;
margin: 0px;
background-color: #7e3b29;
}
#header .logo {
width: 170px;
height: 75px;
background-image: url('img/logo.jpg');
}
#header .search {
position: absolute;
left: 580px;
top: 0px;
width: 220px;
height: 50px;
padding-top: 8px;
color: #fff;
text-align: center;
font-size: 12px;
}
#header .links {
margin-left: 485px;
margin-top: 75px;
width: 315px;
height: 25px;
color: #fff;
text-align: center;
font-size: 12px;
}
div#mainarea {
position: relative;
margin-top: 5px;
height: 100%;
}
#mainarea .leftlinks {
position: absolute;
left: 0px;
top: 0px;
width: 175px;
height: 100%;
float: left;
}
div#directory {
position: absolute;
left: 175px;
top: 0px;
width: 625px;
height: 20px;
background-color: #5ca354;
}
div#content {
position: absolute;
left: 175px;
top: 20px;
width: 625px;
height: 100%;
background-color: #fff;
margin-top: 1px;
}
#leftlinks .top {
width: 170px;
height: 40px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main {
width: 170px;
min-height: 80px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#leftlinks .top1 {
width: 170px;
height: 40px;
padding-top: 5px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main1 {
width: 170px;
min-height: 80px;
padding-left: 10px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom1 {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#10padtop { padding-top: 10px; }
#10padleft { padding-left: 10px; }
#footer {
clear:both;
height:20px;
width: 800px;
margin-left: auto;
margin-right: auto;
color: #000;
border-top: 2px solid #7e3b29;
font-size: small;
font-variant: small-caps;
font-style: italic;
text-align: right;
}
#clearfooter {
clear: both;
height: 22px;
}
div>p {margin:0}
html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-22px;} /*safari wrapper */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
td.padded { padding: 5px; }
td.lmargin10 { margin-left: 10px; }
As you can see at the url for the page I'm working on, the main content section with the white background does not stretch the 100% height to where the footer is. I'm sure this problem is to do with the div that the content div is nested within, called 'mainarea'. This is because the content div does indeed stretch to the 100% height of 'mainarea', but mainarea does not stretch all the way to the footer despite me adding the "height: 100%;" attribute. How can I fix this? Another problem is regarding padding. For some reason when I give a div a padding attribute, it changes the size of the div as well! I have illustrated this problem by using padding only on the 2nd "Hot Links" section on the left. I need to use padding to get the text in the correct position but as you can see, this padding is causing each div to expand, which in turn means that the background images do not appear as they should. What can I do to fix this as well? Thanks a lot for any help regarding either of these issues! Hi, Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. I have been struggling with this problem since i first started creating this layout (ages ago, but for development reasons, i stuck static width/heights in, just to work on my screen). I have searched google numerous times, but with no avail, as sites go on about something which is irrelevant to what im wanting (so maybe vague/bad use of keywords in search). any way i did a quick search on here, and any help given, does not seem to fix up my layout. My first basic problem is having a side navigation bar to fill the height of the screen, plus the header which is a static height. All this without creating scroll bars for the browser My second problem, which may be more or less the same as the above (miss-understanding of css), having a 100% height which includes padding. Link: http://dlym.net/testing/css_help.php Source (html) Code: <html> <body> <div id="container"> <div id="top">header</div> <div id="sidebar">laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br></div> <div id="content"> <div id="childcontainer"> <div id="paddedbox"> <div id="test1">title</div> <div id="test2"> <div id="myElement"><a onclick="">main content</a></div> </div> </div> </div> </div> </div> </div> </body></html> CSS Code:
html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#container
{
width: 100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
background-color:grey;
position: relative;
}
#top
{
width: 100%;
height: 100px;
background-color:pink;
}
#main
{
width:100%;
height:100%;
}
#sidebar
{
background-color:red;
width: 150px;
height: 100%;
float: left;
}
#content
{
background-color:blue;
overflow:hidden;
padding:10px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
}
#childcontainer
{
background-color:white;
padding:10px;
}
#paddedbox
{
background-color:green;
margin-bottom:0px;
margin-top:0px;
overflow:hidden;
}
#test1
{
width:100%;
height:20px;
background-color:yellow;
}
#test2
{
width:100%;
height:100%;
background-color:lime;
}
The above is a simplified version of my site's layout, but they are the core div containers which i am trying to get positioned correctly. I seriously will thank any one who gives any help which leads me to fix this problem, as i am not too skilled with css, and this has been troubling me for some time. Thank you I have been trying to find a sloution to making a float:right layer for right navigation to have a height of 100% that is nested within a container that is a position:absolute, but everything I have googled for comes up with no help (or things that don't work.) (see attached pic) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
text-align:justify;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
line-height:24px;
}
#mainBox {
position:absolute;
right:12px;
top:9px;
padding:0px;
width:733px;
text-align:left;
/* background-color:#999999; */
}
#pageHeader{
height:202px;
background:url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent:-15000px;
overflow:hidden;
}
#nav{
position:absolute;
right:546px;
top:178px;
margin:0;
background:url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height:302px;
overflow:hidden;
}
#contentHdr{
position:absolute;
top:178px;
right:125px;
/* background-color:#CCCCCC; */
padding:0;
margin:0;
text-align:right;
width:400px;
height:38px;
overflow:hidden;
}
#contentTop{
position:absolute;
top:220px;
right:110px;
background:url(images/layout/content_top.gif) top left;
padding:0;
margin:0;
text-indent:-15000px;
width:423px;
height:28px;
overflow:hidden;
}
#content{
float:right;
margin:20px 17px 0 0; /* top right bottom left */
background:url(images/layout/content_bg.gif) top left;
padding-left:15px;
padding-right:15px;
padding-top:0;
padding-bottom:0;
width:393px;
overflow:hidden;
}
#rightNav{
float:right;
background-color:#FFFFFF;
padding:0;
margin:0;
width:93px;
height:100%;
clear:both;
overflow:hidden;
}
#pageFooter{
float:right;
background: url(images/layout/footer_matthew5_14.gif) top left;
padding:0;
margin:0;
width:702px;
height:92px;
text-indent:-15000px;
overflow:hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="rightNav"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>rightNav please work</td></tr></table></div>
<div id="contentTop"></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te?</p></div>
<div id="contentBottom"></div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Is there a solution to this? Thanks in advance! So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE. I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. I'm new to css web design and am attempting my first full layout. What I would like to do is have a hanging picture in the upper-righthand corner of the page that overlaps the header and content sections. All is well, until I specify a width or height on the content section. Although it looks fine in Firefox, IE either: a) moves the content section down or b) squishes the content to the side (if <!--<?xml version="1.0" encoding="utf-8"?>--> is in the html) Here's some much-simplified code to illustrate the problem: 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="images/style_test.css" rel="stylesheet" type="text/css" />
<title>Sandbox</title>
</head>
<style type="text/css">
#header {
background-color: #cccccc;
border: 1px solid #564b47;
}
#content {
background-color: #c6dedf;
border: 1px solid #564b47;
width: 100%;
height: 400px;
}
#hanging {
float: right;
background-color: #ccff99;
border: 1px solid #564b47;
margin: 20px;
padding: 0;
width: 300px;
height: 300px;
clear: right;
}
#footer {
background-color: #cccccc;
border: 1px solid #564b47;
clear: both;
}
</style>
<body>
<div id="hanging"><code>#hanging {<br>
float: right;<br>
background-color: #ccff99;<br>
border: 1px solid #564b47;<br>
margin: 20px;<br>
padding: 0;<br>
width: 300px;<br>
height: 300px;<br>
clear: right;<br>
}</code><p>This SHOULD overlap header & content.</p></div>
<div id="header"><code>#header {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
}</code></div>
<div id="content"><code>#content {<br>
background-color: #c6dedf;<br>
border: 1px solid #564b47;<br>
width: 100%; /* hanging doesn't like this */<br>
height: 400px; /* or this in IE*/<br>
}</code></div>
<div id="footer"><code>#footer {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
clear: both;
}</code></div>
</body>
</html>
Anyone know a work-around or how to fix this? Thanks! Hey, I been wondering, when using XHTML Strict, what is considered the correct way of making a block level element (like a division) and the document body fill-out/fit the browser window vertically? The way I've been accomblishing this is by using javascript to set the height of the body when-ever the page is loaded and resized, though using something like this(of course, using document.documentElement.clientHeight for IE and using a more sane variable name for the sum of the top and bottom margins ) Code: document.body.style.height = (window.innerHeight - sumOfTopAndBottomBodyMargins) + "px"; and and setting the block level elements css height property to 100%. This works, but its lame! When resizing, the block level element doesn't get resized before you are done resizing and the appropriate event is fired. Not very 21th century. So, to sum up.. can some friendly soul please enlighten me on how I can do this in a decent way using only CSS? Cheers Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. |
|||||||