|
CSS - Expanding Container Div Prob And Ie To Boot
Well I have a multi-part question. I am obviously new to css. I have a site located here . As you can see in the panel to the left the text spans past the footer. I would like the text to push the footer down. I have been trying for hours to get this to work but well.... here I am Any help would be greatly appreciated. Second part is that I opened this in IE on mac and WHOA! Not good to say the least. Any ideas on how I can hack this to match the way it looks in FF? Again any help would be great.
Thanks for your time and expertise, phpkata. Similar TutorialsI have a test template page I have created using two columns with dropshadows and an outline. My question is, when I try to add other content within the div that creates the outline container....it does not expand the outline container, it creates a new outline container. I need to put other elements other than text so, i need to resolve/better understand this issue. the template page can be found at: http: //www rustbug.com / mmtest / template.html Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Hi, this would be my first post. I've been using CSS for about 6-7 months now, and I always find that IE is difficult. Below is the CSS I am using: Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 72.5%;
font-family: tahoma, sans-serif;
background: url(bricks.png) repeat;
bakground-attachment: fixed;
color: #FEEFA2;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: #090;
text-decoration: none;
}
a:visited{
color: #FEEFA2;
text-decoration: underline;
}
p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: #FEEFA2;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: url("bricks.png")repeat #222;
background-attachment: fixed;
min-width: 720px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 0px 0px 0px 0px;
padding-top: 10px;
padding-bottom: 0px;
}
#main-content {
background: url("") repeat-y #4B4214;
padding-left: 230px;
padding-right: 230px;
padding-top: 20px;
border-right: 1px solid #000;
width: 45%;
margin-left: 10%;
}
#header {
width: 82%;
margin: 0% 0% 0% 10%;
background: #342E0E;
text-align: center;
font-size: 1em;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 150px;
padding-top: 20px;
font-size: 1em;
}
#footer {
background: #342E0E;
margin-left: 10%;
width: 82%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
The problem lies with the left-sidebar div. Here is my HTML: 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" />
<title>MythScape: The Hub for the Paranormal & Mythological</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="fav.png">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript">
function cacherVoir(theDIV){
leStyle = document.getElementById(theDIV).style ;
if(leStyle.display == "block") {
leStyle.display = "none";
}
else{
leStyle.display = "block";
}
}
</script>
<meta name="verify-v1" content="LiYZqvPLQLMOR/3+Stk2cMxWr2l80SisI86GjbuNmLU=" >
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<?php
include "button.php";
?><br/>
MythScape -v. 1.5-!
</div>
<div style="clear:both;"></div>
<div id="left-sidebar">
<p>
<?php if (!isset($_COOKIE['loggedin'])) {
$link_reg = '<a href="user_login.php">Register</a><br/>';
echo("You are not logged in!<br/>");
include "log.php";
echo $link_reg;
}
else{
$link_logout = '<a href="logou.php">Logout</a><br/>';
$change = '<a href="changepage.php">Change Password</a><br/>';
$mysite_username = $_COOKIE['mysite_username'];
echo ("Welcome, $mysite_username. <br/>");
include "access.php";
echo $change;
echo $link_logout;
}
?>
<a href="http://mythscape.freezoka.com/wiki//index.php?MythScapeMainPage" target="_blank">Wiki</a></div>
</p>
</div>
<div id="main-content">
<p>Cryptids, animals that haven't been proven to exist or have little or no information documented on them, could very well be around us. No one can
disprove their existence, but there is evidence that can neither support nor destroy the possibility of them being real. Cryptozoology (the study of
cryptids) comes from the Greek words: <i>kryptos</i>, <i>zoon</i>, and <i>logos</i>, which translate to: hidden, animal, and discourse. The term was coined
by Lucien Blancou when he dedicated a book to Bernard Heuvelmans, "the master of cryptozoology". Accounts of cryptids are abundant and diverse. Even if outsiders
to an area have never heard of a cryptid, the native peoples often have tales of them; if the creature never existed, surely they would not have accounts
and stories about them.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Cryptozoology Main Page</div>
<p>Demonology, or the study of demons, is a branch of theology, and involves the studying of demons' existence, or the belief in them. Demons are very common
in religion, and are not always evil. In fact, most demons in ancient religions were good, bad, or both. Djinn (Middle Eastern demon-like beings)
could become good and adopt Islam. However, in some religions, like Christianity, demons are always evil and serve their lord, Satan.A demonologist studies
demons and catalogues their existence; they made be a member of the occult or an exorcist for one of the major religions of today.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Demonology Main Page</div>
<p>Mythology is the study of myths, which are tales that have been gathered and reflect on a culture's beliefs. Myths were abundant in ancient
civilizations like Egypt, Greece, Japan, and Rome, but in the modern world our myths reflect things that aren't religious or spiritual in any way. Tribal mythology is abundant in areas
of Pacific Asia or Africa.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Mythology Main Page</div>
<p>
This website is the source of information on all of these topics. It is an unprecedented amalgamation of information that is free for you to read!</p> </div>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p><?php
include "footer.php";
?></p>
</div></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In Firefox, it's perfectly okay. The Left sidebar nests within the main container and looks gooood. In IE, though, the sidebar jumps in between the header and the maincontainer so that it is in the middle making a huge gap. http://mythscape.freezoka.com If you'd like to see what I'm talking about. Please help PHP Code: body { margin: 0px; font-family: Tahoma; font-size: 10px; background-color: #777; } #bodywrapper { margin-left: auto; margin-right: auto; width: 750px; background-color: #FFF; } #logo { margin-left: 15px; margin-top: 7px; margin-bottom: 7px; } .image { display: block; } .topnav { float: right; margin-top: 25px; background-image: url( images/line.gif ); } #left { float: left; width: 180px; background-color: #ccc; } #right { float: right; width: 180px; background-color: #ccc; } #center { margin-left: 190px; margin-right: 190px; background-color: #ccc; } #clear { clear: both; } #contentwrapper { margin: 0px; } PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-us" /> <link href="/css/layout.css" type="text/css" rel="stylesheet" media="all" /> <title>Petroleum Listing Service</title> </head> <body> <div id="bodywrapper"> <div id="header"> <div class="topnav"> image image image </div> <div id="logo"> <img class="image" src="images/logo.gif" /> </div> </div> <div id="contentwrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="center"> center </div> <div id="clear"></div> </div> <div id="footer"> </div> </div> </body> </html> The problem I am having is it seems that FF starts rendering the white background only once the image is placed...it doesn't count the margin above it as content I assume... IE however does what I want it to do...renders the margin above the image as content, and thus the white background starts at the very top of the page, thus a white margin between the top of the page and the logo. How do I rectify the problem? I understand that FF is probably doing it right...but how do I make FF also start the white background at the top. I was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out. http://esdcar.org/about/board.html?category_id=1&sub_id=2 I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked. This is the current iteration: Code: #container
{ color: #775b36;
background-color: #ffefca;
border: 4px #f5c674 solid;
width: 800px;
margin: auto;
background: url(../images/bkg_faux.jpg) repeat-y 50% 0;
z-index: 6003; }
<snip (unrelated divs)>
#content
{ width: 75%;
position: relative;
margin: 0em;
float: right;
z-index:6002;}
#header
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat;
background-position: top; height: 100px;
border-bottom: 4px #f5c674 solid;
text-decoration: none; color: #775b36;
text-align: left;
margin-bottom: 0em;
position:relative;
z-index:6001; }
#header p
{ float: right;
/*margin-right: 1%;*/
margin-top: 0em;
padding-top: .2em;
font-size: .7em;
position:relative;
z-index:6000;
display:inline;
background:#ffefca;
padding: 2px; }
What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it. PROB FIXED hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED Hi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Noted only on certain laptops is a quirk causing the rt floated column (body) to be shifted below the lf float...basically a glitch in the width dimensioning. The first time I noticed it it happened to be one of the wide format DELL laptops using IE thus figuring it had something to do with the non-4x3 ratio. But, I just saw it again yesterday on a run-of-the-mill Compaq. While this instance was noted using IE they also had Netscape installed and it exhibited no crowding problem allowing the webpage to view properly. The following link is directed to a page known to exhibit that quirk on select laptops - http://www.solidgroundnc.com/the_band/bio_band.htm I know trying to use pixel values is a bit on the I-beg-to-be-frustrated side of life. ;-) Using percentages I never achieved my expected results and reducing pixel width to build breathing room was hampered by its cumulative effect on the sub-nav list. I was goaded to use percentages for that list, and I really wanted too, but it never seemed successful. Any insight, if anyone can even duplicate the symptom, would be greatly appreciated. Regards, Golem2 Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use. Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders. Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white. Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover. Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation. http://www.lockheed-martin.co.uk/css/full_layout_test.html ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that? also I was trying to align the menu to middle but margin:auto isnt working like it did for the body? finally I want to style forms without using floats or br but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own) Code:
form {
width:30%;
}
fieldset, input {
color:green;
border:1px solid green;
}
legend {
margin-left:0.5em;
}
label{
white-space:pre;
margin:0 1em 0em 1em;
}
input {
width:50%;
margin-bottom:1em;
}
input[type="submit"] {
padding:2px;
margin-left:1em;
width:auto;
}
form: Code:
<form action="" method="post">
<fieldset>
<legend>Example of a form</legend>
<label>First Name</label>
<input type="text" name="firstName" size="10"/>
<label>Last Name</label>
<input type="text" name="lastName" size="10"/>
<label>Some options</label>
<input type="checkbox" name=""/> Some
<input type="checkbox" name=""/> other
<input type="submit" name="submit" value="submit"/>
</form>
PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements.. I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: Hi, I need some help with understanding why netscape is rendering list items differently to IE The Embedded (Dreamweaver-wizard-created) style sheet looks like this: Code: <style type="text/css">
<!--
.bul-mnu-lst {
font-family: "Trebuchet MS", "Andale Mono", "Arial Unicode MS", "Eras Medium ITC", "Microsoft Sans Serif";
font-size: 80%;
line-height: 140%;
color: #666666;
list-style-position: inside;
display: list-item;
font-weight: bold;
vertical-align: text-top;
list-style-image: url(hme_imgs/bullits/dottedArrw_bul.jpg);
list-style-type: none;
}
-->
</style>
the HTML using the sheet looks like this: Code: <div id="activitiesMnu" style="position:absolute; width:218px; height:186px; z-index:1; left: 17px; top: 227px; visibility: visible;">
<p class="bul-mnu-lst"> football</p>
<p class="bul-mnu-lst"> rugby</p>
<p class="bul-mnu-lst"> tennis</p>
<p class="bul-mnu-lst"> badminton</p>
<p class="bul-mnu-lst"> swimming</p>
<p class="bul-mnu-lst"> squash</p>
<p class="bul-mnu-lst"> volley-ball</p>
</div>
The problem is, Netscape based browsers are ignoring the, line-height: attribute or just misinterpreting it and using what looks like double spacing between lines. This is causing the layer to overlap other page items and looks aweful. In I.E, it looks as expected. i've tried changing to percentages instead of pixels for the value as heard percentages are best Also tried, list-style-position from 'outside' to 'inside' values and, list-style-image: to non and used a default preset setting (square) bullet-style. - but the problem persists. any suggs?? I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction? In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF. The test page is: http://www.kdays.com/box/kerrin.htm ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif. what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css. should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated. Hello. Trying to construct a page with vertical expansion on both of two nested DIVs. Left column is primarily text which varies in length. Right column is a navigation/contact panel that is mostly fixed height, but want ability to drop in objects and expand vertically on some pages. I have tried to background image in container DIV, but I am still getting the content breaking out of the bottom of the DIV. Any other approaches? Min-height (could not get that to work either). Ideally I would like for these to have the same height. Not shading, so it doesn't need to be exact. Here's a sample of code (w/o all the junk). |
|||||||