|
CSS - I'm Stumped...a Div Stopped Stretching.
It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7.
Here's the problem page It just doesn't make sense to me. Am I missing a hack maybe? Similar TutorialsI have a problem that I cannot seem to resolve no matter how hard I try. - Click Here - As you can see, this page renders well in firefox but breaks horribly in IE. Try mousing over the links in the top right corner of the page and the layout really breaks! If anyone has some free time could you take a look at this page and see if any solution springs to mind? CSS: Code: body{
margin:0;
font-size:small;
text-align:center;
background-color:#c60;
border-top:3px solid #666;
font:Arial, Helvetica, sans-serif;
background-image:url(../images/background.png);
background-attachment:fixed;
background-position:bottom left;
background-repeat:repeat-x;
#content{
margin:2% 0% 2% 17.2%;
background-color:#9cf;
border:solid #0af;
border-width:2px 1px;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#content h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
padding:2px;
width:100px;
margin:5px auto -12px auto;
font-weight:bold;
font-size:12px;
text-align:center;
position:relative;
}
#table_wrapper{margin:5px;}
#main_table{
background-color:#fff;
border:1px solid #999;
border-width:2px 1px;
text-align:center;
margin:0 auto;
width:100%
}
#main_table thead tr th{
height:20px;
}
#main_table tbody tr td {
font-family:"lucida grande", verdana, sans-serif;
font-size:8pt;
padding:3px 8px;
border-right:1px solid #d9d9d9;
}
#main_table tbody tr.selected td {
background-color:#fdb;
border-left: 1px solid #d9d9d9;
}
#wrapper{
border-style:solid;
border-color:#666;
border-width:5px 1px;
width:94%;
margin:25px auto 50px auto;
text-align:left;
padding:1%;
background-color:#fff;
}
#header{
height:60px;
padding-top:8px;
border-bottom:3px solid #0af;
background-image:url(../images/banner.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#nav{
height:60px;
float:right;
font-size:11px;
background-image:url(../images/notebook.gif);
background-position:right;
background-repeat:no-repeat;
}
#nav ul, #nav li{
display:inline;
margin:0 25px 0 0;
}
#nav a{color:#000}
#nav a:visited{color:#666;}
#nav a:hover{color:#c60; border-bottom:1px dashed #c60;}
#leftcol{
float:left;
width:16.5%;
margin:2% 0;
border:solid #0af;
border-width:2px 1px;
background-color:#9cf;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#leftcol h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
width:50%;
margin:5px auto 0 auto;
font-weight:bold;
font-size:12px;
text-align:center;
padding:2px;
width:30px;
margin:5px auto -12px auto;
position:relative;
}
#info{
border:solid #999;
border-width:2px 1px;
background-color:#fff;
margin:5px;
padding:0;
}
#info p{margin:10px 5px 5px 5px;}
#footer{
color:#999;
clear:both;
width:100%;
font-size:11px;
text-align:center;
border-top:3px solid #0af;
}
I've got a list item with a link, an image, and a span of text and I am trying to boost the text up in that box so that it is reasonably close to vertically centered. Code: <li><a href="productpage.php" class="bigimgcap"> <img src="../images/products30.gif" alt="Software logo" /> <span>Product Name</span></a> <ul> <li>Product Feature 1 </li> <li>Product Feature 2</li> </ul> </li> my css wasn't helping, probably have inherited properties issues all over this one eh? Code:
.bigimgcap {
font-size:1.1em;
font-weight:bold; color: #000080; /*replaced SteelBlue*/
margin: 10px 0;
padding:0;
}
.bigimgcap span {
padding:0;
margin: 0 0 15px 15px;
}
Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme. Code: .custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }
Code: #rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }
ul.sidebar_list { list-style: none; }
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }
li.widget p { margin: 0 0 1.66667em 0; }
li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
li.widget li a:hover, li.linkcat li a:hover { color: #575757; }
I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance! I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS. Code:
#container {
width:100%;
background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
margin:0px;
padding:0px;
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
margin:0px;
padding:0px;}
#navbar{
float:left;
width:122px;
margin:0px;
padding:0px;}
#content {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
padding:0px;
}
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right;
margin:0px;
padding:0px;
}
I can't figure this one out! Code: <div id=container> <div id=header> </div> <div id=navbar> </div> <div id=content> </div> <div id=footer> </div> </div> the content div is dynamic so it could be very wide. I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? I've tried searching for some information about this everywhere but can't seem to find anything. My problem is that my CSS suddenly stopped working! I don't know if I did something or not, but I can't figure it out. If you take a look at the homepage at http://www.jasonguthrie.net you'll see what I mean. The CSS for the page is at http://www,jasonguthrie.net/pages/main.css. Any help you could give me would be greatly appreciated! Any reason why Netscape 7.x would just stop rendering a style sheet? All works fine in IE, but when I view the site in Netscape it looks like it's missing the style sheet completley. Hi, I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer. The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what. You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css . The code for the menu is: Code: <ul id="nav">
<li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a>
</li>
<li><a href="#">WEBHOSTING</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li>
</ul>
</li>
<li><a href="#">DOMAINS</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li>
<li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li>
<li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li>
<li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li>
</ul>
</li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li>
</ul>
</li>
<li><a href="#">ACCOUNT</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li>
<li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li>
<li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li>
<li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li>
<li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li>
<li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li>
</ul>
</li>
</ul>
The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area. If someone could at least point me in the right direction then I would greatly appreciate it, thanks I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well. I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far. Here is what's happening. So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div? Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>
<div id="main">
<div id="header"></div>
<div id="topnav">
<a href="index.php" class="topnav">home</a>
<a href="cards.php" class="topnav"> cards</a>
<a href="faq.php" class="topnav"> faq</a>
<a href="about.php" class="topnav"> about</a>
<a href="contact.php" class="topnav"> contact</a>
</div>
<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
<div>
<p>Hello</p>
<p> </p>
<p>This</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>to</p>
<p> </p>
<p> </p>
<p> </p>
<p>seee</p>
<p> </p>
<p> </p>
<p> </p>
<p>if </p>
<p> </p>
<p> </p>
<p>this</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p>working.</p>
<p> </p>
<p>thank you.</p>
<p> </p>
<p> </p>
</div>
<div id="footline">
</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
<a href="index.php">home</a>
<a href="cards.php"> cards</a>
<a href="faq.php"> faq</a>
<a href="about.php"> about</a>
<a href="contact.php"> contact</a>
</div>
</div>
</div>
<!-- END EDITABLE AREA-->
</BODY>
</HTML>
I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work." So let's say I have a layout like this: PHP Code: <div style="height: 100%; width: 100%; border: 2px red dashed; text-align: center;"> <!-- outside div --> <div style="height: 200px; width: 300px; border: 2px blue solid; text-align: left; margin-left: auto; margin-right: auto; "> <!-- centered div --> <div style="height: 100px; width: 100px; border: 2px green dashed; text-align: left; float: left;"> <!-- floated div 1 --> hello world 1 <!-- /floated div 1 --> </div> <div style="height: 100px; width: auto; border: 2px orange dashed; text-align: left; float: left;"> <!-- floated div 2 --> hello world 2 <!-- /floated div 2 --> </div> <div style="font-size: 0px; height: 0px; width: 0px; clear: both;"> <!-- clear div / --> </div> <!-- /centered div --> </div> <!-- /outside div --> </div> What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width. Any ideas? (Even links to appropriate threads are appreciated!) Thanks! (edit: had to update "centered div" to be firefox compatible) I have two divs floated inside another div, but the outside div isn't stretching to accommodate the inner divs. Why not? The TMPL tags are used by the HTML::Template perl module. html Code: Original - html Code <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> css Code: Original - css Code div.photo-navigate { border: 1px solid black; background-color: #eeeeee; }
div.photo-navigate {
Ok, iv had this problem alot when making sites, however this time it seems to be more complicated. http://area51.chicagowars.com/templates/modern_rouge/index.php is a site im working on. However the background in <div class="outer"> wont stretch. Iv used clearfix CSS such as Code: div.inner:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
/* hide from IE-mac \*/
* html .inner {
height: 1%;
}
div.inner {
display: block;
}
/* end hide */
and the simpler Code: div.clearfix
{
height: 0;
clear: both;
}
<div class="clearfix"> </div>
You'll be able to see these in the script. Iv done this kind of thing before (http://www.rap-wars.com) where i had tyhe same problem, but this time its not workin, i think its the breadcrumbs thats complicating things! Does anyone have the solution? Ok so www.gameyin.com/index.php You will see a dotted border flowing up the left nav bar, and below advertisements (Yes I know I'm using tables. I will eventually move them onto a roll over menu.) I have it set up so it should only be dotted border for the ads. But it is going around everything. Weird. Here is.. CSS for it. Code: .advertisement {
font-weight: bold;
color: #000000;
border: 1px dotted;
width: 100%;
}
.advertisement p {
font-weight: bold;
color: #000000;
clear: both;
text-align: center;
}
HTML for it Code: <div class="advertisement">
<p>Have A Look At Some Of Our Sponsors</p>
<img src="images/ad1.gif" alt="Ads" />
<img src="images/ad2.gif" alt="Ads" />
<img src="images/ad3.gif" alt="Ads" />
<img src="images/ad4.gif" alt="Ads" />
<img src="images/ad5.jpg" alt="Ads" />
<img src="images/ad6.gif" alt="Ads" /><br />
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
</div>
You will see more if you go to site and see what I mean. Dunno if I got all the HTMl for it and CSS. I wrote it a while ago with the problem. Just never got around to trying and fix it . Hopefully this is an easy question, how is this done to fill a frame, without repeating, just to stretch it out and fill up a frame? Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal I know this has been done to death but all the fixes I looked at on here didn't seem to help me... Essentially I'm trying to create a three-column layout plus a header and footer for an email. The left and right columns essentially act as thick borders and the middle column is for content. As such I want the left/right columns to stretch to the height of the middle column. Someone suggested that I wrap them in a div with the height set to 100% so that they expand to fill that space, but it hasn't worked. As such the content breaks the layout and the borders don't continue down with the rest of the content. Here's the code (minus header + footer divs): Code: <div name="column" id="column" style="width:600px; height:100%;"> <div style="padding:0px; margin:0px;"> <div name="leftbar" id="leftbar" style="float:left; width:20px; height:100%; background-color:#69696b; border-left:1px solid #252429; border-right:1px solid #bcbcbe;"></div> <div name="contentbox" id="contentbox" style="text-align:left; width:553px; float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> </div> <div name="rightbar" id="rightbar" style="float:right; width:20px; height:100%; background-color:#67666b; border-left:1px solid #e0dfe4; border-right:1px solid #302f34;"></div> </div> </div> This is probably a really simple fix but it's been making my head hurt. Ideally I'd have turned those borders into background-images and set them to repeat-y but HTML emails don't like background images. Any ideas? Hey I'm new at this forum, and also new with tableless layouts. I wanted 2 small divs at the left and right side of the main content div. Everything went ok, till I putted some content in. None of the divs expanded in Firefox and in IE just the maindiv streched. Layout: www.dennisenderink.nl/test2 Stylesheet: www.dennisenderink.nl/test2/stylesheet.css Can you help me out please? http://www.gamecitadel.com/reviews/31 In firefox: All content in the middle between the header and footer is in a div called mainContent Code:
#mainContent {
background-color: #323333;
background-image: url(images/index/contentBG.gif);
width: 779px;
height: 700px;
margin-top: 7px;
}
when the height is set, as is above, the mainContent div will only go to that height, and the content within it will continue down past(outside) of the div. if the height is removed, the mainContent div doesnt show at all. shouldnt the content inside the mainContent div determine its height? What have I forgotten to add? In IE: Works perfect |
|||||||