Learn VBA & Macros in 1 Week!

CSS - Whats Wrong With This?

Full Excel VBA Course - Beginner to Expert

Whats Wrong With This?	View Content

Hi

I am using an external stylesheet to try to format some text, but its not working.

This is what is in my stylesheet?

PHP Code:
.small{
font-size: 11px;
font-family: verdana, arial, tahoma;}

I then used this:

PHP Code:
<span class="small"><font color="#000000">my text</font></span>

But its not formatting it. Any ideas?

Full Excel VBA Course - Beginner to Expert

Whats Wrong With This Css ???

Similar Tutorials

View Content

This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column.

Code:

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Arial', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}

#caption {
	font-style: italic;
	font-weight: bold;
	padding-top: 5px; 
}

#frame {
	width:750px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	text-align:left;
}

#header {
	float: left;
	width: 751px;
	height: 55px;
	background: #ccc url(/greydusk/images/header_back.gif);
}

#leftcolumn {
	float: left;
	width: 505px;
	background:#fff;
	margin-top: 0px;
	margin-left: 2px;
	padding-bottom:20px;
}

#title {
	display: block;
	font-weight: bold;
	font-size: 15px;	
}

#date {
	float: left;
	margin-left: -35px;
	font-weight: normal;
	color: #9C9C9C;
}

#leftcolumn p {
	background:  url(/greydusk/images/marker1.gif) no-repeat top left;
	text-indent: 50px;
	padding-left: 15px;
	padding-right: 10px;
	margin-top: 35px;
}

#rightcolumn {
	float: left;
	width: 235px;
	margin-left: 5px;
} 

#rightcolumn p {
	padding-left: 15px;
	padding-right: 15px;
}

#menu {
	background-color: #000;
	width: 751px;
	font-size: 14px;
	color: #FFF;
}

#menu ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0px;
}

#menu li {
	float: left;
	margin: 0 0 0 0;
	padding-right: 15px;
	padding-top: 4px;
	padding-left: 15px;
	padding-bottom: 7px;
}

#menu li a {
	padding: 0px;
	padding-bottom: 3px;
	margin: 0 px;
	color: #fff;
	text-decoration: none;
}

#menu li a:hover {
	border-bottom: 4px solid #7F88DA;
	color: #7F88DA;
}

and here is the page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>test site</title>
	<script type="text/javascript"></script>
	<style type="text/css" media="all">
		@import "/greydusk/css/greydusk.css";
	</style>
	
</head>

<body onload="window.defaultStatus='test-site';" id="test">

<div id="frame">
	<div id="header">
	<p>&nbsp;</p>
	</div>
	<div id="menu">
		<ul>
			<li><a href="blah.htm">home</a></li>
			<li><a href="blah.htm">news</a></li>
			<li><a href="blah.htm">forums</a></li>
		</ul>
	</div>	
	<div id="leftcolumn">
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
	</div>

	<div id="rightcolumn">
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
	</div>
</div>

</body>
</html>

thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =(

Whats Wrong With These Floats?

Similar Tutorials

View Content

Hi

I have floated two boxes next to each other http://www.sussexfind.co.uk/test/ (left and right) I have put a class "clr" after them, when viewed in IE the gap between the footer and the rounded boxes is greater than when viewed in Firefox.

Does anyone know why this is?

Thanks

Whats Wrong With My Divs?

Similar Tutorials

View Content

http://65.26.50.204/ec/index3b.html

They look odd on the left and bottom, the margin seems to big, and there is no margin on the right or bottom, in firefox. In internet explorer it displays the way I want it too, but it adds scrollbars and expands the pages width and height, past where I want it to go.

Any solutions?

Suggest Whats Wrong With My Site Design (opera & Ie)

Similar Tutorials

View Content

I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more.
In Opera9.0 it looks very messy.

IE: http://browsershots.org/screenshots...1b07da5ea24003/

Opera: http://browsershots.org/screenshots...e171bac56fbf14/

Original:
http://www.zahra-zahra.com/aboutus.php

Not Sure Whats Going On Ie V Firefox

Similar Tutorials

View Content

Hi all
Can any one help,
I have built a webpage and it looks fine in firefox but not in IE.
Have a look
http://pfwd.org.uk/style.htm
I have no idea whats up with it.
I have tried to vaildate the page with w3c and it comes up saying that a a href tag should not between div tags or something along those lines. (this is for the "go" link).

Ths css is vaild and checked
http://pfwd.org.uk/style.htm
http://pfwd.org.uk/style.css

The htm code:
PHP 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>

    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css"type="text/css" />
  </head>
  <body>
<div class='main'>
    <div class='header'>Updates to the site</div>
    <div class='subHeader'>Search for an update</div>
    <div class='dbItem' style='left:180px;  width: 239px; height:22px; float:left'>
      <form name="search" method="post" action="post">
        <select name="Year">
            <option>Year</option>
            <option>2005</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
        </select>
        <select name="Month">
            <option>Month</option>
            <option>January</option>
            <option>Febuary</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
        </select>
        <input type="submit" name="Submit" value="Search" />
      </form>
    </div>
            
                          <p>
                              <div class="link"><a href='#' class='links'>GO</a></div>
                              <div class='dbdescripHeader'>Description of update</div>
                              <div class='dbdescripItem'>text goes here text goes here</div>
                  <div class='dbHeader'>Number</div>
                <div class='dbItem'>one</div>
                <div class='dbHeader'>Date</div>
                <div class='dbItem'>10/01/01</div>
            </p>
            
</div>
</body>
</html>

th style code:
PHP Code:
body{
    background-color:#006699;
    font-family:Arial, Helvetica, sans-serif;
}

.main, header, subHeader{/*Positon values that make every thing go inside the main box */
    position:absolute;
    left:100px;
}
.main, subHeader dbItem{
    border: solid 1px #0099CC;

}
.main, header{
    top:125px;
    left:140px;
    width:451px;
    }

.main{
    height:300px;
}
.header{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
}
.subHeader{
    height:22px;
    width:200px;
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    float: left;
    font-size:10px;
    font-weight:700;
    padding: 2px;
}
.dbHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 50px;
}
.dbItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
}
.dbdescripHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 364px;
    float:right;
}
.dbdescripItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
    width: 390px;
    float:right;
    height:48px;
}
.link{
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:2px;
    color:#0099CC;
    text-decoration:none;
    float:right;
}
.links{
    background-color:#006699;
    border: 1px solid #0099CC;
    border-top:1px solid #0099CC;
    color:#0099CC;
    text-decoration:none;
    padding:0 2px;
    }
.link a:hover{
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:0 2px;
    text-decoration:none;
    color:#FFCC66;
    background-color:#006699;
}
br{
    margin-top:-15px;
}
p{
    height:1px;
}

Thanks
PFWD

Whats The Best Css Tutorial Out On The Internet?

Similar Tutorials

View Content

Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is...

Thank you.

Dvs That Expand To Wrap Whats Inside In Firefox, Ie, And Safari

Similar Tutorials

View Content

What is the method to have a div expand to wrap all the elemetns inside it ? somethings work in IE, some work in Firefox and some work in Safari. I then apply the size to each page separately, but now I have also found out that browsers interpret px differently it seems.

my page is www.mmimageart.com, you can go and see in the galleries how if you are using safari, the container div is not wrapping the elements inside. So any help would be appreciatted. Thanks.

What Am I Doing Wrong

Similar Tutorials

View Content

Hi be gentle with me im new
I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have
.backgroundbox {
background-attachment: fixed;
background-image: url(backpat1.png);
background-repeat: no-repeat;
background-position:top;
height:600px;
width:900px;
position:relative;
background-position: top left;
top: 0px;
left:0px;}
and in the body i have
<div class="biggestcolumn" "backpat1" align="center">
if someone could please tell me what ive done wrong.

Ie6 Rendering Wrong

Similar Tutorials

View Content

On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around?

Thanks

Border Bug (or Am I Doing Something Wrong)?

Similar Tutorials

View Content

I have a DIV which is styled to have a bottom border. Nested inside of this DIV is another DIV, which defaults to display:none, but I'd like to use JavaScript to turn it to display:block.
When this happens, it works fine, but the bottom border for the parent DIV does not encapsulate the nested DIV as I would I assume it should.
Am I totally missing something here, or is this just standard behavior?

Here's the code. There is no other styling.
Code:

