|
CSS - Circumventing The Default Minimum Height On Divs In Ie6
I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc.
I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em. I specified height and width on all <div>. Some used borders, some did not. An example would be: PHP Code: <div style="height:2px; width:3px; background:green" ></div> Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same. Any help appreciated. NotGoddess Similar Tutorialsi was trying to position what should have been a square of 5px by 5px on the screen, but ended up with a rectangle with a width of 5px but a height of what looked like at least 10px ! all margins + paddings had been set to zero, so that wasn't the reason in the end i managed to draw a square by adding : Code: max-height: 5px; overflow: hidden; to the div's style it still puzzles me though : does a <div> element have a default minimum height ? Hello all, I'm trying to find a solution for the problem hereafter : I'm building a css2 based website where all thelayout is controlled in the CSS. I have in my website a main "body" box identifier by a CSS ID. This "body" is a container for various articles. It has a background and borders. I would like this "body" box to have a minimum heigth so that even if the content (ie the article) is made of two lines, the background and the borders have this minimum size. The problem is that if i use the "heigth" attribute in my CSS id, when the content is longer for that heigth, the box is not extended, only the text, going out of the box. To summarize, i'm looking how to fix a minimum height to a DIV or any block component of a css, without limitating this block to this only height. I hope i have beel clear, if any of you have an idea for this, it would be very helpfull to me, as this is a very recurrent problem. Thanks by advance Hello! I'm working on a website right now and have sort of dived in further than I understand conditional CSS. The website is he www.kekoz.com I have that little menu in the upper right and the info in the lower right. I like those being fixed so when the user scrolls they are always up there. But I can't figure out how to make them stop from colliding with the main pictures when you change the height of the page. Any help would be grand! Right now they're position super simple: Code: #links{ position:fixed; top: 20px; right:20px; width:300px; }
Code: #info_box{ position:fixed; bottom: 25px; right:10px; width:550px; }
I tried to set a minimum height on them, but I think that would have to do with some sort of a container around them. Or maybe I'm just going about it all wrong. Also a couple other things I'm sort of thinking. I would like the "Scroll this way" thing to always be centered between the lower edge of the pictures and the bottom of the window. Not %100 sure how to get that set up. And the last thing I'm thinking for this page, which I'm not sure is all CSS would be to have the "scroll this way" thing actually fade based on the scroll position. I think this might be Jquery but thought I'd throw it out there to see if anyone had any advice. I'm a newbie to css. I'm trying to convert tables to css and having a bit of a tough time. Latest problem - create a window or container with a one line border with minimum height, say 600px, but the height will expand as the content grows. Any help? Thank you kindly! hi.. i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... i have 2 divs one is a navigation bar, the other is the pages main contents. the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa. how do i go about doing this? Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border. Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line. My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div? Here is an example of what I have right now (before tackling the problem): CSS: Code:
#content {
width: 800px;
margin: 0;
padding: 0;
}
#contentNav {
width: 140px;
float: left;
border: thin solid black;
margin: 0;
padding: 0;
}
#contentMain {
width: 600px;
float: right;
margin: 0;
padding: 0;
}
HTML: Code: <div id="content"> <div id="contentNav"> <a href="">Link1</a><br /> <a href="">Link2</a><br /> <a href="">Link3</a><br /> </div> <div id="contentMain"> <p>Here comes a lot of text that spans over many lines. </div> </div> Hey guys, so I've cleaned up my code a bit. Read up on semantic coding. I think it's a bit better. Anyways, I'm trying to make my right and left content div's the same height. I've tried the faux technique, and it doesn't seem to work. Anyways, I was wondering if it's worth the 5 hours of headache to avoid using tables to setup the layout? I think it would be nice to have it in DIV's, that way if I want to switch left to right, and vice versa, it would be a breeze. Also, for the content, I'd like the left (main) side to be the remainder of the page width, and I'd like the right side to be 260px. If it works better, I wouldn't mind having the main part 77% of the width and the right side be 23%. Anyways, here's my code: html4strict Code: Original - html4strict 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beta</title> <style type="text/css"> <!-- @import url("layout.css"); --> </style> </head> <body> <div id="container"> <!-- Site Head --> <div id="header"> <div id="banner"></div> <div id="head_user_container"> <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div> <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div> </div> </div> <!-- End Site Head --> <!-- Menu --> <div id="menu"> </div> <!-- End Menu --> <!-- Start Top Ad Banner --> <div id="top_ad"> </div> <!-- End Top Ad Banner --> <!-- Main Content Container --> <div id="content_container"> <div id="main_content"> eh... </div> <div id="right_content">right content <br />yes sir</div> </div> <!-- End Main Content Container --> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and heres my css: Code:
/*Basic Elements*/
body {
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #303030;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0 20px;
background-color: #d8d8d8;
}
p {
margin-top: 10px;
text-align: justify;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13pt;
line-height: 10pt;
}
a:link {
text-decoration: underline;
color: #417cb3;
}
a:visited {
text-decoration: underline;
color: #417cb3;
}
a:hover, a:active {
text-decoration: underline;
color: #5e9cd5;
}
acronym {
font-weight: bold;
border-bottom: 1px dotted #417cb3;
}
/*Specific DIVs*/
#container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
max-width: 1204px;
min-width: 950px;
height: 100%;
clear: both;
text-align: left;
position: relative;
}
/*- Banner -*/
#header{
background-color: #417cb3;
height: 74px;
width: 100%;
clear: both;
float: left;
border-left: solid 1px #496986;
border-right: solid 1px #496986;
}
#banner{
background-image: url(img/layout/not_yet.jpg);
background-repeat: no-repeat;
float: left;
width: 284px;
height: 74px;
}
/*End Banner*/
/*Head User Info*/
#head_user_container{
background-image: url(img/layout/logged_info_bg.jpg);
background-repeat: repeat-x;
clear: both;
height: 66px;
position: absolute;
right: 4px;
top: 4px;
}
#head_avatar{
background-image: url(img/layout/ban_avatar_bg.jpg);
height: 66px;
width: 64px;
float: left;
background-repeat: no-repeat;
padding-top: 1px;
padding-left: 1px;
}
#head_user_info {
background-image: url(img/layout/logged_info_end.jpg);
background-position: right 0;
background-repeat: no-repeat;
min-width: 225px;
max-width: 500px;
float: left;
height: 66px;
margin-left: -1px;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 5px;
}
#head_user_info a:link {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:visited {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:hover, a:active {
text-decoration: none;
color: #7fc9f8;
}
#head_user_end {
float: left;
background-image: url(img/layout/logged_info_end.jpg);
background-repeat: no-repeat;
height: 66px;
width: 3px;
}
/*End Head User Info*/
/*Menu*/
#menu{
background-color: #417cb3;
background-image: url(img/layout/menu_bg.jpg);
background-repeat: repeat-x;
height: 34px;
width: 100%;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
/*End Menu*/
/* Top Ad Banner*/
#top_ad{
background-color: #ededed;
height: 109px;
width: 100%;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
/*End Top Ad Banner*/
/* Main Content */
#content_container{
width: 100%;
overflow: hidden;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
#main_content{
background-color: #fff;
clear: both;
margin-right: 260px;
}
#right_content{
width: 260px;
background-color: #ffead1;
position: absolute;
right: -1px;
top: 217px;
}
/* End Main Content */
Here's the site, and what it looks like right now: http://24.16.238.252/sd_beta/working/layout2/ Anyways, thanks for all your help guys! If you need more info, let me know! I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns. I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns. You can see a non-css example at: http://www.sananselmopreschool.org/pilot/ Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so. body { height:100%; padding:0; margin:0; background-color:#ECF6DD; font-family: Tahoma; font-size: 11px; color: #707070; text-align:center; border: 1px solid purple; } .body_container { position: relative; height:100%; width:100%; left: 0px; border: 1px groove darkred; } .body_position_center { height:100%; position:relative; width:780px; margin-right: auto; margin-left: auto; border-collapse:collapse; border: 1px solid #999 ; } .header { padding:0; margin:0; position:relative; width:766px; height:195px; } .leftblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .centerblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .rightblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .blockcontents { padding-top:14px; padding-bottom:14px; border-bottom : 3px dotted #228B22; text-align:left; } Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution. Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished. However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Im currently working on converting my companys site to CSS2 and XHTML (www.fwawest.com) as the current one dose not comply to any standard I have managed so far to creat the top banner including down to "Construction News : UK News :" The problem Im having is the 3 colums under that. I have the 3 colums but when you resize the browser I dont want the 3rd colum to go behind the content. in other words I want the whole site to have a minimum width. becuase atm the 1st Colum (navAlpha) and the main contents (content) stay where they are which is not a problem and content has a minimum width of 300px but when you make the browser small anouth to hit the minimum width the 3rd colum (navBeta) gose behind the content. CSS Code:
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width: auto;
top:0px;
min-width:120px;
margin-left: 190px;
margin-right: 190px;
border:1px dashed black;
background-color:white;
padding:20px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:200px;
left:0px;
top:138px;
border:1px dashed black;
background-color:#eee;
z-index:2;
padding:10px;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
#navBeta {
position:absolute;
width:200px;
top:138px;
right:0px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
HTML Code: <!-- Main Content --> <div id="navAlpha"> <p title="'left' DIV">example text</p> </div> <div id="navBeta"> <p title="'right' DIV">example text</p> </div> <div class="content"> <p title="'middle' DIV">example text</p> </div> P.S No I did not make the orginal site , and yes it uses tables can it be done? ideally in IE5-6 and Netscape6+ cheers |
|||||||