|
CSS - Css Background-color Not Displaying Properly In Ie.
I've got a mostly-css layout he
http://highballsociety.com/~lwco/test.php Using the following CSS page he http://highballsociety.com/~lwco/lwc.css For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help. Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes. Thanks, m__ Similar TutorialsI've searched around the web for a solution to this problem and have found other with BG display problems, but none that were exactly the same. Others seems to have a persistant problem, while mine only occurs about 20% of the time a page is loaded. Basically I have a div within a div. The inner div has variable content ranging from images, text, and tables, some of which are floated. The outer div has a superfish style menu in it. The height of the inner div is set to 100% to expand with the content within, and the outer div height is set to 100% to expand along with the inner div. Basically, two kinds of errors appear at random with IE. 1) a thin line of the outer div background color is missing at the bottom of the div just about corners rounded with RUZEE.ShadedBorder, or 2) a larger block of the background is missing just above the rounded corners. It only happens sporatically in IE, and usually pressing Reload fixes the problem. These divs are also enclosed within another container div, but its the smaller inner container div that is having the problem. It happens on all of the pages in my site about 20% of the time they are loaded up. Does anyone know why I'm having this problem? Any help is greatly appreciated! Here are two images of what I'm talking about followed by my CSS for those two divs. http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard01.jpg http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard02.jpg (remove the extra spaces after http://) #outerDiv { background-color: #BBDB56; height: 100%; padding: 1px 20px 23px 5px; width: 860px; margin: 15px auto 0px auto; } #outerDiv, #outerDiv .sb-inner { background: #bbdb56; } #innerDiv { margin: 15px 0px 0px 160px; padding-bottom: 0px; background-color: #fff; height: 100%; } I'm fairly new at CSS, but I am stumped with an issue I am having getting my H1 and H2 tags to show a color. Now the problem. I have styled the Header tags in my CSS for a <div> tag that will contain the text on my page. They are to have the color of my navigation bar on the left of the page (value #cc0000). The nav bar is styled with a CSS created by a spry in Dreamweaver CS3. My text is styled by a separate CSS document (con-ed.css) which is found in a different directory. I created all of the style elements for my <h1> and <h2> tags and they look fine in Dreamweaver. But when I open the page in a Web browser such as Firefox, Safari, or Internet Explorer, all of the formatting of the tags displays EXCEPT the color value I mentioned above. I am guessing that I have a cascading issue going on, but I haven't been able to figure out where it would be. I am loading the con-ed.css stylesheet first, so its values should override any other sheets, plus there is no mention of <h1> or <h2> in the stylesheet for my navigation bar. Any help or suggestions you could give will be greatly appreciated! wncmacs I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
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. What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? http://buffalonationsmuseum.ca Right now the property is just "background" but I have tried... background-color: Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] Hello Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another. Here is my code - css Code:
div#menuContainer
{ width:146px;
position:absolute;
margin:0px;
background:#ffffff;
height:400px; }
ul#mainMenu{ margin:0;
padding:1px 0;
list-style:none;
width:100%;
height:21px;
border-left:1px solid #ffffff;
font-family:verdana, arial, helvetica;
font-size:12px;}
ul#mainMenu li{ margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:146px; }
ul#mainMenu li a:link{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#333333; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; font-size:16px;}
ul#mainMenu li a:visited{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
border-top:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#ffffff;
width:146px;
height:25px;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:hover{ padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background-color:#666666;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:active{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif;}
ul#mainMenu li ul.subMenu { display:none; margin:0; padding:0;
list-style:none; position:absolute;
left:147px;
top:0px;
padding:1px 1px 0 1px;
border-right:1px solid #FFFFFF;
background:#ffffff;
z-index:1000; }
ul#mainMenu li:hover ul.subMenu{ display:block; }
ul#mainMenu li ul.subMenu li{ width:146px;
clear:left;
}
ul#mainMenu li ul.subMenu li a:link { clear:left;
background-color:#000066; padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#mainMenu li ul.subMenu li a:visited{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000; }
ul#mainMenu li ul.subMenu li:hover a{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;}
ul#mainMenu li ul.subMenu li a:active{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative; z-index:1000;}
ul#mainMenu li ul.subMenu li a:hover{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#mainMenu li ul.subMenu li ul.subMenu1{ display:none;
margin:0; padding:0; list-style:none;
position:absolute;
left:147px;
top:-2px;
padding:1px 1px 0 1px; border-right:1px solid #FFFFFF; background:#ffffff; z-index:900; }
ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; }
ul#mainMenu li ul.subMenu li a span{ position:absolute;
top:0;
left:132px; font-size:12pt;
color:#fe676f; }
ul#mainMenu li ul.subMenu li:hover a span{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
ul#mainMenu li ul.subMenu li a:hover span{ position:absolute; top:0; left:132px;
font-size:12pt;
color:#ffffff; }
html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="menu_style.css" /> </head> <body> <div id="menuContainer"> <ul id="mainMenu"> <li><a href="#" name="Home">Home</a></li> <li><a href="#" name="Services">Services</a></li> <ul class="subMenu"> <li><a href="#" name="internet marketing">Internet Marketing</a></li> <li><a href="#" name="web development">web development</a></li> <li><a href="#" name="e-commerce">e-commerce</a></li> </ul> <li><a href="#" name="About">About Us</a></li> <li><a href="#" name="case studies">Case Studies</a></li> <li><a href="#" name="Jobs">Jobs at toltech</a></li> <li><a href="#" name="Contact Us">Contact Us</a></li> <ul class="subMenu"> <li><a href="#" name="Location">Location</a></li> <li><a href="#" name="Enquiry Form">Enquiry Form</a></li> </ul> </ul> </div> </body> </html> Thanks in advance, gillian I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective. I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer. The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right. Here is the link to the SITE Here is a link to some SCREENSHOTS The code:CSS Code:
/*left bar */
#left_bar {
float: left;
position: absolute;
padding-left: 2px;
margin: 160px 12em 0px 0px;
width: 200px;
display: inline;
}
#left_bar ul {
color: #336666;
font-weight: bold;
text-transform: lowercase;
list-style-type: none;
margin: 0;
padding-left: 1px;
}
#left_bar ul li {
font: italic normal 100% 'Times New Roman', Times, serif;
text-align: right;
letter-spacing: 0.1em;
margin-top: 10%;
margin-right: 10%;
float: none;
padding-bottom: 2px;
}
#left_bar ul ul {
font-variant: normal;
font-weight: normal;
line-height: 100%;
text-align: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#left_bar ul ul li {
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 1px;
border: 0;
margin-top: 0;
padding: 0;
padding-left: 8px;
}
#left_bar ul ul li a {
color: #996699;
text-decoration: none;
}
#left_bar ul ul li a:hover {
border-bottom: 1px solid #660066;
}
The code: html Code: <div id="left_bar"> <ul> <li id="calendar"> <?php require( dirname(__FILE__).'/_calendar.php' ); ?> </li> </ul> <ul> <li> <?php require( dirname(__FILE__).'/pophis.php' ); ?> </li> </ul> <br /> <ul> <li> <ul> <li> <?php require( dirname(__FILE__).'/misc.php' ); ?> </li> </ul> </li> </ul> </div> Any thoughts, help, suggestions..... anything...... would be v much appreciated! Hello everyone; I've been working on my webpage and I just noticed that my page loaded differently ( not aligned ) in my friends wide screen Laptop. I was hoping if anyone knows of a way to display the webpage properly no matter what resolution or screen? would this be done with css or just plain HTML? please let me know. thank you. mamut Hi everyone, This is my first time posting, I'm having a issue getting my site to appear correctly in IE7. It displays properly in all other major browsers (firefox, safari, chrome, opera and even ie6) but for some reason in IE7 the header imager overlaps the menubar. The site is (vividmark.com.au) and if anyone could shead some light on this, I'd be very greatful. Thanks. The middle content column on our page, (code shown below) is not displaying in IE5 and IE6. Any ideas as to why? see page at federalacqusitionservice Code: start code --> </style> </head> <body> <!-- Generated at () --> <div id="container" > <div id="banner" > <div align="left"><img src="(URL address blocked: See forum rules)" width="400" height="63" /><img src="(URL address blocked: See forum rules)" width="60" height="63" /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "7082054352"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="()"> </script></div> <h1><a href="()">Home</a> | advertise | about us | Contact US</h1> </div> <div id="outer" > <div id="inner"> <div id="left" > <h2><img src="()" /> </h2> <div align="left"> <script type="text/javascript" src="()"></script> <br /> <table width="195" border="0"> <tr> <td><div align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/17/08 */ google_ad_slot = "9592010100"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> </div></td> </tr> </table> <br /> <img src="()" alt="Featured Links" width="200" height="34" /><br /> <br /> <table width="195" border="0"> <tr> <td> <div align="center"> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x240, created 7/14/08 */ google_ad_slot = "0661630514"; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" src="()"> </script> </div></td> </tr> </table> <br /> <br /> <br /> </p> </div> </div> <div id="right" > <h2><img src="()" /></h2> <pre class="style1"><h2><a href="()">(URL address blocked: See forum rules)</a><br />Printing, Promo Items, WebSites <a href="http)">()</a><br />Import to the US with confidence <a href="httprules)">linkstodc.com</a><br />Washington, DC business <br />and living directory.<br /><a href="(URL address blocked: See forum rules)">stickerrocket.com</a> custom sticker, stock labels <a href="(rules)">hostingone.ca</a><br />Affordable web hosting <br /> Become a sponsor to federalacqusitionservice.com click here</h2> <br /> <br /><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/14/08 */ google_ad_slot = "4200878981"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> <br /><br /> <br /> <br /> </div> <div id="content"> <h2><img src="(rules)" width="546" height="34" /><br /> </h2> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td width="268" height="127" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td width="228" height="38" valign="top"> FederalAcquisitionService.com is the link directory for Federal, State, Local and non-profit contracting sources. </td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Check back regularly to see an even greater number of Federal acquisition links.</td> <td width="90"><img src="(URL address blocked: See forum rules)" alt="US Link Directory" width="90" height="60" /></td> </tr> </table> </td> <td width="267" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td valign="top">Reach your clients through sponsored <a href="httpURL address blocked: See forum rules)">text links</a> and <a href="httprules)">featured links</a> on FederalAcquisitionService.com. <br /></td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Text links start at only $9.95 per month, featured image links start at $99 per year.</td> <td width="90"><img src="(forum rules)" alt="Premium Links" width="90" height="60" /></td> </tr> </table></td> </tr> <tr> <td height="14" colspan="2" valign="top"><div align="center"><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "6799108791"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script > <br /> </div></td> </tr> </table> <img src="(rules)" width="546" height="34" /> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td valign="top"><div align="right"><a href="!!tophits!!"><img src="(rules)" width="82" height="35" border="0" /></a><a href="!!whatsnew!!"><img src="(URL rules)" width="50" height="35" border="0" /></a><a href="!!rgs_login!!"><img src="(rules)" width="57" height="35" border="0" /></a><a href="!!add_url_link!!"><img src="(URL rules)" width="73" height="35" border="0" /></a><a href="!!add_premium_url_link!!"><img src="( See forum rules)" width="136" height="35" border="0" /></a><a href="!!register!!"><img src="(rules)" width="72" height="35" border="0" /></a><br /> <br /> </div> <form method="POST" action="(: See forum rules)"> <p align="center"><input type="text" name="keywords" size="33"><input type="submit" value="Search" name="B1"> <a href="(forum rules)">Advanced</a></p> </form> <div align="left">!!psdata!!<br /> <br /> </div></td> </tr> </table> <h2><br /> <br /> <br /> </h2> </div> </div> <!-- end inner --> </div><!-- end outer --> <div id="footer"><h1 align="center">C federalacquisitionservice.com 2008</h1> </div> </div><!-- end container --> </body> </html> Code: end code Thanks for taking the time to read my question. I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up. Why? How do I make "contentleft" always be on the lefthand side? CSS Code:
body {
text-align:center;
margin-top: 0px;
background-color: #d8d8d8;
}
a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}
#frame {
width: 640px;
text-align: center;
}
#main {
background-color: #6699cc;
width: 640px;
}
#main p.pagetitle {
color: white;
font-size: 32;
}
#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}
#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}
#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}
#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
html: 3 colum example. Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 10/15/04 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="bradsonorus@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link rel="StyleSheet" type="text/css" href="test.css"> </head> <body> <div id="frame"> <div id="main"> <img src="C:/Lisa/images/topbar.png" width="640" height="30" alt=""> <img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada"> <span> </span> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="C:/Lisa/LisasNavBar.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#6699cc" /> <embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p class="pagetitle">TESTS</p> <p class="title">Tests:</p> </div> <div id="sub"> <p class="titleleft">Test Topic / Subject</p> <p class="titlecenter">Test Date</p> <p class="titleright">Suggestions</p> <p class="contentleft">Math: Long Division Test</p> <p class="contentcenter">Tuesday, October 15, 2004</p> <p class="contentright">Review pages 31 to 40 in Math text.</p> <p class="contentleft">English: Spelling Test</p> <p class="contentcenter">Tuesday, October 22, 2004</p> <p class="contentright">Practice all the 17 syllable words, they will be on the test.</p> <p class="contentleft">Phys. Ed.</p> <p class="contentcenter">Tuesday, November 5, 2004</p> <p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p> <p><hr width="80%"></p> <p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p> </div> <img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt=""> </div> </body> </html> Here is a quick visual layout of my page (container) (div banner) (div left column) (div middle content) (div right column) (div footer) In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle. Here is the HTML: (go easy on the coding, I'm still pretty new at this stuff) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" /> <title>Las Vegas Floor Care</title> </head> <body id="body"> <div id="container"> <div id="banner"> </div> <div id="content"> <div id="content_left"> <div class="links"> <ul class="list"> <li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li> <li><span class="list_big">R</span>ESIDENTIAL</li> <li><span class="list_big">C</span>OMMERCIAL</li> <li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li> </ul> </div> <div class="special_offers">Special Internet Offers</div> <img class="image_center" src="images/coupon.jpg" /> <ul class="list_offers"> <li>Test 1</li> <li>Test 2</li> </ul> </div> <div id="content_middle"> <div id="content_middle_top"> </div> <p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p> <br /> <p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p> <div id="content_middle_bottom"> </div> </div> <div id="content_right"> <img class="image_center" src="images/contact.jpg" /> <div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div> </div> </div> <div id="bottom"> <img src="images/bottom_top.jpg" align="top"/> <p class="bottom_text"> Phone: (702) 756-0148 <br /> Fax: (206) 350-7320 <br /> </p> </div> </div> </body> </html> Here is the CSS: Code:
#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}
#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}
#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}
.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}
.contact_number {font-family:Calibri; font-size:12px; color:#970000}
#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}
#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}
#content_left {float:left; width:138px; margin-right:5px; clear:left}
#content_left_bottom {width:138px; background-color:#FF3399}
#content_left_top {width:138px; background-color:#FF3399}
#content_middle {float:left; width:414px}
#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}
#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}
#content_right {float:left; width:138px; margin-left:5px; clear:right}
#content_right_bottom {width:138px; background-color:#00FF00}
#content_right_top {width:138px; background-color:#00FF00}
.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}
.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}
.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}
.list_big {font-family:Calibri; font-size:18px}
.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}
.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}
.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
Thanks ahead of time for any help. Hi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! Hi guys, Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens, Thanks in advance, Scott. HTML: Code: <div class="navbar"> <ul id="navlist"> <li><a href="./shop">SHOP NOW</a></li> <li><a href="index.php">HOME</a></li> <li><a href="contact.php">CONTACT</a></li> <li><a href="faq.php">F.A.Q.</a></li> </ul> </div> CSS: Code: .navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
display:inline;
}
.navbar a {
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}
Displayed in IE: URL Displayed in FF/Safari: URL hey i was just wondering how i can fix the left menu to display properly in Opera. it works in Moziila and i have a seperate style sheet for IE but Opera is no go. are there any hacks that will fix the positoning? the site is located at: http://studentwork.qantm.com.au/pking/Website/ and css is at: http://studentwork.qantm.com.au/pking/Website/ptwm.css any help would be great cheers |
|||||||