|
CSS - Width Of Divs Equals 100%, But Doesn't Display Properly
Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.
Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser. I've validated my code, and just can't figure out what the problem is. (I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.) Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help. Here is the HTML: <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="parent"> <div id="left_top"> </div> <div class="bigcontainer" id="right_top"> a very<br>special<br>place<br>on the<br>internet </div> <div class="container" id="left_mid"> additional reading </div> <div class="container" id="right_mid"> tab one | tab two | tab three | tab four | tab five </div> <div class="container" id="left_bottom"> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </div> <div id="right_bottom"> <p> Lorem ipsum dolor sit amet... </p> </div> </div> </BODY> </HTML> Here is the CSS: body { font-family: sans-serif; font-size: 10px; margin: 0; padding: 0; background-color: #e5e5e5; } div.bigcontainer { font-size: 20px; font-weight: bolder; vertical-align: middle; padding: 20px 20px 0px 0px; text-align: right; } div.container { font-size: 12px; font-weight: bolder; vertical-align: middle; padding: 10px 20px 5px 0px; text-align: right; } #parent { margin: 0px; padding: 0px; position:relative; } #left_top { width: 35%; height: 190px; background-color: #7d7d7d; float: left } #right_top { width: 65%; height: 190px; color: #ffcc00; background-color: #666666; float: right; } #left_mid { width: 35%; height: 35px; color: #ffff99; background-color: #ffd426; float: left; } #right_mid { width: 65%; height: 35px; color: #666666; background-color: #ffcc00; float: right; } #left_bottom { width: 35%; height: 100%; padding: 20px; color: #999999; text-align: right; background-color: #e5e5e5; float: left; } #right_bottom { width: 65%; padding: 20px; color: #666666; text-align: right; background-color: #ffffff; float: right; } Similar TutorialsThis stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility. In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.). Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it. In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me. I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide. body{ background-color: Black; background-position: center; text-align: center; vertical-align: center; margin: 2px; } h4{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bolder; color: black; } h6{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-weight: normal; color: black; } h1{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bolder; color: black; text-transform: uppercase; } h2{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; color: #8B0000; } div#wrapper{ background-position: center; background-color: #F0F1EB; width: 762px; height: 420px; margin: 0px; border: 1px solid #black; padding: 0 px; } div#top{ background-position: center; background-image: url(../images/top.jpg); width: 760px; height: 123px; margin: 0px; border: 0px; padding: 0 px; text-align: right; vertical-align: top; text-transform: uppercase; } div#toplinks{ background-position: center; width: 634px; height: 15px; margin: 0px; border: 0px; padding: 2 px; float: right; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; text-align: center; color: white; } div#midlinks{ background-position: center; background-color: #F0F1EB; width: 760px; height: 17px; margin: 0px; padding: 0 px; border-bottom: 1px solid #9E9E9E;; border-left: 0px; border-right: 0px; border-top: 1px solid #9E9E9E; } div#midleft{ background-color: white; width: 126px; height: 16px; margin: 0px; padding: 6 px; float: left; border-bottom: 0px; border-left: 0px; border-right: 1px solid #9E9E9E; border-top: 0px; text-transform: uppercase; color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bolder; text-align: right; } div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{ text-transform: uppercase; color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bolder; text-align: right; text-decoration: none; } div#midright{ width: 631px; height: 16px; margin: 0px; padding: 6 px; float: right; border:0px; font-family: Arial, sans-serif; font-size: 11px; font-weight: bolder; text-align: left; color: white; text-transform: uppercase; } div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{ font-family: Arial, sans-serif; font-size: 11px; font-weight: bolder; text-align: left; color: #990000; text-transform: uppercase; text-decoration: none; } div#left{ background-position: center; background-color: #F0F1EB; width: 125px; margin: 0px; padding: 7 px; float: left; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; text-transform: uppercase; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 900; text-align: right; } div#left a, div#left a:hover, div#left a:visited, div#left a:active{ text-transform: uppercase; color: #990000; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 900; text-align: right; text-decoration: none; } div#main{ background-position: center; background-color: White; width: 635px; height: 470px; margin: 0px; padding: 0 px; float: right; border-left: 1px solid #9E9E9E; } div#mainl{ background-position: center; background-color: white; width: 310px; height: 289px; margin: 0px; border: 0px; padding: 10 px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-align: left; color: black; } div#main2{ background-position: center; background-color: white; width: 317px; height: 450px; margin: 0px; padding: 10 px; float: right; border-bottom: 0px; border-left: 1px solid #9E9E9E; border-right: 0px; border-top: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; text-align: left; color: black; } div#main1col{ background-position: center; background-color: white; width: 625px; height: 289px; margin: 0px; padding: 10 px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: black; } div#main1col td, div#mainl td, div#main2 td{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: black; } div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{ font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-align: left; color: #8B0000; text-decoration: underline; } .container { position: relative; left: 1px; top: 1px;} .text {position: absolute; left: 5px; top: 0px;} .container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;} .text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;} I'm having a dumb moment coding my site. I can't get the #project_content tag in my stylesheet to work properly. It should place page contents to the right of the menu on this draft page but kicks it to the bottom. Could someone please take a look at the css to see where I've gone wrong. Thanks Hi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance Hi There all, I've got this problem with a overflow div tag. I've tried just about everything possible. Easy way of saying it, I want a content box that is basically form 80px of the page down to the bottom of the browser. This "content box will be scrollable, but i want a menu to be the top 80 pixels of the page. EDIT: IE just does the content in the full page! Here's sample here of my small css: Code: <style type='text/css'>
#content {
top: 75px;
bottom: 0px;
width: 100%;
position: absolute;
overflow: auto;
}
</style>
Thanks in advance! James I'm trying to recreate a header that was built using tables. Here is an example of the original header. This is how I want it to look using div. http://65.175.116.253/logo/html_head_p1.html Here is the code for the table based header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <img src="http://65.175.116.253/logo/banner.jpg"> </td> </tr> </table> </body> </html> Here is the header using the code with DIVs. http://65.175.116.253/logo/styletest.html Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px;
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#headerbanner {
background: #004C91;
position: absolute;
width: 600px;
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">
</body>
</html>
This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated. Here is the HTML and the CSS is below it. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div><!-- /#header -->
<div id="navigation">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >Links</a></li>
</ul>
</div><!-- /#navigation -->
<div id="content">
<div id="leftcolumn">
<div class="box_blue">
<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
<div class="box_content_blue">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
</ul>
</div><!-- /.box_content_blue -->
</div><!-- /.box_blue -->
</div><!-- /#leftcolumn -->
<div id="main">
<p>This is the main content</p><br /><br />
<p><a href="layouts/121836.htm">
<img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
<p><a href="layouts/121836.css">
<img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
<p>To download, right click and choose 'Save Target as...'</p>
<p> </p>
<p>If you use one of these layouts, please consider linking to CSS Portal.<br />
http://www.cssportal.com</p>
</div><!-- /#main -->
</div><!-- /#content -->
<div id="footer">
<p>This is the Footer</p>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>
</html>
Code:
* { padding: 0; margin: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('images/bg.png') fixed;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header {
color: #333;
height: 200px;
background: url('images/header.png') fixed;
}
#footer {
height: 100px;
clear: both;
color: #333;
background: #6B6659;
}
#navigation {
float: left;
width: 1000px;
height: 35px;
color: #333;
background: #6B6659;
background: #b5bdc8; /* old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
line-height: 35px;
}
#navigation li {
display: inline;
float: left;
padding: 0 10px;
color: #dddddd;
}
#content {
background: #f6f9fa repeat;
color: #545454;
margin: 0 auto;
box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
-webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
position: relative;
}
#leftcolumn {
color: #333;
background: #EBE3CD;
width: 200px;
float: left;
padding: .5em;
}
#main {
color: #333;
background: #fff;
width: 770px;
float: right;
padding: 8px;
}
.box_blue {
-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
margin: 1.6em 0;
}
.box_header_blue {
background-color: rgb(23, 71, 115);
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 3em;
text-align: center;
font-size: 1.2em;
-moz-border-radius-topleft: 1.2em;
-moz-border-radius-topright: 1.2em;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px; border-style: solid;
border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50);
text-shadow: 1px 1px 1px rgb(16, 16, 16);
background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
}
.box_content_blue {
padding: .5em;
background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
display: inline-block;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px;
border-style: solid;
border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50);
-moz-border-radius-bottomleft: 1.2em;
-moz-border-radius-bottomright: 1.2em;
}
.box_content_blue li {
padding: 10px 0;
border-bottom: 1px dotted #cccccc;
}
can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned? link to photo Album can be found here but please note this is a dynamically set IP so is likely to change: http://85.210.107.231/PA.html I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8... I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP... Anyways... here's the CSS file: Code:
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul {
background-color: white;
margin-top: 4px;
}
.treeview .hitarea {
background: url(images/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 100px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}
.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
background-color: #eee;
}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }
.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); }
.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
Here's the relevant nav menu code: Code:
if (mysql_num_rows($result) != '0') {
while($row = mysql_fetch_array($result)) {
$string5= $row['string'];
$state3 = $row['state'];
$county3 = $row['county'];
$city3 = $row['city'];
$item3 = $row['item'];
if ($state2 != $state3) {
if ($i != 1) {
$treeview .= "</ul></li></ul></li></ul></li>";
}
$i++;
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
$state2 = $state3;
$j = 1;
}
if ($county2 != $county3) {
if ($j != 1) {
$treeview .= "</ul></li></ul></li></ul>";
}
$j++;
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
$county2 = $county3;
}
if ($city2 != $city3) {
$treeview .= "<ul style=\"display:none;\">";
$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
$city2 = $city3;
$treeview .= "<ul style=\"display:none;\">";
}
if ($item3) {
$treeview .= "<li>".$item3."</li>";
$item2 = $item3;
}
}
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";
There are 3 lines of code that I have changed from when it works: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />"; From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a> So the original lines (where it worked) looked like: Code: $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />"; $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />"; EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse.... So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots): Working Properly in FF After a refresh in Firefox (This is after hitting collapse) Working Properly in IE6 (Before making the changes mentioned above) Not Working in IE6 The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left... Thanks.. if you need further information or additional code, let me know. Any help would, of course, be appreciated. I hope I can explain this in a way that makes sense. I have a table layout where the number of columns is variable (sometimes it can have 1 column, sometimes it can have up to 9 columns), depending on what data is filled out on a previous form. The code in question: Code: <tr> <td> <div style="float: left; width: 13px"><img src="arrow.gif"></div> <div style="float: left; width: 93%;">My explanatory text goes here!</div> </td> <td> Column 2 Text </td> <td> Column 3 Text (and so on) </td> </tr> The two divs there need to float next to each other -- the first div is a little 13x13 arrow, the second div is some explanatory text. I can not just float the image left (and not put the text in a div), because the client wants the text to be left aligned in the div, not wrapping around the image. The issue: If there are less than 5 or 6 columns, it works beautifully. If you put more columns in there, then the second div appears below the first div. I've been fiddling with the widths on the second div, but it has to be a percentage (not a set number of pixels), because the number of columns is variable (as is the width of those columns). How can I make the columns float next to each other regardless of the width of the table cell that they are within? Any help is appreciated. Hi, im using different styles for my links on one page. my CSS for some links is not working properly in IE6. i have defined some rules for all the links in my CSS but for some specific links when i try to change the link color and the hover effect of the link, it is not effected. the color of the link remains same as default link. what is the problem. here is my css code. a:link { color:#ff8702; text-decoration: underline; font-weight:bold; } a:visited { color:#ff8702; text-decoration: underline; } a:hover { color:#ff8702; text-decoration:none; } .readmore { font-weight:bold; font-size:14px; width:94px; height:35px; background:url(images/read-more.gif) no-repeat; vertical-align:middle; padding:12px 0 0 13px;} .readmore a {color:#000000; text-decoration: none;} .readmore a:hover {color:#000000; text-decoration: underline;} when i assign the "readmore" class to any text, it does not take effect. Please help. I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: 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>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol Hi, I'm currently trying to write a website that will look like this: http://andrew.estyles.com.au/website.jpg The website will be anchored to the top left of the screen and will stretch 100%. The main content area (light blue) must stretch vertically to fit the content, and the side bar (purple) must stretch to the same height as the main content area. What I want to do is let the user hide the side bar by clicking on a button on it (using Javascript). When they click the button, I want the side bar to shrink to about 10-20px in width (enough so that it's still there and you can click another button on it to show it). When the button is clicked to hide it, I want the main content area to move left and fill in the space where the side bar was (and similarly, I want it to move back to the right when the side bar is expanded) I'm having troubles figuring out the CSS to do this. Here's what I've got so far: HTML: Code: <div id="topBanner">Banner goes here!</div>
<div id="menuBar">{{T_MENU}}</div>
<div id="main">
<div id="leftBar">Side Bar</div>
<div id="content">Main Content
</div>
</div>
CSS: Code: /* GENERAL STYLES */
body
{
margin: 0px;
}
img
{
border: 0px;
}
/* END GENERAL STYLES */
/* top website banner */
#topBanner
{
width: 100%;
height: 100px;
background-color: #CCCCCC;
border: 0px solid black;
}
/* bar containing the menu */
#menuBar
{
width: 100%;
height: 20px;
background-color: #666666;
border: 0px solid black;
}
/* container for leftBar and content */
#main
{
width: 100%;
background-color: #0000FF;
background-image: url('../images/main_background.gif');
background-repeat: repeat-y;
}
/* left bar containing quick links etc */
#leftBar
{
float: left;
width: 140px;
padding: 5px;
}
/* main content area */
#content
{
font-family: Verdana, Ariel, Helvetica, Times New Roman;
}
Using that code, I get my side bar fine etc, it all works fine - but I'm not sure what I should be doing to hide it (I don't mean I don't know the javascript code to do it, I just mean I don't know what I actually need to modify in the divs). Also, you'll note that I'm using the faux column method described here to put in my side bar if that makes a difference. The image I am using is just 150px (size of my side bar) one colour on the left, and then another colour for the rest of it. So when I shrink the side bar, I need to adjust the background images too. So yeah, if anyone can send me in the right direction I'd appreciate it! Cheers. Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? |
|||||||