<style type="text/css">
	.multiCheck {
		padding:5px;
		margin:10px 0;
		border-top:dotted 2px #CCCCCC;
		border-bottom:dotted 2px #CCCCCC;
	}
		.multiCheck .title {
			padding:5px;
			font-size:1.2em;
			color:#003366;
			font-weight:bold;
		}
		.multiCheck .checkBox {
			margin-left:10px;
		}
</style>
</head>

<body>

	<div class="multiCheck"><div class="title"><input type="checkbox" name="mp_arg2_toggle" onClick="document.getElementById('newsLocations').style.display='block';" value="location"/> Location News:</div>
		<div class="checkBox" id="newsLocations" style="display:none;">

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="27" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="25" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="19" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="99" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="20" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="2" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="1" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="3" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="4" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="26" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="21" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="5" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="6" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="22" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="7" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="8" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="9" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="10" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="17" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="11" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>
		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="24" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="12" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="23" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="13" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="14" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="15" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="16" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="18" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		</div>
		</div></div>

Thanks in advance,
Colin

Please Look At My Website. What Is Wrong With It.

Similar Tutorials

View Content

My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time.

goto www.eldore.com

Thanks

The Link Bit Is Wrong In Ie?

Similar Tutorials

View Content

if you take a look at this site:

www.plumstead-mosque.co.uk

you will see that the link section (IE) if you hover over it the color doesnt fill the whole section wheras in FF it does.. i was wondering if you could tell me how to fix it?

css: (relevant)
Code:

#menu a {display:block; border-bottom:solid black 1px; font-weight:bold; text-align:left; padding:0em; margin:0em;} 

#menu ul, #menu li{ margin:0em; padding:0em; }

#menu {list-style-type:none; width:100%; float:left; padding:0em; margin:0em; margin-bottom:1.5em;border:1px solid black;}
#menu ul {list-style-type:none;}
#menu li { position:relative;}

Could Someone Explain What I'm Doing Wrong Here Please?

Similar Tutorials

View Content

Hi i'm using the html below, for some reason in Dreamweaver the two images in the two lower cells appear on the left, and the text on the top button is up the top of the table cell.

Is my code creating a conflict somewhere that would cause this? When I open it in Firefox or IE it looks fine, its just looking weird in design mode.

HTML Code:
Original - HTML Code <table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table>

  
<table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table>

with these style sheets:

Code:

#menubuttonsmall a  { 	display:block; 	font: bold 14px/1 sans-serif; 	color:#000000; 	background: url("..//gfx//common/button_menu_sub.jpg") 0 0 no-repeat; 	text-decoration: none; 	height: 21px; 	padding-top: 10px; 	border-top: 1px; 	border-top-style: solid; 	width: 144px; 	margin: 0; 	text-align: center; }

Code:

#menubuttonselected { 	background: url("..//gfx//common/button_menu.jpg") 0 0 no-repeat; 	background-position: -480px 0; 	color: #FFFFFF; 	font: bold 14px/1 sans-serif; 	text-decoration: none; 	text-align: center; 	padding-top: 0px; 	height: 40px; }

Cheers,

Mark

Am I Linking My Css Wrong?

Similar Tutorials

View Content

Hello all,

I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page.

HTML:
<html>

<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<title> The Shore Report </title>
</head>

<body>

<img src="TheShoreReport.jpg" >

<img src="Web Background.jpg" >

</body>

</html>

CSS:
body
{
background-color:#b0c4de;
}

Is there something wrong with my link or what?

Wrong Headers!

Similar Tutorials

View Content

This may not belong here. But it's about a CSS file, so I'll explain:

I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue.

Here are my headers:

Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https:/host/page
Cookie: ...........

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
X-Powered-By: PHP/5.1.6
Content-Length: 2613
Connection: close
Content-Type: text/html; charset=UTF-8

It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles.

Other css files work. For example (main.css):
Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https://host/page
Cookie: .....

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT
Etag: "136d7c-cba-e36a82c0"
Accept-Ranges: bytes
Content-Length: 3258
Connection: close
Content-Type: text/css

My server is Apache 2.2.3.
I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect.

Any suggestions?

