|
CSS - Crazy Ie6 Text Issue
Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with.
Here is my xhtml And here is my css I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly. Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc. Cheers Similar TutorialsAlright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. I'm trying to get all the text lowercase on a page (client's wishes, not mine) I thought it was working just fine until I tried IE6 on a PC. I have a "text-transform: lowercase" in the body section of my css file. Visit this URL to see what I mean: http://matthiaslot.com/calendar On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized... Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks. Good Day, I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added. This is what the page looks like with limited text: http://lisawesselsphotography.ca/services.html It looks ok from here This is what it looks like when a greater amount of text is inserted: http://lisawesselsphotography.ca/services-test.html Not so cool looking Here is my css: Code:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #11121A url(images/bg1_01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5A5D6A;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
p, ol, ul {
margin-top: 0px;
}
ol, ul {
margin: 0px;
padding: 0px;
}
p {
line-height: 220%;
}
strong {
font-weight: normal;
color: #FFFFFF;
}
a {
color: #A40000;
outline: none;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
padding-right: 25px;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
ul.style1 {
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul.style1 li {
padding: 3px 0px;
}
ul.style1 span {
color: #FFFFFF;
}
/** WRAPPER */
#wrapper-content {
background: url(images/bg1_02.jpg) repeat-x left top;
}
#wrapper {
background: url(images/bg1_05.jpg) repeat-y center top;
}
#wrapper-bgtop {
background: url(images/bg1_03.jpg) no-repeat center top;
}
#wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg1_04.jpg) repeat-y center bottom;
}
.homepage #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.homepage #wrapper-bgtop {
background: url(images/bg3_01.jpg) no-repeat center top;
}
.homepage #wrapper-bgbtm {
background: url(images/bg3_02.jpg) no-repeat center bottom;
}
.single #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.single #wrapper-bgtop {
background: url(images/bg2_01.jpg) no-repeat center top;
}
.single #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg2_02.jpg) no-repeat center bottom;
}
.gallery #wrapper {
background: url(images/bg4_03.jpg) repeat-y center top;
}
.gallery #wrapper-bgtop {
background: url(images/bg4_01.jpg) no-repeat center top;
}
.gallery #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
padding-bottom: 60px;
background: url(images/bg4_02.jpg) no-repeat center bottom;
}
.container {
width: 900px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
width: 300px;
height: 174px;
}
.homepage #logo {
width: 300px;
height: 350px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 174px;
background: url(images/homepage02.png) no-repeat left top;
}
.homepage #logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 350px;
background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}
}
/** MENU */
#menu {
height: 45px;
padding: 15px 0px 0px 40px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 0px 30px;
}
#menu a {
float: left;
display: block;
height: 23px;
margin: 0px;
padding: 6px 0px 0px 0px;
line-height: 1;
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
text-shadow: #270000 -1px 2px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active {
background: url(images/subpage1_02.jpg) repeat-x left top;
}
/** PAGE */
#page {
}
/** CONTENT */
#content {
}
.homepage #content {
height: 290px;
background: url(images/homepage022.jpg) no-repeat center top;
}
.gallery #content {
padding: 0px 45px;
}
.single #content {
padding: 100px;
}
/** SIDEBAR */
#sidebar {
}
/** FOOTER */
#footer-wrapper {
height: 200px;
background: url(images/bg1_06.jpg) no-repeat center top;
}
#footer {
padding-top: 40px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
line-height: 220%;
color: #31343F;
}
#footer .column1 {
float: left;
width: 575px;
}
#footer .column2 {
float: left;
width: 50px;
height: 82px;
background: url(images/subpage1_03.jpg) no-repeat center top;
}
#footer .column3 {
float: right;
width: 275px;
text-align: right;
}
#footer .copyright {
padding-top: 5px;
font-size: 10px;
color: #252732;
}
#footer .copyright a {
color: #252732;
}
.box-style {
}
.box-style .title {
margin: 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
color: #FFFFFF;
}
.box-style .byline {
margin: -10px 0px 30px 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #363945;
}
/* GALLERY */
#slideshow {
}
#gallery {
position: relative;
width: 804px;
height: 337px;
margin: 38px 0px 50px 0px;
}
#gallery .slide {
width: 634px;
height: 337px;
position: absolute;
left: 85px;
top: 0px;
background: url(images/gallery_01.jpg) no-repeat left top;
}
#gallery .output {
position: absolute;
top: 17px;
left: 17px;
}
#gallery .border {
width: 600px;
height: 300px;
position: absolute;
top: 17px;
left: 17px;
background: url(images/gallery_borders.png) no-repeat left top;
}
#gallery .captions {
width: 600px;
height: 55px;
position: absolute;
left: 17px;
top: 262px;
background: url(images/gallery_caption.png) repeat left top;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#gallery .captions p {
margin: 0px;
padding: 22px 0px 0px 0px;
line-height: 1;
text-shadow: #000000 0px 2px 0px;
}
#gallery .captions .left {
float: left;
padding-left: 20px;
color: #FFFFFF;
}
#gallery .captions .right {
float: right;
padding-right: 20px;
color: #777777;
}
#gallery .prev, #gallery .next {
display: block;
width: 68px;
height: 106px;
position: absolute;
top: 116px;
text-indent: -9999em;
}
#gallery .prev {
left: 0px;
background: url(images/gallery_02.jpg) no-repeat left top;
}
#gallery .next {
right: 0px;
background: url(images/gallery_03.jpg) no-repeat left top;
}
#gallery-thumbnails {
width: 750px;
margin-left: 30px;
}
#gallery-thumbnails ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#gallery-thumbnails li {
float: left;
display: block;
width: 120px;
height: 60px;
padding: 15px;
position: relative;
}
#gallery-thumbnails img {
}
#gallery-thumbnails .border {
display: block;
width: 130px;
height: 70px;
position: absolute;
left: 10px;
top: 10px;
background: url(images/gallery_borders.png) no-repeat left bottom;
}
#gallery-thumbnails .active .border {
background-position: -130px 100%;
}
I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag. Why isn't it picking up the #gt_links li a tag. here is the code: 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>NONE</title>
<style>
#gt_links {
position: relative;
top: 139px;
height:auto;
width: 138px;
margin: auto;
font-size: 12px;
font-weight:bold;
color: #ffcc66;
text-decoration: underline; // believe is culprit
margin-top: 5px;
}
#gt_links li, ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#gt_links li a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}
</style>
</head>
<body>
<div id="gt_links">Grepolis Tools
<ul>
<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
<li><a id="w_toggle" href="#">Show/Hide</a></li>
</ul>
</div>
</body>
</html>
Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue. Please help. Thanks I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code:
#topsection {
background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
height: 90px;
}
span.htext {
font-color: #3300CC;
font-size: 30px;
text-decoration: none;
letter-spacing: 1px;
text-align: left middle;
}
anyone know how to fix this. Hi everyone, this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying! I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left nothing is telling it to align centrally! If anyone can spot the problem it would be a huge help!! here is a link to the page i am referencing, onyahead.com/arsenal if need be I can post the css, but there is a lot of it! Hi there, I'm new to CSS, and I have stumbled myself to where I am now, but I have two issues which are causing me problems. You can see the problem he URL http://img.photobucket.com/albums/v227/Fynci/ffsargh.jpg The code I am using is: Code: <html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Rack & Ruin records</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color: #B8C0D1;
text-align: center;
width: 780px;
}
#header {
width: 100%;
}
#leftcol {
float: left;
width: 350px;
height: 500px;
}
#biographyinfo {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#rightcol {
float: left;
width: 420px;
height: 500px;
}
#biography {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
}
#artistimage {
height: 300px;
width: 300px;
float: left;
padding-bottom: 10px;
}
#content {
float: left;
width: 30px;
height: 500px;
}
#artistname {
font-size: large;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
#footer {
clear: both;
width: 100%;
}
#albumart {
float: left;
height: 100px;
width: 100px;
padding-right: 5px;
}
#artistnews {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
#links {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
padding-top: 10px;
}
#artistnewsheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#Linksarea {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#albmuinfo {
font-size: 60%;
height: 100px;
text-align: left;
width: 350px;
}
#otherheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#othertext {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../new.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header"><a href="../index.html"><img src="../images/rackandruinlogo.gif" alt="Rack & Ruin records" width="780" height="127" border="0" /></a></div>
<div id="nav">
<ul>
<li><a href="../news.php">News</a></li>
<li><a href="../artists.php">Artists</a></li>
<li><a href="../releasesfull.php">Releases</a></li>
<li><a href="../live.php">Live</a></li>
<li><a href="../links.php">Links</a></li>
<li><a href="../about.php">About</a></li>
<li><a href="../contact.php">Contact</a></li>
<li><a href="http://www.myspace.com/rackandruinrecords" target="_blank">Myspace</a></li>
<li><a href="http://www.rackandruinrecords.com/forum/" target="_blank">Forums</a></li>
<li><a href="http://rsspect.com/rss/rackandruinrssfeed.xml" target="_blank">RSS</a></li>
</ul>
</div>
<div id="artistname"><!-- TemplateBeginEditable name="Name" -->Artist<!-- TemplateEndEditable --></div>
<div id="leftcol">
<div id="artistimage"><!-- TemplateBeginEditable name="Artistimage" --><img src="" alt="Artist" name="artistimage" width="300" height="300" class="imageborder" style="background-color: #B8C0D1"><!-- TemplateEndEditable --></div><div id="biography">Biography
<div id="biographyinfo"><!-- TemplateBeginEditable name="biography" -->Content for id "biographyinfo" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="links">Links
<div id="Linksarea"><!-- TemplateBeginEditable name="Linksarea" -->Content for id "Linksarea" Goes Here<!-- TemplateEndEditable --></div>
</div>
</div>
<!--Left section -->
<div id="rightcol">
<div id="albumart"><!-- TemplateBeginEditable name="albumart1" --><img src="" alt="" name="albumart" width="100" height="100" style="background-color: #B8C0D1"><!-- TemplateEndEditable --> </div>
<div id="albmuinfo"><!-- TemplateBeginEditable name="albuminfo" -->Content for id "albuminfo" Goes Here <!-- TemplateEndEditable --></div>
<div id="gap"></div>
<div id="artistnewsheader"><!-- TemplateBeginEditable name="artistnewsheader" -->Artist News<!-- TemplateEndEditable -->
<div id="artistnews"><!-- TemplateBeginEditable name="artistnews" -->Content for id "artistnews" Goes Hee<!-- TemplateEndEditable --></div>
</div>
<div id="gap"></div>
<div id="otherheader"><!-- TemplateBeginEditable name="otherheader" -->Other<!-- TemplateEndEditable -->
<div id="othertext"><!-- TemplateBeginEditable name="othertext" -->Other text<!-- TemplateEndEditable --></div>
</div><!--Right section -->
<div id="gap"></div></div>
<div id="footer"><img src="../images/Base.gif" alt="Creative Commons" width="90" height="33" /><br />
<span class="footertext">(c) 2008/2009 <a href="mailto:dean@rackandruinrecords.com">D.Birkett</a></span></div>
</body>
</html>
and the new.css file is: Code: body {
background-color: #B8C0D1;
text-align: center;
width: 780px;
margin-right: auto;
margin-left: auto;
}
.dateinfotext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
#nav {
background-color: #B8C0D1;
text-align: center;
padding: 10px;
margin-bottom: 10px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
}
#nav a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 85%;
}
#nav a:hover {
color: #FFFFFF;
font-size: 85%;
text-decoration: none;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
#gap2 {
text-align: center;
padding: 5px;
clear: both;
}
.albuminfo {
font-size: 60%;
}
a:active {
color: #000000;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
.imageborder {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
}
#gap {
text-align: center;
padding: 5px;
clear: both;
}
#footer {
text-align: right;
float: right;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 150px;
vertical-align: bottom;
}
.texttop {
vertical-align: text-top;
}
a {
color: #000000;
text-decoration: none;
}
.footertext {
font-size: small;
}
.normaltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
Any help or advice would be greatly appreciated! I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image. Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post. It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it. Any help or guidance is appreciated. After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this? How's it going, If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image: http://www.trophyfishingcharters.com/test/ Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off? Thank you. I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. Resolved! I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all! Here is my website: http://panik.owphosting.com/home.php And here is my css: Code:
body {
margin: 0px;
color: #000;
font-size: 8pt;
font-family: verdana;
height: 100%;
width: 100%;
background: url("images/bg2.jpg");
}
a {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:visited {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:hover {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 700px;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: 2px solid #000;
left: -2px;
background: #FBF2D9;
width: 150px;
}
#rightcontent {
position: absolute;
padding-top: 10px;
padding-right: 2px;
padding-left: 2px;
border-right: 2px solid #000;
right: -2px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 154px;
padding: 10px;
background: #FBF2D9;
width: 375px;
text-align: left;
}
#moduletop {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
text-align: left;
font-size: 8pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
overflow: auto;
}
#modulebottom a {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:visited {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:hover {
color: #99D8FE;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
table#news {
color: #000;
font-size: 10pt;
font-weight: bold;
width: 375px;
margin: 0;
border: 0;
vertical-align: top;
}
table#news div.head{
color: #237CBB;
font-size: 10pt;
width: 375px;
font-weight: bold;
}
table#news div.date{
color: #919191;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.detail{
color: #000;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.foot{
color: #000000;
font-size: 10pt;
font-weight: bold;
margin: 0;
width: 375px;
}
shout{
width: 130px;
overflow: auto;
}
please click here to read my message. My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Please help me CSS gods. I want pure CSS Menus. I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me. URL Blocked Works fine on FF and IE6. IE7 users complain. URL Blocked Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus. I also can't get it centered or the title evenly spaced on any browser. At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages. The CSS is main.css in the respective folders. Ohh well, the forum won't let me give links to my samples. I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it?? Click Here for My Website CSS code - Code: body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}
/* LAYOUT */
#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */
#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}
/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}
/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}
#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}
#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}
/* Navbar */
#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}
#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}
#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}
#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}
#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}
/* Main content Area */
#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}
#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
/* Height Gap */
.hg {
margin:0 auto;
height:5px;
}
#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}
/* LINK STYLES */
/* Linkpage links */
a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}
a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}
/* Footer links */
a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}
a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}
/* All other links */
a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;
}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}
#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */
.a img {
border: 0;
}
#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}
/* text classes */
.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}
.middletext {
line-height: 14px;
}
.normaltext {
font-size: 12px;
}
.largetext {
font-size: 16px;
}
/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up. The site is http://www.orchard-homes.co.uk/, has anyone got any ideas? It seems like its been stretched vertically... Thanks! |
|||||||