|
CSS - Ie 8 Syntax Error
I keep getting an error but only when I run the site in IE8:
Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Timestamp: Fri, 13 Mar 2009 16:59:31 UTC Message: Syntax error Line: 1 Char: 25 Code: 0 It keeps pointing to this line of code at the top: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But if I don't use that the Divs and some CSS seem to break. With or without that code it works great in FireFox. I have no idea what's going on with this. Similar TutorialsHi, I'm trying to use CSS and php includes to simplify my website admin. What I'm trying to do is create a banner area, a left column and a right column. Each section then calls another php page. I will eventually let the right column have the correct content instead of calling another page. My problem is that none of the basic formatting is being applied to my content. The menu.htm page in bold is also calling the style.css as is the c_index.php. I have tried seperating the layout CSS and the formating CSS but it did not make a difference. When I view both menu.htm and c_index.php in seperate windows they are affected by changes in the style.css! Would somebody be kind enough to explain where the error is? Here is my code: TEST PAGE Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Planet Phillip</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner"><?php include "header.php";?></div> <div id="leftcontent"><?php include "menu.htm";?></div> <div id="centercontent"><?php include "c_index.php";?></div> </body> </html> STYLE.CSS Code: a:active { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:link { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:visited { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:hover { color:#0000FF; text-decoration }
.hline { height: 1; color: #003300; text-align: left; margin-top: -6; margin-left: 36; margin-bottom:0 }
.date { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-top: 0; margin-left: 36; margin-bottom: 0 }
.project { font-family: Verdana; font-size: 10pt; margin-left:60; font-weight: bold; margin-top:12; margin-bottom:2 }
.newsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:8 font-style:italic }
.newstext { font-family: Verdana; font-size: 10pt; text-align: justify; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.posted { font-family: Verdana; font-size: 10pt; text-align: right; margin-top:8; margin-bottom:30 }
.listtext { font-family: Verdana; font-size: 10pt; text-align: left; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.tabletext { font-family: Verdana; font-size: 10pt; text-align: justify }
.listsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:-12; font-style:italic }
.Mheader { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: right; margin-top: 0; margin-bottom: -18 }
.Mlink { font-family: Verdana; color: #003300; font-size: 16pt; text-decoration: none; text-align: right; margin-bottom: 18 }
#leftcontent {
position: absolute;
left:0px;
top:150pt;
width:120pt;
}
#centercontent {
margin-top: 50pt;
margin-left: 150pt;
}
#banner { margin-left: 60pt; margin-top: 30pt;}
Hi guys, I have this: Code: <li style='background-image:url(../images/layout/listitem.png); background-position:0px " . $background . "px; height:23px; background-repeat:no-repeat;'> I want a hover effect, I found a w3c article 'http://www.w3.org/TR/css-style-attr' But copying the syntax just does not work? Any help? I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. Hey everyone, the admins have implemented a new hack to the forums, allowing you to post your code with nicely coloured text rather than just the normal black or the old php stuff. More details can be found he http://forums.devshed.com/t279108/s.html Html code: [hig hlight=html4strict]your code here[ /highlight] For example: html4strict Code: Original - html4strict 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
The same goes for CSS highlighting: [hig hlight=css]your code here[/high light] css Code: Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }
As you can see from the thread I linked, there are many many other languages supported, but these three examples are more likely to be used than any other in this particular forum... Have fun with it, and please do use this feature, I'm sure it will make things much easier for us to read/understand, rather than just posting chunks of code. Enjoy! --Jon. Hi! I need some clarification on what the right arrow meant for the UL and LI Code:
#dmenu li>ul {
top: auto;
left: auto;
}
Thanks... FletchSOD Hello I would like to know the difference between: *name .name #name thanks Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like. Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure. Here's a few examples of rules that I don't understand: Code: div#navigation #navigation .navigation a .body div#navigation > a I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV. What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?" No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more. Thanks for your help! How to define a style so that I can just put <table class="abc"> and it will apply to both table, th, td together? currently i am using: table,th,td{ //style here } it work in all table, th, td. But i just sometimes want to write <table class="abc"> and it would apply in all cell within this table. so that I don't need to write <th class="abc"> , <td class="abc"> in every tag in same table. thx. Hello. I'm playing around with CSS and trying to learn it, but for some reason, I can't figure out why my code won't work. It's very simple, the site, and all I want to do right now is pub a small black border around my first DIV, "header-left" just for the heck of it. Code:
<HTML>
<HEAD>
<TITLE>Andy/s</TITLE>
<!--Style Sheet-->
<STYLE type=text/css>
header-left
{
border:1em solid;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header-left">Hi</DIV>
</BODY>
</HTML>
I think it should work. I've tried em and px for the border and FireFox is still showing nothing. Any help? I'm open to anything! Ok, so I've done the w3schools.com tutorial on CSS and I still have some basic syntax questions. In my wordpress style.css I see the following entry: #featured-top .featuredpost img { background: #FFFFFF; margin: 0 0 5px 0; padding: 4px; border: 1px solid #DDDDDD; } Does this mean that these rules apply only to elements in this specific order? Like, in English, "rule applies to an img, that has a parent in the class featuredpost, that has a parent with id = featured-top"? If so, does the featuredpost class have to be defined previously or is this considered the definition? Second question, in the HTML I see this syntax: <div id="wpsb" class="widget wpsb_opt_in"> I didn't think you could have spaces in a class name. Or does this mean that wpsb is in 2 classes? When I search style.css I don't see the "wbsb_opt_in" class anywhere. Thanks I have searched but can't find a clear answer to what I suspect this is a noob question. please correct me if I am wrong. element#id ({} - applies to the element with id #id element {} - applies to all element that are in the block #id element.class {} - applies to all element with .class but what is .class element {} ? tia, Rand I went back to the Definitive Guide and found this covered in section 2.5.2. Descendant Selectors Hi all, What does this mean? H1 A:link { color:#fff } - or - .sectionhead H2 { font-size: 12px; } I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question. Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case. I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions? Thanks to anybody who takes the time to answer! Laura S. I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document. In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3"> For each new paragraph the class p is incremented by 1. However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet. Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission? Can anybody explain to me how this affects those paragraphs? I'm wondering what's the word is called for setting the image width and height in CSS Code:
img.test
{
<<What's the keyword??>>: 10 px;
}
Thanks, FletchSOD Trying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area): http://medieval.shadowedrealm.com/mpi/index.php If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide. Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem. Here's my CSS code for the status bar: Code: .statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}
.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}
.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}
.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}
.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}
.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}
.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}
.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}
.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}
Here's the HTML for the status bar, minus the php code: Code: <div class="statusbar">
<div class="titleback">
<div class="title">
MPI Status Bar
</div>
</div>
<div class="text">
<ul>
<li>
<div class="category">
<a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
Agriculture</a>
<?php
//PHP code
?>
</div>
</li>
This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense. Does anyone know how I can correct for this error within my CSS code? hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox.. how can i fix it? Site link is provided below. Thanks -------- testing ------ http://midnite-pandaz.com/visionmag/ I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link. If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so ) Heres an image. Code: http://i4.photobucket.com/albums/y102/Macceth/error.jpg EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S and here are the html code and styles.css code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" />
<title>Want For Destruction | The Official Want For Destruction Site</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<h1>Your Logo</h1>
</div><!--ender header-->
<div id="nav1"class="cms-editable">
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="band.htm">Band</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="music.htm">Music</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="main">
<div id="primary">
<div id="header2" class="cms-editable">
<h2>EVENTS!</h2>
</div>
<div id="content1" class="cms-editable">
<p><strong>Upcoming 2011 events!</strong></p>
<p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p>
</div>
</div><!--end primary-->
</div><!--end main-->
</div><!--end container-->
</body>
</html>
Code: html {
background: #000000 url(images/BG.jpg) no-repeat center top;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
*/ color: white */
}
a:hover {
text-decoration: underline;
}
a.selected {
font-weight: bold;
}
p {
color: #43433f;
line-height: 21px;
}
h2 {
color: #363era;
font-size: 31px;
}
li {
list-style: none;
}
img {
border: 0px;
}
#container {
position: relative;
margin: auto;
width: 971px;
text-align: left;
}
#header {
position: relative;
}
#header h1 {
text-indent: -9999px;
background: url(images/header.png) no-repeat center;
line-height: 251px;
}
#nav {
background: url(images/navBG.png) repeat-x;
overflow: hidden;
height: 40px
margin: 0 0 6px 0;
padding: 0 0 0 31px;
}
#nav li {
float: left;
line-height: 40px
}
#nav li a {
border-right: 1px dotted #959595;
padding: 0 1em;
color: white;
}
#nav li a.first {
padding-left: 0;
}
#main {
position: relative;
background: url(images/mainBG.png) repeat-y;
padding-bottom: 4em;
}
#primary h2 {
padding: 25px 0 15px 0;
margin-left: 38px;
margin-right: 38px;
border-bottom: 2px dotted #aab391;
color: white;
}
#primary p {
padding-left: 38px;
padding-right: 38px;
color: white;
font-size: 75%;
}
#content1 p {
border: 0px;
}
#padfix {
padding-left: 38px;
padding-right: 38px;
padding-top:0px;
padding-bottom:5em;
float:left;
}
Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated! |
|||||||