CSS - How To Make Css Reference Swc

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!

This problem is in Internet Explorer.

Here's the first page that looks the way it should:
http://www.invistation.com/invite_me/contact.php

And here's the other page, that references the same css file, but rendered differently:
http://www.invistation.com/invite_me/resetpass.php

My CSS File:
http://www.invistation.com/invite_me/css/index2.css

What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms.

Really basic question. I've created a CSS text class. How do I reference it to apply to a text sample?

I've been using this page as my guide:
http://www.htmlgoodies.com/beyond/css/article.php/3470231
But they only reference commands such as <I class="name"> and <U class="name">. I don't want to add any Italics or Underlines, so how do I only reference the class?

I am creating a standalone (included with <script src>) script to display a slideshow of images, and need the images' container DIV to resize to the height and width of the largest image, PLUS the border width. I can get the height easily enough, but the border is giving me problems. The code I'm using now is:

Code:

function getcss(myclass,element) {
 var CSSRules;
 if (document.all) { CSSRules = 'rules'; }
 else if (document.getElementById) { CSSRules = 'cssRules'; }
 for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
  alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');
  if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
   return document.styleSheets[0][CSSRules][i].style[element]
  }
 }	
}

function InitializeImageRoller() {
 for (var q = 0; q < Files.length-1; q++) {
  var hidden = eval('hiddenpicture' + q);
  if (MaxW < hidden.width) { MaxW = hidden.width }
  if (MaxH < hidden.height) { MaxH = hidden.height }
  Container.style.height = MaxH;
  Container.style.width = MaxW + getcss('Container','borderWidth');
  hidden.style.display = "none";
 }
}

right now I'm testing, and in the first function, I have a line " alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');". This works fine, but returns ALL the properties of the border. I need it to only give me the width. What should the ['border'] be changed to to accomplish this?

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.

Hi...

Can any body tell me how to make effect mentioned below.

http://forums.devshed.com/archive/t-175080

Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc.

I need this type of effect for my web site, can any body tell me how to make this....

Thanks

Hi,

I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page.

I have a div called MainSection as follows :

#MainSection {
position: absolute;
border: 1px solid #000033;
top: 100px;
left: 1px;
width: 777px;
z-index: 0;
}

Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows:

.WhereYouAre {
position: absolute;
width: 500px;
top: 8px;
left: 205px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #000033;
}

#LeftPanel {
position:absolute;
top: 3px;
left: 3px;
width: 190px;
border: 1px solid #000033;
}

#MainBodyContent {
position: absolute;
border: 1px solid #000033;
padding: 0px 5px 5px 5px;
top: 5px;
left: 200px;
width: 567px;
z-index: 0;
}

Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav:

#BottomNav{
position:inherit;
margin:10px;
border-top: 1px solid #000033;
border-bottom: 1px solid #000033;
width: 780px;
left: 0px;
}

The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection.

Thanks a lot for any suggestions,
J.

Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF?

HERE is my link.

Many thank yous from the CSS noob.

Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly).

I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated!

Hi,

I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page.

I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others).

Any ideas?

W.

<style type="text/css">
select{width:75px}
option{width:150px}
</style>

I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done.

Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1

The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that?

Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it.

(an expample is the HTML code that it would be)

Code:

<table width="150" border="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>
</table>

I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing!
Cheers,

Hi

I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera.

Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help?

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><title>
	Untitled Page
</title>
    <style type="text/css">
        #test div {
            border:solid 2px red;
            position:absolute;
        }
        #head {
            height:100px;
            top:0;
            left:0;
            right:0;
        }
        #nav {
            left:0;
            top:105px;
            bottom:105px;
            width:200px;
        }
        #foot {
            height:100px;
            bottom:0;
            left:0;
            right:0;
        }
        .scroll {
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin-left:205px;
            margin-top:105px;
            margin-bottom:105px;
        }
    </style>
