It's just not working (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> It's just not working (1/25/2007 14:42:22)

I'm attempting at what i thought would be a fairly simple layout and it's just not working. Would someone mind assisting?

html: 
<html>
<head>
<title>test</title>
<link rel=stylesheet href="style.css"type="text/css">
</head>
<body>

	<!-- START OF CONTAINER -->

<div id="container">

	<!-- START OF HEADER -->
<div id="header">
<h1>hospital receivables service</h1>
</div>
	
	<!-- END OF HEADER -->

	<!-- START OF LEFT NAVIGATION BAR -->
<div id="nav">
<ul>
	<li><a href="#nogo">link 1</a></li>
	<li><a href="#nogo">link 2</a></li>
	<li><a href="#nogo">link 3</a></li>
	<li><a href="#nogo">link 4</a></li>
	<li><a href="#nogo">link 5</a></li>
	<li><a href="#nogo">link 6</a></li>
</ul>
</div>

	<!-- END OF LEFT NAVIGATION BAR -->

	<!-- START OF MAIN IMAGE -->
	
<div id="mainimg"></div>

	<!-- END OF MAIN IMAGE -->

	<!-- START OF MAIN CONTENT -->

<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ut mi nec lacus auctor laoreet. Sed sed lorem ac magna pharetra viverra. Duis urna. Pellentesque aliquet lobortis lectus. Nullam eu justo. Quisque volutpat diam et eros. Vestibulum risus urna, sodales a, rutrum at, ornare suscipit, nisl. Phasellus semper purus nec nisl. Vestibulum sem ante, adipiscing suscipit, commodo euismod, lacinia quis, ante. Nullam leo. Sed non lacus eget mauris tempor sagittis. Aenean non pede dictum purus volutpat tristique. Pellentesque et elit nec nisl pharetra viverra. In ante massa, luctus ut, dapibus in, rutrum sit amet, sapien. Nullam molestie, quam aliquet auctor gravida, mi libero ornare odio, quis pharetra sem erat nec arcu.</p>

<p>Morbi dui sem, sollicitudin non, auctor et, lobortis et, augue. Curabitur quam odio, viverra vitae, suscipit bibendum, pretium volutpat, diam. Praesent augue. Integer a sapien. Vivamus ullamcorper tellus sit amet magna. Mauris ac leo eu elit ultricies aliquam. Pellentesque elit. Nam ut ipsum quis pede hendrerit egestas. Ut varius, sem ut viverra tempus, justo nisi dictum turpis, sed tincidunt nunc diam nonummy eros. Cras sagittis. Pellentesque lobortis, mauris et gravida tempus, nisl nisl elementum augue, sit amet convallis sapien nisi ut lacus.</p>

<p>Morbi rhoncus. Aenean vitae lectus. Nullam leo elit, porta id, pharetra sit amet, tincidunt ut, mauris. Praesent ornare. Donec sit amet eros id nibh imperdiet pretium. Nunc scelerisque congue sem. Suspendisse adipiscing erat id nibh. Aenean euismod gravida magna. Nullam imperdiet augue eu pede posuere blandit. Integer consectetuer nunc in massa. Mauris non metus. In vehicula, nisl nec tristique iaculis, tortor velit imperdiet magna, at varius nulla felis quis tellus. Etiam condimentum, arcu id sodales rutrum, quam nulla scelerisque turpis, sed pulvinar justo nulla sed tortor. Integer commodo. Nulla facilisi.</p>

<p>Proin enim. Maecenas turpis quam, vulputate eget, varius eu, tempus sed, est. Ut vitae lectus. Maecenas eros. Proin faucibus, erat ut tempor tempus, elit odio nonummy nisi, id bibendum risus ante non magna. Donec blandit ipsum eu nibh. Ut rhoncus dolor quis risus. Praesent sollicitudin cursus turpis. In vulputate lacus eu est. Vivamus sed orci. Integer lacinia placerat eros. Sed tortor. Nullam convallis. Suspendisse vel metus non purus gravida elementum. Donec convallis est quis nisl.</p>

