|
CSS - Css2 Help Finding Error
Link: http://www.vairlinecms.com/template.html
I cannot for the life of me figure out why Testting is not aligning vertically with About Us (To have the same space between top of Testting and menu bar as there is for About Us.) Any ideas? CSS: Code: /*
Author: Matt
File: default.css
Desc: contiains all of the CSS styles.
Legal: This code is not to be used without the written consent of the author.
*/
/* ===== Defaults ===== */
body {
background: #CCC;
font-family: verdana, tahoma, serif;
}
a {
}
h1, h2, h3 {
}
p {
}
/* ===== Wrapper ===== */
div#wrapper {
position: relative;
width: 976px;
height: 600px;
margin: 0 auto;
padding: 0;
background: #FFF;
border: 10px solid #FFF;
}
/* ===== Header ===== */
div#header {
position: absolute;
top: 0;
left: 0;
width: 976px;
height: 197px;
margin: 0;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
/* ===== Navigation ===== */
ul#navigation {
position: absolute;
top: 154px;
left: 0;
float: left;
width: 976px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: blue;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
display: block;
float:left;
margin: 0;
padding: 0 .5em 0 .5em;
font-weight: bold;
line-height: 25px;
text-decoration: none;
color: #FFF;
border-right: 1px solid #FFF;
}
ul#navigation a:hover {
color: #FFF;
background: red;
}
/* ===== Content ===== */
div#content {
position: absolute;
top: 185px;
left: 0;
margin: 0;
padding: 0;
}
div#content #leftSide {
float: left;
width: 700px;
margin: 0;
padding: 0;
}
div#content #leftSide h1 {
color: blue;
margin: 0;
padding: 0;
}
div#content #leftSide p {
color: #000;
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 13px;
}
div#content #rightSide {
float:left;
width: 200px;
margin: 0;
padding: 0;
}
div#content #rightSide h1 {
}
div#content #rightSide p {
}
/* ===== Content Boxes ===== */
div#content #clientLoginBox {
}
div#content #clientLoginBox h1 {
}
div#content #clientLoginBox p {
}
/* ===== Footer ===== */
div#footer {
}
HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vAirlineCMS.com | Virtual Airline Support Center</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> <head> <body> <div id="wrapper"> <div id="header"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Sign-Up</a></li> <li><a href="#">Support & Contact</a></li> </ul> </div> <div id="content"> <div id="leftSide"> <h1>About Us</h1> <p>This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. </p> <h1>Features</h1> <p>Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test.</p> </div> <div id="rightSide"> <h1>Testting</h1> </div> </div> </div> </body> </html> Similar Tutorialshello all, have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like Code: background: url("images/tiler.gif") top y-repeat;
in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys ! So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing. The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately. I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!) Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane. thanks everyone. d What is the Difference between CSS2 and CSS3 ??? Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? 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. 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? 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'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? hey guys i have wrote this up so i can display 2 background images on my page but nothing shows up at all any idea why? Code: <style type="text/css">
<!--
html {
background-image: #FFFFFF url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:0px 155px;}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
background-image: transparent url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:15px 0px;
}
-->
</style>
I've been developing a template and there is a visual inconsistency in IE6 and 7 that I have been unable to repair. My initial thought was that it was just a whitespace bug, but removing the space between all the tags has been ineffective. The problem is a small gap (1-3px) that appears between the styled list items on "Solutions" and "Whitepapers" siderails in the left column. This only happens in IE. I'm also having issues with the Suckerfish dropdowns not positioning properly in IE7 only. I'm about ready to give up and write IE it's own sheet, but I hate that. Any help would be really welcomed. CSS File: http://www.aidenbordner.com/test/template/css/style.css Template: http://www.aidenbordner.com/test/template/index.html Hi all, great forums! Yall have helped me so much, never registered though so thanks Anyways I can't seem to find the cure for this problem. So far it works perfectly in firefox, IE 6 not so great. Each box should be spaced equally from the edges and each other. In IE6 there is a large gap on the left side. I've tried several combinations of margins, padding, and changing the size of the content box itself, nothing works, screws everything up in one or the other browsers. Here is the code: ( for the content box, it was supposed to be 676px wide but I had to have 2 subtracted for the border. In the end it needs to be a total of 676px wide in order to fit with the header.) CSS: Code:
html, body {
background: #131414 url(images/bgslice.jpg) repeat-x top center;
font-family: arial,verdana,sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #333333;
text-align: center;
}
#content {
margin-left: auto;
margin-right: auto;
padding: 0;
background: #EDEDED;
height: 400px;
width: 674px;
max-width: 674px;
border: 1px solid #2C383C;
text-align: left;
}
.bluebox {
border: 2px solid #2C383C;
margin: 8px 0 0 8px ;
padding: 0;
float: left;
}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>The Party Quest - Are you coming out tonight?</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import "css.css";</style>
</head>
<body>
<div id="content">
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 146px; height: 145px;">
test
</div>
</div>
</body>
</html>
Thank you so much for any help you guys can supply! Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? When trying to validate my CSS with W3C, I keep getting parse error on this code :- ul#menu li a.home:hover, ul#menu li a.home:active, ul#menu li a.port:hover, ul#menu li a.port:active, ul#menu li a.multi:hover, ul#menu li a.multi:active, ul#menu li a.web:hover, ul#menu li a.web:active, ul#menu li a.about:hover, ul#menu li a.about:active, { background-position: center center; } The code is part for a horizontal 3 state navigation menu using images. |
|||||||