|
CSS - W3c Code Cleanup Help
Please look at this page:
http://validator.w3.org/check?uri=w...=Inline&group=0 As you can see all the script codes are in need of helping to pass. I am trying to clean this page up and the rest but need advice to how to do so. For example, it is telling me not to use the & sign in the script but I am afraid to replace it with the & or & . What should I do here or how can I fix these errors? Should I be using a different Doc type or something? Thanks!!! Similar TutorialsI'm looking for a way to create the same look (cleaned up however you think is best) for -> site: http://www.measureoffaith.net/index.html Check out the news section, I've included code. I just simply can't stand how many div tags are needed to create this effect. Any ideas on how I can eliminate a few via styling others differently? example news post: Code: <div class="newspost">
<div class="wraptitle">
<p class="subtitle">
- I'M...SO...HIGH!
</p>
<p class="thetitle">
HIGH KING MAULGAR SLAIN
</p>
</div>
<div class="newsdate">
23.04.2007 by <img src="images/icons/mar.png" alt=
"" />
</div>
<div class="newscontent">
Lets pretend this news post was made right after the
kill and that I have not been slacking on updating
all news beyond this point.<br />
A word from the wise, this is what happens when you
call yourself King, and hang out with four of your
mates in a cave smoking pot. Careful because if the
MoFia come to town, it's going to get nasty. This is
our turf now!
</div><img src="images/news/highking.jpg" alt=
"An image of the High King Maulgar of Gruul's Lair, dead at the feet of our guild is displayed." />
</div>
style.css: Code: .newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}
.wraptitle{
float: left;
height: 79px;
}
p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}
p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}
.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}
.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}
p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!! what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity? how do i input filters? how do i input tablelayout(like CSS or HTML)? where do i insert tags for the scrollbar, which also has not worked for me? Code:
<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300;
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>
<body>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
<area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
<area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
<area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
<tr>
<th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
<td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
</tr>
<tr>
<th height="211" scope="row"> </th>
</tr>
<tr>
<th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
<tr>
<th width="198" height="18" scope="row">New Events!!! </th>
</tr>
<tr>
<th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
</p></th>
</tr>
</table></th>
</tr>
<tr>
<th height="32" scope="row"> </th>
<td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br>
<b>Last Updated:</b> January 25, 2006
</td>
</tr>
</table>
<p><br>
<br>
</p>
</body>
</html>
this is also an attached code. btw i am working w/ dreamweaver. Code:
<style type="text/css">
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
</style>
this is the last one Code:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
Hi guys I've a website, pure css, tableless It looks good in Firefox, Opera, etc. etc. It looks VERY bad in IE Look: Firefox http://img465.imageshack.us/img465/4333/shot14jr.png Internet "Explorer" http://img378.imageshack.us/img378/8224/shot22cv.png Website files for download here... http://rapidshare.de/files/11673865/website.zip.html Does any1 know how to fix css or web to look good in IE also ? Thanks a lot in advance For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong? here is the code: Code: css
*
{
margin: 0px;
padding: 0px;
}
html
{
width: 100%;
height: 100%;
}
body
{
height: 100%;
width: 100%;
background-color: /*#E0F8F7 */#989B9F;
margin: 0px;
padding: 0px;
}
#login_box
{
background: url( '../images/login2.png' ) no-repeat center center;
position: fixed;
width: 319px;
height: 417px;
top: 50%;
left: 50%;
margin-top: -209px;
margin-left: -160px;
}
#input_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 230px;
margin-left: 55px;
}
#lock
{
border: none;
position: fixed;
background: url( '../images/lock.png' ) no-repeat;
width: 10px;
height: 13px;
margin-top: 287px;
margin-left: 270px;
}
#forgot
{
position: fixed;
margin-top: 362px;
margin-left: 50px;
}
#login_box h1
{
color: #EDF2F7;
font-size: 10px;
text-align: left;
font-family: arial, sans-serif;
}
.input
{
width: 200px;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
border: solid 1px #85b1de;
background: url( '../images/gr.png' ) repeat-x #EDF2F7;
background-position: top;
padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
border: solid 1px #31677B;
}
#login_box p
{
font-weight: bold;
color: #478FAB;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
}
#button_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 360px;
margin-left: 190px;
}
.button
{
border: none;
width: 103px;
height: 38px;
text-indent: -1000em;
cursor: pointer;
background: url( '../images/login_button.png' ) no-repeat center center;
}
in Internet Explorer: Incorrect in Firefox, Opera, Chrome... ( Any code compliant browser ) Correct ....Any help please? I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code: /******************************** Main Navigation ****** * Global topmenu navigation, degrades gracefully to css * if Javascript is disabled. Else applies fade effect. */ #navcontainer { height:50px; float: right; width:1014px; position:relative } /* Menu Body */ ul#navigation { height:35px; list-style:none; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; float: left; } /* Float LI Elements - horizontal display */ ul#specialnav li { float:left; display: block; } /************ SPECIAL NAV ************************/ #specialnav { height:50px; width:185px; position:relative; } /* Link - common attributes */ #specialnav a { background:url('specialnav.png') no-repeat scroll top left; display:block; height:35px; width:185px; position:relative; z-index:10; line-height:2.5em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#fff; font-size:14px; text-align:center; text-decoration:none; padding-left: 0px; padding-right: 0px; } /* Specify width and background position attributes */ #specialnav li.isactive a { background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link (on hover) - common attributes */ #specialnav li.highlight a:hover { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; height:35px; width:185px; line-height:2.5em; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link - common attributes */ #specialnav li.highlight a:active, #specialnav li.highlight a:focus, #specialnav li a:active, #specialnav li a:focus { background:url('specialnav.png') no-repeat scroll 0 -70px; display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* fade effects start here */ /* Span (on hover) - common attributes */ #specialnav a span.animate { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; position:absolute; line-height:2.5em; top:0; left:0; height:100%; width:100%; z-index:10; cursorointer; } /* Shift background position on hover */ ul#navigation li a span { background-position:0px -35px; } /* Shift background position on hover for the class: "isactive" */ ul#navigation li.isactive a span { background-position:0px -35px; } span.trans {display:none;} hi... what does this css code mean.. body table table table table#plv table td{color:#fff} ? and how would the html code look like? is this for tables with no class tags attach to it.. Greetings everyone! I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon. My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css? Thanks in advance! - Dehumanizer I often see css code with "greater than" sign like this: html>body #centercontent { margin-left: 201px; margin-right:201px; } what does this mean? What is the difference with body #centercontent { margin-left: 201px; margin-right:201px; } Thanks for the enlightment. Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference Have some problem with my css. Would appreciate some comments on how to do this: Here is the code: with explanation of what's not working: It's a small "complete" htm file..... Code:
<html>
<head>
<style>
.outer {
display: block;
background-color: #bbb;
border: 0;
padding: 0;
text-align: center;
font-family: Arial,sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a {
display: block;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a:hover {
text-decoration: underline; color: #fff;
}
.outer a:hover .text-top {
text-decoration: none; color: #000;
}
</style>
</head>
<body style="background-color:#888;">
<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>
I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>
NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr>
<td>
<div class="outer">
<a href="#">
<div class="text-top">
<br>Top text<br><br>
</div>
<div class="text-img">
<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
</div>
<div class="text-bot">
<br>Bottom text<br><br>
</div>
</a>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. Hi: I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull. <FORM METHOD="POST" ACTION="login.php"> <TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK> <tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr> <TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR> <TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD> <input type="submit" name="submit" value="LOGIN"></TD><TR> </form> </TABLE> Also thanks in advance. Hello. I'm interested in creating areas within my web page similar to the attachment, that show formatted code. I can handle most of it - using specific font(s), a green left-border, perhaps some banding for alternate rows, etc. But is it possible to create automatic numbering without having to insert separate 'li' elements for each row? Would I have to entity reference lots of characters within the code? Indenting might be troublesome? Perhaps there is some site that already makes this css publicly available? Andy. Can anyone help me to transform this table in css code ? <table width="1000" border="1" bordercolor="#FFCCFF"> <tr> <th width="500"> <img src="111.jpg" </th> <th width="500"> <center> <font face="Tahoma" size="60" color="#330033"> 111 </font> </center> </th> </tr> </table> I am having a big problem with my website. It works great on every browser except ie7. The 3 big icons do not appear in a row but one below another, and the 4 boxes on the bottom cannot be displayed. The website is (www dot sdcomptech dot com) Any help is appreciated, everything works but ie7. Sorry....wrong info here....been up too long. I'll regroup and repost this with hthe correct info. I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page. So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file. Thanks in advanced! Like I said in a previous post, I'm taking over design of a project that was abandoned. I'm nearly complete, except my site won't show in IE. I found this line of code to be the reasoning, and I cannot for the life of me figure out what this line is attempting to do. I can't parse it. This might be in the wrong forum section, I'm not entirely sure. Code: <div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-nws"><div class="bd"></div></div><div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-ws"><div class="bd"></div></div><iframe style="position: absolute; visibility: visible; width: 10em; height: 10em; top: -134px; left: -134px; border-width: 0pt;" id="_yuiResizeMonitor" src="data:text/html;charset=utf-8,%3Chtml%3E%3Chead%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.onresize%3Dfunction%28%29% 7Bwindow.parent.YAHOO.widget.Module.textResizeEvent.fire%28%29%3B%7D%3C%2Fscript%3E%3C%2Fhead%3E%3Cb ody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"></iframe> |
|||||||