<p>Curabitur ullamcorper, tortor nec scelerisque feugiat, tortor ipsum aliquet ante, nec ultrices felis tellus at mauris. Quisque id ante. Fusce feugiat, nunc eu tincidunt mattis, magna libero lacinia nisl, id vehicula magna justo ac velit. Duis aliquam. Pellentesque sapien nibh, luctus nec, fermentum sit amet, pretium a, mi. Donec sed odio. Proin odio lectus, facilisis sit amet, mattis sit amet, egestas a, pede. Suspendisse et libero in quam laoreet porta. Nulla arcu nulla, condimentum in, tincidunt quis, ultricies id, nibh. Nulla lorem libero, gravida ut, congue a, rutrum at, dui. Cras at dolor quis augue luctus ultrices. Sed lectus. Nullam mi sapien, rhoncus nec, dapibus a, interdum eu, libero. Donec mi tortor, pellentesque id, scelerisque at, molestie sed, dui. Pellentesque at dolor in felis auctor aliquet.</p>

</div>

	<!-- END OF MAIN CONTENT -->

</div>

	<!-- END OF CONTAINER -->

</body>
</html>


and css: 
body {
	margin: 0 0 0 30px;
	color: #000;
	font-size: 11px;
	font-family: Tahoma, Arial, sans-serif;
	line-height: 14px;
}

#container {
	width: 715px;
	/* height: 200px; */
}

#header {
	height: 60px;
	text-align: right;
	margin: 20px 40px 0 0;
	background-color: blue;
	
}


#mainimg {
	position: absolute;
	top: 60px;
	left: 305px;
	align: right;
	width: 400px;
	height: 150px;
	background-image:url('images/headergraphic.jpg');

#nav {
	position: absolute;
	top: 60px;
	left: 30px;
	width: 285px;
	margin: 50 0;
	background-color: #c0c0c0;
}

#mainimg {
	float: left;
}

#content {
	
	position: absolute;
	top: 210px;
	right: 0px;
	width: 500px;
	background-color: #3C3C3C;
}

h1 {
	font-size: 14px;
	text-transform: uppercase;
}


See the attachment for the attempted structure. I don't know if i've just run into a bug or i'm just looking at it wrong, but i'm getting frustrated. I really appreciate any pointers.

thanks,
LBG

[image]local://upfiles/5386/F5349E1694684B08B12554E8B11A5BC1.jpg[/image]

(EDIT by rdouglass - just 'compacting' the page)



mtfm -> RE: It's just not working (1/25/2007 15:38:56)

Well, for one thing you're missing a } around the end of the "#mainimg" declaration.
I tried it with that and that didn't fix it, but you definitely need that for it to work right.

Alo a doctype certainly wouldn't hurt.

Lastly, I would expect you'd need a clear:left in there somewhere.

I'll have to play with it a bit to get it right...I 'know' css but not enough to troubleshoot it well. I dont have the time immediately to do it but if no one else figures it out in the next day or so I'll revisit this when I get a chance.



jurgen -> RE: It's just not working (1/25/2007 16:38:22)

here is one way to get you started:

HTML: 
<html>
<head>
<title>test</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>

<!-- START OF CONTAINER -->

<div id="container">

<!-- START OF HEADER -->
<div id="header">
<h1>hospital receivables service</h1>
</div>

<!-- END OF HEADER -->



<div id="content">


<!-- START OF LEFT NAVIGATION BAR -->
<div id="nav">
<ul>
<li><a href="#nogo">link 1</a></li>
<li><a href="#nogo">link 2</a></li>
<li><a href="#nogo">link 3</a></li>
<li><a href="#nogo">link 4</a></li>
<li><a href="#nogo">link 5</a></li>
<li><a href="#nogo">link 6</a></li>
</ul>
</div>

