|
CSS - Text-transform Issue
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. Similar TutorialsIs it possible to do this using CSS? See attachment! Thanks! Hello, If you visit the page http://tombraiders.net/katie/alison/services.html User: letme Pass: in I'm trying to get the links (in the main body, called "left_side" in the CSS) to do an uppercase transform when rolled over. Currently, when you roll over Facials (the only link I have right now) the colour changes, but it doesn't change to uppercase. In the CSS file, located at http://www.tombraiders.net/katie/alison/style.css the bit of code for this is: Code:
#left_side a{
font-weight: bold;
text-decoration: underline;
}
#left_side: a:hover {
COLOR: #667D8E;
text-transform: uppercase;
}
I'm not sure why it's not working. Any help would be appreciated - thanks Hi guys I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar. Look, here is the HTML Code, and following, the CSS code Code: <div id="menutoolbar">
<ul>
<li><a href="link1.html">Opcion1</a></li>
<li><a href="link2.html">Opcion2</a></li>
<li><a href="link3.html">Opcion3</a></li>
</ul>
</div>
The CSS Code Code: div#menutoolbar {
height: auto;
width: auto;
}
div#menutoolbar li {
height: 21px;
width: 32px;
margin: 0px;
font-family: Tahoma;
font-size: small;
text-align: center;
line-height: 65px;
list-style-type: none;
background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
background-position: center top;
background-repeat: no-repeat;
}
div#menutoolbar li a {
font-weight: bold;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
div#menutoolbar li a:link {
color: blue:
}
div#menutoolbar li a:visited {
color: #900;
}
div#menutoolbar li a:hover {
font-weight: bold;
color: red;
}
div#menutoolbar li a:active {
color: black;
}
Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example... 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. 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%;
}
Alright, 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. 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 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'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. 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! 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. 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? 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. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. |
|||||||