|
CSS - Firefox Not Displaying Image - Joomla
Hi there,
I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!! The relevant part of the code is at follows: Code: <h2 class="title">
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
<div style="clear:both;height:0px;"></div>
<?php else : ?>
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
<div style="clear:both;"></div>
<?php endif; ?>
</h2>
In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now) In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!! You can take a look at this url: Can anyone please help?? Thanks Similar TutorialsMy logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? Hi there, I have a site running on Joomla and I'm using cufon for changing the font type. The problem is that, in firefox, the tile only shows in the correct font in some articles... Here, using firefox the title shows up fine: sostudent.com/joomla/index.php/solutions Here, using firefox the title shows up without the font replaced by cufon: sostudent.com/joomla/index.php/about-us Also, I can't seem to change the links font as you can see in the "Contact Form" link on this page: sostudent.com/joomla/index.php/contacts In Google chrome everything seems fine!! Can anyone please help? Thanks, I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo {
clear: both;
height: 200px;
width: 790px;
margin: 0 auto;
background: #FFF url(header-photo.jpg) no-repeat center center;
} 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 For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way? Here is my css: Code:
div.leftBorder
{
position:absolute;
height:100%;
width:15%;
background-color:#DDDDDD;
}
p.imgText{
font-size:18px;
position:absolute;
left:1%;
top:1%;
color:#CC0000;
}
table.menuTable{
position:relative;
top:15%;
}
Here is the html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="specs.css">
<title></title>
</head>
<body>
<div class="leftBorder"></div>
<p class="imgText">MEDITECH Interface Specifications</p>
<center>
<table class="menuTable" cellspacing=0>
<!-- Spec number menu Title -->
<tr>
<th class="menuTitle">Spec. Number</th>
<th class="menuTitle">Description</th>
</tr>
<!-- Spec number menu -->
<tr>
<td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td>
<td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility
</tr>
<tr>
<td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td>
<td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td>
</tr>
</table>
<iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe>
</center>
</body>
</html>
I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? can anyone help me figure out why the css javascript menu does not display the same in IE and Firefox? Are there common problems? 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 everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. 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" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Is there a problem in my code? Thanks, Ehud. I don't know what's wrong, but this HAS to be something simple I'm missing. In my XHTML I have Code: <div class="curved"></div> and for the CSS I have Code:
.curved {
background-image: url(Green_wavy_thing.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
}
The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files. Thanks, Chris I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF. I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong. I would be very grateful if someone can help me with this. I am not allowed to provide my email since I am a new user. I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at. I know I am asking too much, but I have no choice I'm using ASP.Net with Firefox and IE. I'm at a loss as to why this isn't working. I did the exact same thing in notepad and it worked fine but when I use ASP.Net, it doesn't show. CSS Code:
.headbg
{
width:auto;
height:125px;
background-image:('test.png');
}
#headercontainer
{
width:auto;
height:125px;
text-align:center;
background-image:('test.png');
}
ASP.Net code Doesn't display Code:
<div class="headbg">
test
</div>
Doesn't display Code:
<div id="headercontainer">
test
</div>
Displays Code:
<img src=test.png />
Hi Guys i wondered if someone can help with a little problem I have, I have got a little contact form with an image submit button. I have included the source code that displays in firefox ie7 and ie 8 but doesnt display in IE6 and I am pulling my hair out. Please help guys Css .button { width:200px; height:80px; margin: 0; padding: 0; border: 0; background:url(images/button.png) no-repeat center top; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ HTML <td colspan="2" class="boldenquire2"><input name="send" type="submit" class="button" onclick="return checkForm();" value="" height="80" width="100" /></td> </td> thanks Hi there, I have an image.gif 50x24px I using the css below to display diffrent parts of the image in a table and it works fine in FireFox but not in IE? Can someone please help me I have tried everything. Code:
// CSS
.image1 {
display:block;
width: 50px;
height: 12px;
background:url(image.gif) no-repeat 0px 0px;
}
.image2 {
display:block;
width: 50px;
height: 12px;
background:url(image.gif) no-repeat 0px -12px;
}
// HTML
<table>
<tr>
<td>1st</td>
<td><a href="page.htm" class="image1"></a></td>
</tr>
<tr>
<td>2nd</td>
<td><a href="page.htm" class="image2"></a></td>
</tr>
</table>
I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is. The file validates (with some minor color warnings). I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg Another issue with the url for the page is that I can't seem to get the width of the right pane smaller. Any help would be appreciated. Thanks/Hal 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;
}
|
|||||||