<!-- END OF LEFT NAVIGATION BAR -->

<!-- START OF MAIN IMAGE -->

<div id="mainimg"></div>

<!-- END OF MAIN IMAGE -->

<!-- START OF MAIN CONTENT -->

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ut mi nec lacus auctor laoreet. Sed sed lorem ac magna pharetra viverra. Duis urna. Pellentesque aliquet lobortis lectus. Nullam eu justo. Quisque volutpat diam et eros. Vestibulum risus urna, sodales a, rutrum at, ornare suscipit, nisl. Phasellus semper purus nec nisl. Vestibulum sem ante, adipiscing suscipit, commodo euismod, lacinia quis, ante. Nullam leo. Sed non lacus eget mauris tempor sagittis. Aenean non pede dictum purus volutpat tristique. Pellentesque et elit nec nisl pharetra viverra. In ante massa, luctus ut, dapibus in, rutrum sit amet, sapien. Nullam molestie, quam aliquet auctor gravida, mi libero ornare odio, quis pharetra sem erat nec arcu.</p>

<p>Morbi dui sem, sollicitudin non, auctor et, lobortis et, augue. Curabitur quam odio, viverra vitae, suscipit bibendum, pretium volutpat, diam. Praesent augue. Integer a sapien. Vivamus ullamcorper tellus sit amet magna. Mauris ac leo eu elit ultricies aliquam. Pellentesque elit. Nam ut ipsum quis pede hendrerit egestas. Ut varius, sem ut viverra tempus, justo nisi dictum turpis, sed tincidunt nunc diam nonummy eros. Cras sagittis. Pellentesque lobortis, mauris et gravida tempus, nisl nisl elementum augue, sit amet convallis sapien nisi ut lacus.</p>

<p>Morbi rhoncus. Aenean vitae lectus. Nullam leo elit, porta id, pharetra sit amet, tincidunt ut, mauris. Praesent ornare. Donec sit amet eros id nibh imperdiet pretium. Nunc scelerisque congue sem. Suspendisse adipiscing erat id nibh. Aenean euismod gravida magna. Nullam imperdiet augue eu pede posuere blandit. Integer consectetuer nunc in massa. Mauris non metus. In vehicula, nisl nec tristique iaculis, tortor velit imperdiet magna, at varius nulla felis quis tellus. Etiam condimentum, arcu id sodales rutrum, quam nulla scelerisque turpis, sed pulvinar justo nulla sed tortor. Integer commodo. Nulla facilisi.</p>

<p>Proin enim. Maecenas turpis quam, vulputate eget, varius eu, tempus sed, est. Ut vitae lectus. Maecenas eros. Proin faucibus, erat ut tempor tempus, elit odio nonummy nisi, id bibendum risus ante non magna. Donec blandit ipsum eu nibh. Ut rhoncus dolor quis risus. Praesent sollicitudin cursus turpis. In vulputate lacus eu est. Vivamus sed orci. Integer lacinia placerat eros. Sed tortor. Nullam convallis. Suspendisse vel metus non purus gravida elementum. Donec convallis est quis nisl.</p>

<p>Curabitur ullamcorper, tortor nec scelerisque feugiat, tortor ipsum aliquet ante, nec ultrices felis tellus at mauris. Quisque id ante. Fusce feugiat, nunc eu tincidunt mattis, magna libero lacinia nisl, id vehicula magna justo ac velit. Duis aliquam. Pellentesque sapien nibh, luctus nec, fermentum sit amet, pretium a, mi. Donec sed odio. Proin odio lectus, facilisis sit amet, mattis sit amet, egestas a, pede. Suspendisse et libero in quam laoreet porta. Nulla arcu nulla, condimentum in, tincidunt quis, ultricies id, nibh. Nulla lorem libero, gravida ut, congue a, rutrum at, dui. Cras at dolor quis augue luctus ultrices. Sed lectus. Nullam mi sapien, rhoncus nec, dapibus a, interdum eu, libero. Donec mi tortor, pellentesque id, scelerisque at, molestie sed, dui. Pellentesque at dolor in felis auctor aliquet.</p>
</div>

<!-- END OF MAIN CONTENT -->

</div>

<!-- END OF CONTAINER -->

</body>
</html>


CSS: 
body {
color: #000;
font-size: 11px;
font-family: Tahoma, Arial, sans-serif;
line-height: 14px;
}

#container {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
/* height: 200px; */
}

#header {
	text-align: right;
	background-color: blue;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 10px;

}


#mainimg {
	align: right;
	height: 150px;
	background-image:url('images/headergraphic.jpg');
	border: 1px solid #FF0000;
	float: right;
	width: 578px;
}

#nav {
	width: 180px;
	background-color: #c0c0c0;
	height: 500px;
	float: left;
}

#content {
	background-color: #3C3C3C;
}

h1 {
font-size: 14px;
text-transform: uppercase;
}


Hope that helps a little bit...

(EDIT by rdouglass - just compacting the page)



lilblackgirl -> RE: It's just not working (1/25/2007 16:54:47)

I start out with a clear head. it doesn't work as i expected and get frustrated and desperate. and i end up with a bunch of bad code. i thank you jurgen. newbie, you are not. [sm=bowdown.gif]

i don't know how to ask this, but how do you get to that frame of mind to know what you are missing? i've checked sites with examples and the code tends to just cause more confusion.



jurgen -> RE: It's just not working (1/25/2007 17:14:26)

I might be a newbie in this forum, but not at other places..... [:-]

There are certain rules with the codes you ned to follow. And you just have to find out thoses rules.
The code I posted is not the best layout but it should get you started with something.



lilblackgirl -> RE: It's just not working (1/29/2007 14:51:50)

Alright, i did some more work and am running into a really strange problem. the left navigation in Firefox is doubling up the left border and when hovering over one link, all of them light up, not just the one hovering over. In IE6, the nav bar looks exactly as it should and functions correctly. Anyone know why it's doing this?

HTML:
quote:

<?xml version="1.0"?>
<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css" media="all">@import url("style.css");</style>
</head>
<body>

<!-- START OF CONTAINER -->

<div id="container">

<!-- START OF HEADER -->

<div id="header">
<img src="images/title.gif" alt="" />
</div>

<!-- END OF HEADER -->

<!-- START OF LEFT SECTION -->
<div id="leftside">

<!-- START OF 'HRS' LOGO -->

<div id="logo">
<img src="images/logo11.gif" alt="" />
</div><br />

<!-- END OF 'HRS' LOGO -->

<!-- START OF MAIN NAVIGATION -->

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="talk.html">Receivables Talk</a></li>
<li><a href="qa.html">Question and Answer</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fixit.html">Mr. Fixit</a></li>
<li><a href="employment.html">Employment</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<!-- END OF MAIN NAVIGATION -->

<br /><br />
CONTACT US<br />
<hr />
Address <br />
Hospital Receivables Service Inc.<br />
PO Box 814367,<br />
Dallas, TX 75381<br /><br />
Phone <br />
972-243-5431 <br /><br />
Fax <br />
972-243-5434<br /><br />
AFFILIATES<br />
<hr />
<img src="images/ohanew.jpg" alt="" /><br /><br />
<img src="images/tha.bmp" alt="" />
</div>

<!-- END OF LEFT LEFT SECTION -->

<!-- START OF MAIN IMAGE -->

<div id="mainimg">
<img src="images/pen_money.jpg" alt="" />
</div>

<!-- END OF MAIN IMAGE -->

<!-- START OF MAIN CONTENT -->
<div id="content">
<h1>Asking for Money</h1>
<p> We are regularly asked to put on programs for medical business offices that specifically address the issue of employees asking for money.</p>

<p>This is a popular subject now because providers have decided they are going to become more focused and aggressive in getting deposits, copays and other amounts due the provider. "Ask and you will receive . . . ."</p>
<p>In the past, patients might not be asked for the amounts due the provider while the patient was still at the facility. If the patient wanted to make a payment, the business office was equipped to take the cash, check or credit card payment, but there often was no emphasis on actually requesting money.</p>
There were three reasons for this:
<ol>
<li>The provider did not want to possibly upset the patient.</li>
<li>Business office employees did not feel comfortable asking for money.</li>
<li>It was difficult to determine what the patient actually owed prior to insurance paying its portion. </li>
</ol>
<p>As a result of this reluctance to attempt to collect the money due, patients thought that the provider did not need or want the funds owed. They rationalized that because hospitals received tax money, government money or donations, it wasn't necessary to pay, especially if the hospital didn't make the effort to ask.</p>

<p>Now, hospitals are having to change public perceptions and reeducate patients on the importance of making payment at the time of service. It's a long and difficult process, and employees on the front line often aren't adequately trained to do it. At one facility, an emergency room clerk was asked if she was supposed to obtain a deposit when the patient was interviewed? She replied that she was supposed to do that, but in the two years she'd worked there, she'd never asked for a deposit. When asked why, she said "no one ever told me how much to ask for."</p>
<p>Like it or not, the message that hospitals were giving to the public was that it didn't matter if the hospital was paid or not.</p>
To recap, what happens when your employees don't ask for deposits and other amounts due the hospital?
<ol>
<li>The patient thinks the service is free.</li>
<li>Word gets around the community that the hospital doesn't care if it is paid or not.</li>
<li>It becomes harder and harder to convince people to pay any amounts due the hospital. </li>
</ol>
On the other hand, what happens when employees do ask for money at the time of service?
<ol>
<li>The patient learns that the hospital expects to be paid.</li>
<li>The next time the patient comes, they will bring their checkbook or credit card with them.</li>
<li>Word gets around the community that the hospital does care if it is paid. </li>
</ol>
<p>It's an education process. First you have to educate your employees. Then education of the public can begin.</p>
<p>Often we see providers who draft a policy for paying at the time of service, but there is no follow-up; no substantive training of employees. Pretty soon the employee thinks it really doesn't matter if deposits are collected and, sure enough, nothing is collected.</p>
<p>If you're going to go to the trouble to institute a policy of collecting at the time of service, don't stop there. The real work is in helping employees gain the confidence and ability to do a difficult task.</p>

<p>We often spend three hours with a group of employees talking about asking for money. Very few employees feel comfortable with the process. They have to be cajoled, encouraged and seriously trained before they are ready to face the public.</p>
<p>There is an art to looking the patient in the eye, smiling and saying "the amount we show you owe the hospital after insurance pays is $475.00. Will you be paying by check or credit card?"</p>
<p>Of course, that's just the first step. What does the employee do when the patient refuses to pay or says they left their checks and credit cards at home? What if the patient says they can only pay $20.00? What if the patient pleads poverty?</p>
<p>Your front line of defense against a bad case of Cruddy Cash Flow is well-trained employees who smoothly ask for an d receive the funds due the hospital.</p>
<p>Call us for help training your employees to ask for money.</p>
</div>

<!-- END OF MAIN CONTENT -->

</div>

<!-- END OF CONTAINER -->

</body>
</html>


and the CSS:
quote:

body {
color: #ffffff;
font-size: 90%;
font-family: Arial, sans-serif;
line-height: 16px;
background-color: #42465a;
}

#container {
width: 820px;
float: left;
background-color: #42465a;
padding-left: 30px;
margin: auto;
}

#header {
text-align: right;
padding: 30px 10px 30px 0px;
color: #797d97;
background-color: #42465a;
}

#mainimg {
height: 200px;
float: right;
width: 500px;
padding-right: 40px;
}

#leftside {
width: 180px;
height: 100%;
float: left;
font-size: 90%;
background-color: #42465a;
}

#nav {
width: 180px;
height: 200px;
float: left;
}

#nav a, #nav :visited {
display:block;
width:170px;
padding:3px 0;
color: #ffffff;
text-decoration: none;
border-left: 8px solid #7a7f9a;
padding-left: 10px;
text-align: left;
font-weight: bold;
}

#nav :hover{
display:block;
width:170px;
padding:3px 0;
color: #000000;
text-decoration: none;
border-left: 8px solid #c0c0c0;
padding-left: 10px;
text-align: left;
font-weight: bold;
background-color: #7a7f9a;
}

#nav ul{
list-style-type:none;
padding:0;
margin:0;
}

#content {
padding: 10px 0px 30px 210px;
clear: right;
background-color: #42465a;
}

h1 {
font-size: 110%;
}

.strong {
font-size: 95%;
}

#logo {
padding-left: 25px;
}

hr {
width: 100%;
color: #797d97;
margin-left: 0;
margin-right:auto;
height: 2px;
}


It's interesting, because the original layout consisted of the #nav div being the entire left bar, but when i hovered over some of the side graphics or a search input, they displayed the hover option that was set only to the #nav div. This is why i created the #leftside div and entombed the navigation only in the #nav div.



Tailslide -> RE: It's just not working (1/30/2007 2:48:08)

Remove the xml declaration at the start of your code before the DOCTYPE - it will put IE into quirks mode and is generally a "bad idea".

It's not just Firefox that you're getting these issues in - it's happening in IE7 too. You need to ensure that you're padding is the same - you've got bits of padding declared all over the place and they are conflicting.

This is a bit better: 

body {
color: #ffffff;
font-size: 90%;
font-family: Arial, sans-serif;
line-height: 16px;
background-color: #42465a;
}

#container {
width: 820px;
float: left;
background-color: #42465a;
padding-left: 30px;
margin: auto;
}

#header {
text-align: right;
padding: 30px 10px 30px 0px;
color: #797d97;
background-color: #42465a;
}

#mainimg {
height: 200px;
float: right;
width: 500px;
padding-right: 40px;
}

#leftside {
width: 180px;
height: 100%;
float: left;
font-size: 90%;
background-color: #42465a;
}

#nav {
width: 180px;
height: 200px;
float: left;
}

#nav a, #nav a:visited {
display:block;
width:170px;
padding:3px 0;
color: #ffffff;
text-decoration: none;
border-left: 8px solid #7a7f9a;
text-align: left;
font-weight: bold;
}

#nav a:hover{
padding:3px 0;
color: #000000;
text-decoration: none;
border-left: 8px solid #c0c0c0;
text-align: left;
font-weight: bold;
background-color: #7a7f9a;
}

#nav ul{
list-style-type:none;
padding:0;
margin:0;
}

#content {
padding: 10px 0px 30px 210px;
clear: right;
background-color: #42465a;
}

h1 {
font-size: 110%;
}

.strong {
font-size: 95%;
}

#logo {
padding-left: 25px;
}

hr {
width: 100%;
color: #797d97;
margin-left: 0;
margin-right:auto;
height: 2px;
}





lilblackgirl -> RE: It's just not working (1/30/2007 9:37:34)

Thanks Tailslide. It's helpful to get a fresh perspective. Any reason why the XML declaration sends the code into a tizzy?



Tailslide -> RE: It's just not working (1/30/2007 10:19:06)

One of two reasons and I'm frankly not sure which takes precedence in this case.

1. Anything before the DOCTYPE sends IE into Quirks Mode
2. The xml declaration is only useful if you're actually serving the site as true XML - which you're not. Also IE doesn't actually understand XML anyway so even if you DID serve the site as true XML IE would throw a big hissy fit and refuse to show the page.

Having IE or any browser for that matter in Quirks mode is a bad idea because they become unpredictable in the way that they deal with elements. With all browsers in Standards Mode it becomes (slightly) easier to get it working properly cross-browser.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375