Css Issues ( I Know I'm Wrong Just Not Sure Why)

Similar Tutorials

View Content

O.K. Here is my style sheet code ...

Code:

<style type="text/css">

channel-container
{
background-color:#66FF66;
width:500px;
margin:auto;
clear:both;
}
.channel
{
background-color:#CCFF00;
width:465px;
margin:auto;
}
.channel#
{
background-color:#99CC99;
width:35px;
margin:auto;
}
</style>

and here is some of the html ....

Code:

<div class=channel-container>
<div style=channel>A&E</div>
<div style=channel#>118</div>
</div>
<div class=channel-container>
<div style=channel>ABC Family</div>
<div style=channel#>180</div>
</div>
<div class=channel-container>
<div style=channel>America Live</div>
<div style=channel#>219</div>
</div>
<div class=channel-container>
<div style=channel>Angel One</div>
<div style=channel#>262</div>
</div>
<div class=channel-container>
<div style=channel>Angel Two</div>
<div style=channel#>266</div>
</div>
<div class=channel-container>
<div style=channel>Cartoon Network (East)</div>
<div style=channel#>176</div>
</div>
<div class=channel-container>
<div style=channel>Cartoon Network (West)</div>
<div style=channel#>177</div>
</div>

Now believe me I know this is not aesthetically appealing ... However I am just trying to get a base layout where I have a container I can change the background color on, or alter as I wish in the future. Then I want the channel name to show up, with the channel number in a separate cell .. All easily changable at will through the CSS rule modifications.

Can anyone tell me what it is I am doing wrong here ? I am getting no formatting at all with the code I am using.

Css Borders - What Am I Doing Wrong

Similar Tutorials

View Content

Hi I am trying to setup a left border on my tabs here, no matter what combination I try I cannot get a left border exactly like the others without giving the wholebox a full border (dont want this!!) Look at the example below..

Code:

/* TESTING TABBED BROWSERS*/
}
.tabbed-box {
	width: 100%;
	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
	/*border: 1px solid #ddd; 
	border-bottom:none;
	border-left:none;
	border-right:none;}
	*/}
	
.tabbed-box .tabs li {
	list-style: none;
	float: left; }
.tabbed-box .tabs li a {
	display: block;
	width: 100px;
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #888;
	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
	border-left: 1px solid #ddd; }
	.tabbed-box .tabs li a:hover {
	color: #333; }
.tabbed-box .tabs li a:focus {
	outline: none; }
.tabbed-box .tabs li a.active {
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ddd;
	margin-left: 5px;  }
	
	.tabbed-content {
	padding: 3em 1em 1em 1em;
	display: none; }

Screen Shot Here (not aloud to post URLS) --- >freeimagehosting.net/uploads/4e9d9acdf7.jpg

Any help much appreciated!!

What's Wrong With My Footer?

Similar Tutorials

View Content

I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating.

My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at:

http://www.theatrebayarea.org/v2/
and the css is he
http://www.theatrebayarea.org/v2/css/default.css

It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns?

Thanks,
Daniel

Is It The Browser Or Am I Wrong?

Similar Tutorials

View Content

Hello,

I'm confused about how exactly to name classes in a specific situation.
I'm getting unexpected results, and I'm not sure if it's browser support or my code.

Does

.classy a {
something: something;
}

describe all anchors nested in an element with the class "classy"?
Can I do that even?
Or is it the same as

.classy, a {
something: something;
}

To describe two things that both have the same styles.

Do I need comma's or is

.classy .classless {
something: something;
}

the same thing as

.classy, .classless {
something: something;
}

Thanks

2 Box Layout Gone Wrong

Similar Tutorials

View Content

I am trying to acheve a 2 coulumn layout, but I keep getting problems wilt the side-box. I am designing this layout for a system where users can insert content, so I am not sure how much content will be added to the two boxes.

I am trying to show what I want to acheve in a picture-file:

http://www.student.uib.no/~st11920/...out_problem.gif

No matter how I do it I cannot get the surrounding DIV to expand horisontally according to the fixed content DIV's height.

It will gladly expand to the liquid sized one, but the other one wich I have positioned absolute will not affect the surrounding DIV. My guess is that this is the expected result. The HTML is he http://www.student.uib.no/~st11920/...divproblem.html

But my question is how can I do what I want with CSS?