|
CSS - Ie Ruins My Life! 'clear Right' Not Working In Ie
I wish the world would abolish internet explorer, it doesn't seem to understand simple commands like the other browsers!
My problem is this: i'm building a template from scratch using dreamweaver (for speed really) and I've positioned a left menu div, a breadcrumbs div and 2 other small divs in a row. my next div is the main content which is told to 'clear right' of the last small div in (which is floated right) so that it appears underneath the breadcrumbs and flush alongside the left menu div. Firefox and Chrome seem to understand this, but IE doesn't! in IE it's appending it onto the line above, thereby not 'clearing right' as it's told. You can see it he #wheretoflyguide .com and my CSS is below: #menu_left { background-color: #9CF; float: left; min-height: 200px; width: 180px; } #breadcrumbs { float: left; height: 16px; width: 485px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-bottom-style: groove; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; text-indent: 3px; margin-left: 3px; color: #999; } #rss_date_user1 { height: 16px; width: 145px; float: left; border: thin none #999; margin-left: 2px; margin-top: 1px; } #date_user5 { height: 16px; width: 160px; float: right; text-align: right; margin-right: 3px; } #content_area { min-height: 200px; width: 480px; clear: right; float: left; background-color: #C93; margin-top: 3px; margin-left: 3px; } I also have another problem, and that is I've made a container to wrap everything in but it doesn't seem to want to extend with the contents. I have put body { height :100%; } and #container {min-height :100%} but that didn't give me anything on screen, so I changed it to #container { min-height:768px} which gave me a box that was 768px tall but doesn't extend beyond that when the content goes beyond it. (yes i have everything wrapped inside <div id="container"> </div> PLEASE HELP! Similar TutorialsCan someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)? Here's the page (I put a 1p border around the "clear" div so that you can see it for testing): http://www.welcome-home-interiors.net/services.php Below is the HTML and CSS... HTML: Code: <body>
<div id="container">
<div id="header">
<?php include('includes/flashHeader.php'); ?>
</div>
<div id="nav">
<?php include('includes/navbar.php'); ?>
</div>
<div id="maincontent">
<div id="mainLeftText">
<p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
<div id="mainLeft">
<p><span class="header">INTERIOR DESIGN</span><br />
Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
<p><span class="header">REAL ESTATE STAGING</span><br />
"Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
<p><span class="header">ROOM REDESIGN</span><br />
Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
<p><span class="header">SHOPPING</span><br />
Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
<p><span class="header">YOUR NEW PLACE</span><br />
Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
<p><span class="header">GIFT CERTIFICATES</span><br />
Welcome Home Interiors GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
<p><span class="header">FEES</span><br />
Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
</div>
</div>
<div id="mainRight">
<p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
CSS: Code: html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}
#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}
#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}
/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}
Thanks!... I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color. Is there anyone than can tell me how to make a .png's background clear in internet explorer? Greetings, I basically have a few images, and they're small pieces forming a bigger image, i.e., some people call this "slicing". Now I'm trying to use the float and clear properties to make the big image show properly using those smaller slices. So far, I'm having no trouble whatsoever with the big image showing exactly as I want it on Firefox. But Internet Explorer (which I really can't stand anymore) will not show the image properly. Here's the sequence, I hope you'll be able to visualize it easily: 1st image is floated left with clear right, 2nd image is floated left with clear both, 3rd image is floated left with clear left, 4th image is where the problem is, it has to come after the 3rd image, to its right, and a 5th image comes after the 4th, too, on the same line. So I cannot clear either right or left of the 4th image. What happens in IE is that the 4th image, instead of showing up next to the 3rd image (to its right), it goes ALL the way up and stays to the right side of the first image! As if the clear:right of the 1st image and clear:both of the 2nd image are not working at all. Again, this does not happen in Firefox. How can I correct this, please? Thanks for anyone taking the time to give information and tips. I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code. Code: <td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td> Hi. Am making a site and used Matthew James Taylor's perfect two column layout ... it looks exactly how I want it to look on firefox, safari, chrome, and ie7. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-good.png} On ie the main content div is smashed up against the menu on the left, and some of it shows up UNDER the menu. The nice border on the right side of the menu is pushed out from the menu (the faux-drop-down sub menu is supposed to be pushed out from the main set, and should be on top of the border as in firefox, chrome, etc). It's ugly. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-bad.png} I did try making all my overflows: hidden; I did try adding display: inline;, but this changed nothing and I don't think that's the problem. This is a portfolio to help me find a new job, and I need this to look good. Any help would be greatly appreciated. Code below, and links to mock-up duplicates (can't post original for legal reasons as there are student photos). THANKS. CSS: Code:
/* General styles */
body {
padding: 0;
margin: 0;
border: 0;
background: #F6F0E6;
width:100%;
min-width:600px;
font: normal 80% arial, verdana, helvetica, sans-serif;
color: #333
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
background-color: #778899;
border-bottom: 6px solid #fff;
padding: 0;
height: 200px;
background-image: url('log.png');
background-repeat: no-repeat;
text-align: right;
}
#header p {
font-weight: bold;
font-size: 1.3em;
color: #F6F0E6;
margin: 30px;
}
/* column container */
.container {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* 2 column left menu settings */
.sidelinks {
padding: 0;
margin: 0;
}
.sidelinks .content {
float:left;
width:200%;
position:relative;
left:196px;
background: #F6F0E6;
}
.sidelinks .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
}
.sidelinks .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow: hidden;
}
.sidelinks .col1 .meat {
width: 660px;
margin: 50px auto;
text-align: center;
margin-top: 30px;
background: #F6F0E6;
overflow: visible;
}
.sidelinks .col1 .meat p {
max-width: 600px;
text-align: justify;
line-height: 160%;
margin: 2em auto;
}
.sidelinks .leftcol {
float:left;
width:196px;
position:relative;
right: 200px;
border-right: 4px solid #778899;
}
/* Header styles */
h2 {
text-align: center;
font-size: 1.3em;
border: 1px #778899 solid;
padding: 6px;
background-color: #fff;
margin: 20px -30px;
color: #708090;
overflow: visible;
}
h3 {
text-align: center;
font-size: 2em;
color: #708090;
text-shadow: 2px 2px 0px #fff;
margin: 0 0 30px 0;
border-bottom: 4px #778899 double;
}
h4 {
font-size: 1.2em;
color: #708090;
text-shadow: 1px 1px 0px #fff;
}
h5 {
font-size: 1.1em;
text-align: center;
color: #708090;
padding: 0;
margin: 0;
letter-spacing: 3px;
font-weight: bold;
}
/* Link styles */
.leftcol {
width: 210px;
text-align: right;
padding: 10px 0 0 0;
margin: 0;
height: 100%;
}
.leftcol ul {
margin: 5px 10px 5px 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
}
.leftcol a {
display: block;
padding: 20px 10px;
margin: 10px 0;
width: 176px;
height: 100%;
}
.leftcol a:link, .leftcol a:visited {
color: #708090;
text-decoration: none;
}
.leftcol a#current {
background-color: #778899;
color: #fff;
}
.leftcol a:hover {
background-color: #c1cdc1;
color: #708090;
}
#header a {
color: #F6F0E6;
}
#header a:link, #header:visited {
color: #F6F0E6;
text-decoration: none;
}
#header a:hover, #header:active {
color: #fff;
}
a:link.inline, a:visited.inline {
font-weight: bold;
text-decoration: none;
color: #4a708b;
border: 2px solid transparent;
border-bottom: 1px dotted #4a708b;
padding: 2px;
padding-bottom: 0;
}
a:hover.inline, a:active.inline {
color: #4a708b;
border: 2px solid #4a708b;
background: #fff;
}
/* Image styles */
img.classroomculture {
border: 2px #708090 solid;
margin-bottom: 10px;
text-align: center;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}
img.teachinghistory {
border: 2px #708090 solid;
float: left;
margin-right: 30px;
margin-bottom: 10px;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}
.sidelinks .col1 .meat p.picturecaption {
text-align: center;
color: #000;
font-style: italic;
margin-top: 2em;
padding: 8px;
background: #fff;
border: 1px #708090 solid;
}
/* Footer styles */
p.minifoot {
text-align: center;
margin:0;
padding: 0 0 20px 0;
}
#footer a:link, #footer a:visited, .minifoot a:link, .minifoot a:visited {
font-weight: bold;
text-decoration: none;
padding: 6px 20px 20px 20px;
color: #fff;
background-color: #778899;
border: 3px #c1cdc1 solid;
border-bottom: 0 #c1cdc1 solid;
}
#footer a:hover, #footer a:active, .minifoot a:hover, .minifoot a:active {
color: #708090;
background-color: #c1cdc1;
border: 3px #778899 solid;
border-bottom: 0 #333 solid;
text-decoration: underline;
}
#footer {
clear:both;
float:left;
width:100%;
text-align: center;
margin:0;
padding: 0;
border-top: 3px solid #c1cdc1;
border-bottom: 10px solid #778899;
}
#footer p {
padding:10px 10px 0 10px;
margin:0;
}
.inset a:link, .inset a:visited {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #c1cdcd;
width: 170px;
text-align: center;
border: 1px solid #708090;
font-size: .9em;
}
.inset a:hover, .inset a:active {
background-color: #9fb6cd;
color: #fff;
}
.inset a.here {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #778899;
width: 170px;
text-align: center;
border: 1px solid #708090;
color: #fff;
}
.inset a#special {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #f4a460;
width: 170px;
text-align: center;
border: 1px solid #708090;
}
.inset a#special:hover, .inset a#special:active, .inset a#hot{
color: #fff;
background: #ee7942;
}
ul.downloads {
line-height: 170%;
text-align: left;
}
.downloads a:link, .downloads a:visited {
color: #708090;
padding: 2px 2px 0 2px;
width: 170px;
text-align: center;
border-bottom: 2px solid #fff;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
}
.downloads a:hover {
background-color: #9fb6cd;
color: #fff;
border-bottom: 2px solid #708090;
font-weight: bold;
text-decoration: underline;
}
HTML: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" media="print" type="text/css" href="portfolioprint.css" />
<link rel="stylesheet" media="screen" type="text/css" href="portfolioscreen.css" />
<style media="screen" type="text/css">
/* <!-- */
/* --> */
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<p>
text here
</p>
</div>
<div class="container sidelinks">
<div class="content">
<div class="col1wrap">
<div class="col1">
<!-- Right Column Start -->
<div class="meat">
<h5>Beginning ESL</h5>
<h3>Process Writing: Biographies</h3>
<p style="margin-top: 0px;">text here
</p>
<p style="text-align: center;">
<img class="classroomculture" src="monkeydog.png" height="446" width="500" alt="">
</p>
</div>
<p class="minifoot">
<a href="#header">Race to the Top</a>
</p>
<!-- Right Column End -->
</div>
</div>
<div class="leftcol">
<!-- link list start -->
<ul id="LinkList">
<li><a href="junk-index.html">Teacher for Hire</a></li>
<li><a href="#">My Teaching History</a></li>
<li><a href="#">Classroom as Evidence</a></li>
<li id="active"><a href="#" id="current">Sample Teaching</a></li>
<li class="inset"><a href="#">Evidence of Theme</a></li>
<li class="inset"><a href="#">Simple Definitions</a></li>
<li class="inset"><a href="#" class="here">Process Writing</a></li>
<li class="inset"><a href="#">Reading for Non-Readers</a></li>
<li class="inset"><a href="#">Differentiated Assessment</a></li>
<li class="inset"><a href="#">Regents Prep</a></li>
<li class="inset"><a id="special" href="#">Special Note</a></li>
<li><a href="#">Download Resume</a></li>
<li><a href="#">Other Downloads</a></li>
</ul>
<!-- link list end -->
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
code, screen shots / photos, everything available at http:// mledavis [dot] fastmail [dot] fm /fix-me/ Again, thank you. I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong? TIA Javashackgirl I have a site with a bunch of floats. It looks something like this: [HTML]<div id="nav" style="float: left"> </div> <div id="content"> <div style="float: left"> </div> <div style="float: right"> </div> <br style="clear: both" </div>[/HTML] Now that clear:both also clears #nav instead of the two divs in #content. Is there any way to fix this so it doesn't clear #nav? Hello, Consider the following design: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> </div> And the CSS classes: .A {float:left; clear:left} .B {float:left; clear:right} This does not work well. So I always do as follow: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> <div id="clear" class="clear"></div> </div> Whe .A {clear:both} This always happens when I have divs inside other divs. Does anyone knows how to solve this? Thanks, Miguel I'm trying to get a container div to stretch to the size of it's contents. Note, #navigation and #title will be for aesthetics only and aren't being used yet. Am I wrong in thinking that the clear has to go in the containing div, not the component divs? Anyway, I've tried both and neither works. I have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Blog</title>
</head>
<body>
<div id="title">
<!-- title -->
</div>
<div id="navigation">
<!-- search -->
<!-- jumpbox -->
<!-- subscription_and_rss_images -->
</div>
<div style="border:3px solid red; clear:both">
<div class="leftcolumn" style="border:3px solid green;">
<!-- menu --> <!-- leave this tag in for menu in Admin CP -->
<!-- referrers -->
<!-- photo -->
<!-- calendar -->
<!-- baby -->
</div>
<div class="rightcolumn" style="border:3px solid blue;">
<!-- content -->
</div>
</div>
<div style="border:3px solid yellow;">
<!-- credit -->
</div>
</body>
</html>
And CSS: Code: div.leftcolumn{
float: left;
width: 200px;
}
div.rightcolumn{
position: relative;
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
This produces: I've got a div that incorporates some inline styling. Looks fine on a blank page, but when I insert it into a more complex page it inherits all the styling of the stylesheets. Is there anyway to I can have this div ignore all inherited styling and just format itself according to browser defaults and its own inline styling? Hello, The divs numbered #4(extra2) and #5(navigation2) cannot give way to other divs . How can I clear the other divs? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template 8</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color:#981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#navigation2{background:#CC33FF}
div#extra{background:#FF8539}
div#extra2{background:#996633}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#navigation2{float:left;width:150px;margin:170px 0 0 -150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#extra2{float:left;width:150px;margin:170px 0 0 -700px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>website name</h1>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very column long make </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillercolumn fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="navigation2">
<p><strong>5) Cannot clear above div (id=Navigation).</strong> cannot clear above div, this div should be below the div NAVIGATION</p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very </p>
</div>
<div id="extra2">
<p><strong>4) Cannot clear above div (id=EXTRA).</strong> cannot clear above div, this div should be below the div EXTRA </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
In this header www.johnschureman.com I have an image, an h1 and a subtitle div. Code: <div id="header">
<img src="../images/jschu-crop150h.jpg">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
<div id="subtitle">
<!-- Here's the tagline -->
<?php bloginfo('description'); ?>
</div>
</div>
I cannot figure out in my css how to make the subtitle appear below the h1. Code: #header {
margin:0;
padding:0;
height:170px;
padding: 0px;
margin-top: 3px;
/* padding-top:110px;
padding-bottom:10px;
padding-right:20px;
padding-left:5px;*/
border-bottom: 1px solid #bab1b1;
background: #404040;
}
#header img {
float:left;
display:inline;
margin: 0 auto;
padding: 10px 10px;
border:none;
}
#header h1{
display: inline;
float:right;
padding:0px;
margin: 0px;
padding-top:100px;
margin-bottom:3px;
margin-right: 5px;
font-size: 2.4em;
letter-spacing:0.1em;
}
#subtitle {
text-align:right;
font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
margin-bottom:3px;
margin-right: 5px;
font-size: 0.9em;
text-transform:uppercase;
color:#bbb;
}
Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance. - Willi hello all, once again, IE is presenting problems where everything else is just fine. specifically, my footer isn't clearing. i've looked around and apparently this is nothing new, but none of the fixes seem to be working. so first, the offending page (one look in IE and all will be understood instantly): http://www.teamsnowvalley.com/news/headline.php?id=12 i've made the footer RED to indicate the snafu in IE. relevant CSS (i stripped out unnecessary crap): #content { float:left; display:block; margin:0 0 25px } #content .full { float:left; width:500px; padding-right:15px; border-right:solid 2px #CCC } #rightSideBar { float:left; padding-left:15px; width:207px } #footer { clear:both; padding:20px 0; background:red url(/images/footerBG.gif) repeat-x top } HAAAAALLLLLPPP thanks m I finally got the alpha loader to work.. and, my transparent PNG files work great as a background in IE - I even have a page that loads many links for using Lightbox.. and, it works great. But.. now.. in Firefox and Safari.. I don't have a background.. it is crystal clear.. *Gulp* Can anybody help me? I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start. Any ideas plase? Code: <div id="container">
<div id="home_col_1">
<img src="images/holder_slideshow.png" alt="" width="446" height="365" />
<div id="home_col_1_1">
column 1<br />
column 1<br />
column 1<br />
column 1<br />
column 1
</div>
<div id="home_col_1_2">
<p> column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
</div>
<div id="home_col_2">
<p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
</div>
<div id="home_quicksearch">
Search Box Here
</div>
<div id="home_col_3">
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
</div>
<div id="home_col_4">
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
</div>
<div class="clear_floats"></div>
</div>
Code: #container { width: 986px; margin:0 auto; }
#home_col_1 { width:446px; height:365px; float:left; }
#home_col_1_1 { width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_1_2 { width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_2 { width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3 { width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4 { width:142px; float:left; padding:0 10px; }
#home_quicksearch { width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px;
background-color:#FFFFFF; }
#footer { width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }
never mind. Hi, I have a problem with the following page, basically the second album blocks (labelled "2006, Carnival") won't start until the navigation menu on the left has finished: http://www.realsteel.org.uk/photos/ The following page suffers a similar problem, with the address not starting until the navigation menu on the left has finished: http://www.realsteel.org.uk/contact/ in this case I thought I could fix it by removing the clear on .contact_system .area but then this broke the formatting of the address. Can I apologise in advance for the poor shape of my CSS and XHTML, I'm in the position of not having anything enough time to spend on this aspect of the project. I find that I only get to work on the CSS / XHTML side of things every few months or less, consequently each time I look at it I've forgotten what I learnt the last time and am back to square one. I also find that I don't know why I did what I did the last time! I hope someone can find it in their time to assist! All constructive criticism is very much welcome, whether to do with the above problem or not. Thanks, Geoff Hello, I have used the containment hack in several of my projects. However I found examples where they use "<div style="clear:both"></div>". The result is the same. So which one should I use? Does anyone know why the clear: left isn't working on firefox 1.0 on this page. Generic Page with floating divs and then clearing them for a new line. http://section31.us/temp/float_boxes.html Am I doing something wrong or is this a bug? |
|||||||