</head>
<body>
    <div id="test">
        <div id="head"></div>
        <div id="nav"></div>
        <div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
            <div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
            </div>
        </div>
        <div id="foot"></div>
    </div>
</body>
</html>

The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated...


SW.

I'm still new to the CSS layout deal, but I'm giving it what I can, and I felt I was getting close until I looked at the page in IE and then ran it through some validation

First the validation
This is my page so far:
Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layoutTest.css" />
<style type="text/css" media="screen">@import "layoutTest.css";</style>
<style type="text/css">
<!--
#ctNav {
	position:absolute;
	height:auto;
	min-height:30px;
	margin:0px 0px 0px 144px;
	border:0px;
	background-color:68657A;
	z-index:3;
	width: 100%;
	}
#ctNav ul {
  	padding: 0;
	margin: 0;
}
#ctNav li {
	display: inline;
	list-style-type: none;
  	padding: 0;
	margin: 0;
}
-->
</style>
</head>

<body>
<div id="localNav"> 
	<a href="http://www.codetailor.com"> <img height="66" alt="Alt Text" src="#" width="144" border="0" /></a> 
	<ul><li>localMenu</li></ul>
</div>
<div id="ctNav"> 
  <ul><li><a href=""><img height="30" alt="Alt Text" src="#" width="223" border="0" /></a></li></ul>
</div>
	
<div class="content"> 
  <h1>Heading 1</h1>
  <p><img src="#" width="288" height="288" align=right hspace="12" alt="picture" ></p>
  <h3>Heading 3</h3>
  <p>This is some text</p>
</div>
</body>
</html>

I have bolded the part that will not validate when I run it through the http://validator.w3.org/ validator.
if this is the case, how do I add styles. It won't allow me to put them on the page or in another file (both are shown here by the way, only one way will be used)

the second part is the fact that without having the #ctNav styles on the page I get a little extra on the bottom of my pictures. I can do a screenshot of this if it would help, but if you run it with and without these tags in there you will see for yourself.

these are the styles contained in the external file:
Code:

body {
	margin: 0px;
}

h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:24px;
	text-align: center;
	}
h2 {
	font:bold 12px/14px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 5px 0px;
	padding:0px;
	}
p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
.Content>p {margin:0px; text-indent:30px;}
.Content>p+p {text-indent:30px;}  

/* All the content boxes belong to the content class. */
.content {
	position:absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	min-width:120px;
	margin:36px 10px 20px 165px;
	border:0px;
	background-color:white;
	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}

#localNav {
	position:absolute;
	width:auto;
	min-width:120px;
	margin:0px auto 0px 0px;
	border:0px;
	background-color:3D3B7C;
	z-index:4;
	height: 100%;
	}
#localNav p {margin:0px;}
#localNav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: none
}
#localNav li {
	margin: 0px;
	padding: 1px 0px;
	border-bottom: 1px solid black;
	width: 100%;
	display: block;
	text-indent: 4px;
}
#localNav li.selected {
	margin: 0px;
	padding: 1px 0px;
	border-bottom: 1px solid black;
	width: 100%;
	display: block;
	text-indent: 4px;
	background-color: 67657A;
}
#localNav li:first-child {
	margin: 0;
	padding: 1px 0px 1px 0px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	width: 100%;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	color: #000000;
	text-align: center;
	background-color:#67657A;
	font-weight: bolder;
	text-indent: 0px;
}

#ctNav {
	position:absolute;
	height:auto;
	min-height:30px;
	margin:0px 0px 0px 144px;
	border:0px;
	background-color:68657A;
	z-index:3;
	width: 100%;
	}
#ctNav ul {
  	padding: 0;
	margin: 0;
}
#ctNav li {
	display: inline;
	list-style-type: none;
  	padding: 0;
	margin: 0;
}

finally, when I look at this in IE, the localNav is taking over the whole screen, I assume that it is because of one of the tags, but I can't see it. Point it out for me if you know.
thanks for your time.