|
CSS - Ie Problem After A Link Is Clicked - Height Of Wrapper Div Changes
Similar TutorialsI have a wrapper div 700px wide that is currently set to the following: Code: div.wrapper {
width: 700px;
height: auto;
background-image: url(../local/images/content.gif);
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
text-align: left;
padding: 0.05in;
position: absolute;
left: 50%;
margin-left: -350px;
border: 2px #000000 ridge;
}
It renders fine in IE, FF, and Opera. Since the height of the content varies, I am trying to accomplish a minimal fixed height of 700px OR larger if the content is longer than 700 px. Any ideas? I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
Thanks, FletchSOD I'm having trouble getting my content to contain within my wrapper in #$%@% IE. Works as expected in Firefox, of course. I simply want to create a background and then put all of my content on top of that background. CSS; Code: html, body {
margin: 0;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 0;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
#logo {
position: relative;
top: 50px;
border: 0;
padding: 0;
}
HTML; Code: <BODY> <DIV class="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV> <DIV class="wrapper"> <!-- Setup the header area --> <DIV id="logo"><img src="images/header_01.jpg"></DIV> </DIV>--> </DIV> </BODY> </HTML> And with that, presto! IE 8 intelligently puts the logo at the bottom of the page. I'd almost rather build tables nested 20 deep than deal with this! Hello. I am new to website making and I am trying to create a wrapper that is centered, and 2 <divs> in it. One that will align to the right of the wrapper, one to the left. Heres what I did CSS: Code: #Wrapper {
z-index: 3;
position: absolute;
width:800px;
height:600px;
top:40px;
margin-left: auto;
margin-right: auto;
border: 4px solid red;
background-color: transparent;
}
#Left {
z-index: 2;
position: relative;
width:80px;
height:100px;
top:20px;
left:10px;
border: 1px solid #FFF;
background-color: rgb(255,255,0);
}
#Right {
z-index: 1;
position: relative;
width:100px;
height:80px;
right:10px;
border: 1px solid #FFF;
background-color: rgb(0,255,0);
}
HTML Code: <!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Adzu Kiyako">
<meta name="copyright" content="Copyright Stuff here">
<meta name="robots" content="noindex">
<title>Title of my page</title>
</head>
<body>
<body id="htmlsource">
<body style="background-color:#292929;">
<div id="Wrapper"></div>
<div id="Left">This should be on the left side of the centered wrapper</div>
<div id="Right">This should be on the Right side of the centered wrapper</div>
</div>
</body>
</html>
My problem is 1-The wrapper does NOT align in the center of the page, and 2- The 2 other <div> dont seem to care about my wrapper, the position themself relatively to the viewport, not my wrapper... Any clue of what I can do? Please go easy on me, this is so new to me! Thanks a million times! I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little 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" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this? the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css Any help is appreciated. Thanks in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE. I wish to contain all div tags together, Would appreciate help. I am trying to display some data from a mysql file in a spreadsheet format. The first column of data displayed is boolean so I want to show it as a check box, which requires defining a form. When I do this is it increases the row height on the screen, regardess of what I set the height to in the css file. If I take out the form column, it respects the row height setting in the css file. Any thoughts on why the form overrides the row setting and how to fix it? PHP Code: <tr class="firstrow"> <td class="colDone"> <form class="form1" name="form1" method="post" action=""> <input <?php if ($row_rsList['isDone']) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" value="checkbox" disabled="disabled" /> </form> </td> <td class="colItem"><?php echo $row_rsList['taskitem']; ?></td> <td><?php echo $row_rsList['taskpriority']; ?></td> <td><?php echo $row_rsList['taskcategory']; ?></td> <td><?php echo date("m-d-Y",strtotime($row_rsList['taskduedate'])); ?></td> </tr> from css file: tr.firstrow { background-color:#FFFFCC; height: 20px; } Hopefully someone can help. I can't seem to get a div to have 100% height to work properly across all browsers. http://dis.emsix.com/default.asp The outermost div (with the gray side borders) is supposed to stretch the page length. I've made some minor fixes to get it to work in IE6 & 7, but it doesn't work in Safari of Mac FF (PC FF is fine). Any help with or insight on this would be great! Thanks in advance. Hello, This is my first post here, I have been trying at another forum to get help but it seems they have a constant flow of 80 viewers and none of them know css? The sooner this can get done, the better and thanks in advance! Problem: I have many divs, bla bla bla. Then it comes down to having the main container holding several divs. The container holds a left and right div. Within the left and right div are a few more divs, such as top divs and then a nav and some content. Basically, the nav and content don't end at the same point ( and they should ). ALSO, when content exceeds the current content space ( which is set at one spot for some reason? ) the content space just stays and the content runs on farther. Please take a look at the index file and css below and see if you can help me with my two problems, and again Thanks!! Code: <?php
$menu = $_GET['menu'];
if (isset($menu)) {
include ("$menu.php");
} else {
include ("home.php");
}
?>
<html>
<head>
<title>Mark's coins & jewlery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="misc/stylesheet.css" rel="stylesheet" type=text/css title=default />
</head>
<body>
<div id="container" class="clearfix">
<div id="left">
<div id="flashbg">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=6,0,29,0" width="206" height="171">
<param name="movie" value="misc/movie.swf">
<param name="quality" value="high">
<embed src="misc/movie.swf" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="206" height="171"></embed>
</object>
</div>
</div>
<div id="nav"><br />
<img src="misc/ladiesjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lrings">Ladies Rings</a> </li>
<li><a href="index.php?menu=lnecks">Ladies Necklaces</a> </li>
<li><a href="index.php?menu=lwatches">Ladies Watches</a> </li>
<li><a href="index.php?menu=lbpp">Ladies Brooches, Pins & Pendents</a>
</li>
<li><a href="index.php?menu=lbracelets">Ladies Bracelets</a> </li>
<li><a href="index.php?menu=purses">Purses</a> </li>
</ul>
</div>
<img src="misc/mensjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=mrings">Mens Rings</a> </li>
<li><a href="index.php?menu=mchains">Mens Chains</a> </li>
<li><a href="index.php?menu=mbracelets">Mens Bracelets</a> </li>
<li><a href="index.php?menu=mwatches">Mens Watches</a> </li>
<li><a href="index.php?menu=mpendents">Mens Pendents</a> </li>
</ul>
</div>
<img src="misc/coins.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=goldeagles">Gold Eagles</a> </li>
<li><a href="index.php?menu=silvereagles">Silver Eagles</a> </li>
<li><a href="index.php?menu=morgandollars">Morgan Dollars</a> </li>
<li><a href="index.php?menu=peacedollars">Peace Dollars</a> </li>
<li><a href="index.php?menu=othercoins">Other Coins</a> </li>
</ul>
</div>
<img src="misc/crystalandcollectible.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lalique">Lalique</a> </li>
<li><a href="index.php?menu=versace">Versace</a> </li>
<li><a href="index.php?menu=antique">Antique</a> </li>
</ul>
</div>
</div>
</div>
<div id="right">
<div id="logo">
<center>
<img src="misc/logo.jpg" />
</center>
</div>
<div id="redbar"> </div>
<div id="content">
<?php
if (isset($menu)) {
echo "<center><img src=headers/$menu.jpg /></center><br />";
} else {
}
echo "$content";
?>
</div>
</div>
</div>
</body>
</html>
stylesheet Code: html, body {
height: 100%;
}
body {
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#container {
background:#FBFBFB 0 0 repeat-y;
height: 100%;
width: 648px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
html #container {
height: 100%;
}
#left {
float: left;
width: 223px;
height: 100%;
background-color: #FBFBFB;
}
#flashbg {
position: relative; left: 0px; top: 0px;
width: 223px;
height: 190px;
background-image: url(flashbg.jpg);
}
#flash {
position: absolute; left: 7px; top: 7px;
width: 206px;
height: 171px;
}
#nav {
position: relative; left: 0px; top: 0px;
width: 223px;
background-image: url(navbg.jpg);
}
#right {
float: right;
width: 425px;
}
#logo {
position: relative; left: 0px; top: 0px;
width: 425px;
background-color: #000000;
}
#redbar {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 31px;
background-image: url(redbarbg.jpg);
}
#content {
position: relative; left: 0px; top: 0px;
height: 100%;
width: 425px;
background-color: #FBFBFB;
}
nav2 {
width: 150px;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
#nav2 li a {
display: block;
color: #000;
text-decoration: none;
width: 90%;
}
#nav2 li a:hover {
background-color: #2586d7;
color: #fff;
}
test the site for preview: www . ween . net / markscoinsandjewlery THANKS I'm beginning to convert my site from HTML tables to CSS divs. I am having problems with two of my image borders, both on the left and right side of my layout. Neither of the borders stretch to the bottom of the page. The left border stretches to the height of the content in the current DIV. The right border doesn't appear at all. How do I make to borders stretch to the bottom of the page? CSS version: http://www.depiction.net/layoutsliced.php HTML version I'm trying to match: http://www.depiction.net/?id=tutorials Hi Guys I am building a web log and my plan is to insert text in to the web log dynamically, which means I will not be able to rely on a fixed height. How do i get a div container to follow the height of a div inside it? I am using a div container that has a div floated to the left and a div floated to the right inside it. The text which i want to insert dynamically will appear in the right div, is there a way for the left div to also follow the height of the right div? I have tried using height: auto and height: 100% . my web log can be found here my css file is at In IE the web log looks almost how it should except for the grey space on the bottom left. In FF it is even uglier! Any help or suggestions would be much appreciated the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="aoms.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> d </div> <div id="nav"> d </div> <div id="contentTop"> d </div> <div id="content"> d </div> <div id="contentBottom"> d </div> </div> </body> </html> the css: Code: body{
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
height:100%;
}
#container{
min-width:800px;
max-width:800px;
width:800px;
min-height:100%;
max-height:100%;
height:100%;
background-color:#ffffff;
}
#header{
background-image:url('images/header.jpg');
background-repeat:no-repeat;
min-height:124px;
max-height:124px;
height:124px;
padding:0px 0px 5px 0px;
}
#nav{
background-image:url('images/nav.gif');
background-repeat:no-repeat;
min-height:30px;
max-height:30px;
height:30px;
padding:0px 0px 5px 0px;
}
#contentTop{
background-image:url('images/contentTop.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
#content{
background-color:#A1A1A1;
min-height:400px;
max-height:100%;
height:100%;
}
#contentBottom{
background-image:url('images/contentBottom.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
the problem 'FF': 'container' is not stretching to 100% height, its only as big as the other divs stretch and in IE its more than 100%? hope you can understand that. Shem Hello! I want to layout my page using CSS and DIVs. But I have a problem. If you look at this site , you will see that when a give to a div height 100%, it doesn't fill the remainder of the page. How can I fix this problem? Thanks Artashes here is my style sheet.....simplified, so i can figure out the problem before i get too deep: body { margin:0; padding:0; height:100%; } #container{ height: 100%; width: 750px; margin: 0 auto; } #left_col{ height: auto; width: 200px; float:left; } #right_col{ width: 550px; height: auto; float:left; } and my page very very simplified: <body> <div id="container"> <div id="left_col">content </div> <div id="right_col"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> Problem is that the right column will stretch down to accommodate the text, but the left column will not....nor will the container.. how can i get the left_col or container to stretch when the right_col stretches...??? It works in IE6 and IE7 but not Fire Fox... The problem is that it seems to be making a 10px scrollbar that I just can't seem to get rid of. I've tried all sorts of things to get rid of the scrollbar and none of them seem to work. Can anyone give me a helpful hand or some pointers? This is my first go at a fully css xhtml document. Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css">
html,body {
height:100%;
}
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-bottom: 0px;
padding:0px;
text-align:left;
height:100%;
background:#cdcdcd;
}
#contentleft {
width:170px;
padding:0px;
float:left;
background:#dadada;
height:100%;
}
#contentcenter {
width:600px;
padding:0px;
float:right;
background:#eee;
height:100%;
}
#contentheader {
background:#fff;
}
#contentmenu {
background:#fff;
}
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
h2 {
font-size:11px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered (Title Pic Here)</h1></div>
<div id="contentmenu"><h2><a href="home.asp">Menu Could go here</a></h2></div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
<p><strong>Scroll down for the source.</strong></p>
<p >Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="contentleft">
<h1>contentleft</h1>
<p>Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>
</div>
</body>
</html>
Problem fixed... I'm stupid... a moderator can delete this... |
|||||||