Google Answers: CSS Layout Help

View Question

Q: CSS Layout Help ( No Answer, 7 Comments )

Question

Subject: CSS Layout Help
Category: Computers
Asked by: nick_name-ga
List Price: $10.00

Posted: 18 Mar 2004 13:43 PST
Expires: 17 Apr 2004 14:43 PDT
Question ID: 318089

I'm trying to convert a table layout site to CSS
(https://www.williamsmedical.com/new/default.asp).  Lots of trial and
error.  Seems to work fine with Internet Explorer, but if I open in
Opera or Netscape, the *cells* overlap each other.  How do I modify my
.css file so that the site opens correctly in Netscape, Opera, etc.

  <style type="text/css">
    body {
	  margin:0; 
	  padding:0; 
	  color:#000; 
	  background: ; 
	  font: 0.8em Verdana, arial, sans-serif;}
    #header {
	  top:0; 
	  left:0; 
	  height:0em; 
	  color:#009; 
	  background:#333366; 
	  border:0px solid #FF6633;}
    h1 {
	  font-size: 1.3em; 
	  padding:0.2em 0.3em;}
    h2 {
	  font-size: 1.3em; 
	  color: #8b0000;}
    #main {
	  margin-left:10em; 
	  padding:0 3em 1em; 
	  background: ; 
  	  height:30em;
	  border:0px solid #333366;}
    #nav-one {
	  position:absolute; 
	  top: 9em; 
	  left:0; 
	  width:15em; 
	  background: ; 
	  color: #333366; 
	  border:0px solid  #c0c0c0; 
	  text-align: left;}
    #nav-one p {
	  padding:0.5em;
	  text-align:top;}
    #footer {
	  width:100%; 
	  text-align:left; 
	  margin-top:20px; 
	  padding: 0.5em; 
	  color:#EEE; 
	  background:#333366;
      border:0px solid #FF6633;
	  
	  A:link{ text-decoration: none;}
      A:visited{ text-decoration: none;}
      A:hover{ color:#000000; background-color:#f1f1f1;
text-decoration: underline;}
    p.c {
	  text-align: center;}
    .buttonlink2 {
	  padding: 4px; 
	  border: outset 2px Menu; 
	  color: #333366; 
	  background: #FF6633; 
	  text-decoration: none;}
    #navcontainer {
      width: 100px; }
    #navcontainer ul {
      margin-left: 10;
      padding-left: 10;
      list-style-type: none;
      font-family: Verdana, Arial, Helvetica, sans-serif;}
    #navcontainer a{
      display: block;
      padding: 3px;
      width: 125px;
      background-color: #333366;
      border-bottom: 1px solid #eee;}
	#navcontainer a:link, #navlist a:visited {
      color: #EEE;
      text-decoration: none;}
    #navcontainer a:hover {
      background-color: #369;
      color: #FFF;}  
  </style>

Answer

There is no answer at this time.

Comments

Subject: Re: CSS Layout Help
From: websmith-ga on 18 Mar 2004 18:56 PST

Looks to me like your problem is not with your stylesheet, but rather
with your html code.  You are missing at least one </tr> tag in your
source.

I find that when my pages view correctly in IE, but badly in Netscape,
it's generally caused by forgetting a closing tag.

Good luck.

Subject: Re: CSS Layout Help
From: swafnil-ga on 23 Mar 2004 05:11 PST

Have you fixed it? Mozilla displays the page correctly, and normally
doesn't behave like IE but Netscape ...

Sascha

Subject: Re: CSS Layout Help
From: nick_name-ga on 23 Mar 2004 10:59 PST

I haven't gotten it to work...  Thanks for the comments, I did find
some unclosed </tr>'s, but I don't think that is the problem.  When I
open in Opera or Netscape, the body/header/footer seem overlap each
other.  Not all of the pages do it, seems to only happen if there is a
long body. ( https://www.williamsmedical.com/new/catalog.asp ) Still
open for sugestions...

Subject: Re: CSS Layout Help
From: shogix-ga on 24 Mar 2004 21:09 PST

My advices: try to indent your code. It will be easy to read to find
the problems. Dont put all the content of div#main in 1 line. Also,
you need to clean your code.

Exemple in https://www.williamsmedical.com/new/catalog.asp : 

1- Remove the xml prologue. This prologue toggles the quirk rendering
mode in Internet Explorer 6. Your page will not be rendered as
intended with your xHTML strict doctype. The doctype must be the first
line of the file or IE will use the quirk mode.

2- Declare a content type and charset like 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

3- Declare a language like
<meta http-equiv="content-language" content="en" />

4- In xHTML, single tag must be closed like
<br> -> <br />
<hr> -> <hr />
<input> -> <input type="blabla" />
<img> -> <img src="blabla" />

5- All your tag must be wrote in lowercase

6- Concerning the overlapping of your content, your div#main as a
style "height: 30em" and you have too much content to fit in.

7- Also in this page, just under <body> you have a tag <id="header">.
I suppose it must be <div id="header">

8- In you style you have:
#header {
	  top:0; 
	  left:0; 
	  height:0em; 
	  color:#009; 
	  background:#333366; 
	  border:0px solid #FF6633;}

the value for TOP and LEFT are useless without a POSITION: ABSOLUTE.
The value HEIGHT: 0em will be problematic too :-)

9- When you use the character "&" (URL in your menu), you must encode it as "&amp;"

10- <li> must be used inside an ordered list <ol> or an unordered list <ul>

After cleaning your code, try to validate your xHTML with the W3C validator:
http://validator.w3.org/

Subject: Re: CSS Layout Help
From: nick_name-ga on 25 Mar 2004 12:34 PST

shogix-ga,

Thank you for your input. If you work for google answers, I will
accept your comment as an answer. Definately more than $10 worth of
info...  I was hoping it was something simple, but I guess I have more
to learn. Thanks for pointing me in the right direction.  Regards,
nick_name

Subject: Re: CSS Layout Help
From: sleuth444-ga on 26 Mar 2004 08:27 PST

try and have the web site coding W3C validated:
w3c validators:
http://www.w3.org/QA/Tools/#validators
W3C site:
http://www.w3.org/

Subject: Re: CSS Layout Help
From: kendavis-ga on 17 Apr 2004 05:54 PDT

If you do not find any other answer, there is a nice CSS newsgroup
hosted by projectseven.com that would probably enjoy chewing on your
problem for a while. Go to
http://www.projectseven.com/support/index.htm and click on the link
labeled "The PVII CSS Newsgroup", or connect directly to their news
server, forums.projectseven.com.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy