Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS UL Overlapping Help

    I'm relatively new to CSS and HTML and I am having some problems with how my UL's seem to be appearing on my page and how the code appears in different browsers. For the UL's I just want them to stop overlapping each other to where they appear one after the other. My site also doesn't appear to be responding with the CSS across multiple browsers, on IE it seems to be appearing correctly minus the UL part but on Firefox it's not appearing the way I want it at all.Any and all help is appreciated.

    CSS:
    Code:
     body { background-image: url(/csca website/_images/background.gif); }
    
    p { 
      text-indent: 3em; 
    }
    
    #hnavigation li {
      display : inline;
    }
    
    #hnavigation ul, #vnavigation ul, #quicklinks ul {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-top: 4px;
    }
    
    
    #hnavigation a:link, #hnavigation a:visited, #vnavigation a:link, #vnavigation a:visited, #quicklinks a:link, 
    
    #quicklinks a:visited {
      margin-rigfht: 2px;
      padding: 3px 10px 2px 10px;
      color: #ffff00;
      background-color: #6699cc;
      text-decoration: none;
      border-top: 1px solid #003399;
      border-left: 1px solid #003399;
      border-bottom: 1px solid #003399;
      border-right: 1px solid #003399;
    
    }
    
    #hnavigation a:hover, #vnavigation a:hover, #quicklinks a:hover {
      border-top: 1px solid #ff0000;
      border-left: 1px solid #ff0000;
      border-bottom: 1px solid #ff0000;
      border-right: 1px solid #ff0000;
    
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    	<div id="hnavigation">
    		<ul>
    		  <li><h4 align=center><a href="/cscanew/index.html">Home</a></li><br>
    		  <li><a href="/cscanew/aboutcsca.html">About CSCA</a></li>
    		  <li><a href="/cscanew/calendar.html">Calendar</a></li>
    		  <li><a href="/cscanew/resources.html">Resources</a></li>
    		  <li><a href="/cscanew/contactus.html">Contact Us</a></li></h4>
    		</ul>	
    
    	<title>Cobb School Counselor Association</title>
    
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"  />
    
    	<link href="_css/mastercss.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    	<body background="_images/background1.gif">
    
    	<div id="header">
    		<h2 align=center>Welcome to Cobb School Counselor Association!</h2>
    	</div>
    
    
    	</div>
    
    
    	<div id="vnavigation">
    		<ul>
    		  <li><h4 align=left><a href="/cscanew/joincsca.html">Join CSCA</a></li><br>
    		  <li><a href="/cscanew/newsletter.html">Newsletter</a></li><br>
    		  <li><a href="/cscanew/cscastore.html">CSCA Store</a></li><br>
    		  <li><a href="/cscanew/sponsorship.html">Sponsorship</a></li>
    		</ul>
    	</div>
    
    	<vr>
    	
    	<div id="quicklinks">
    		<ul>
    		  <li><h4 align=right><a href="http://www.schoolcounselor.org">ASCA</a></li><br>
          		  <li><a href="http://www.counseling.org">ACA</a></li><br>
          		  <li><a href="http://www.gaschoolcounselors.com">GSCA</a></li><br>
          		  <li><a href="http://www.doe.k12.ga.us">GADOE</a></li><br>
          		  <li><a href="http://www.nbcc.org">NBCC</a></li><br>
          		  <li><a href="http://www.cobbk12.org/Departments/SS/SSGuidance/">CCSD</a></li>
    		</ul>
    	</div>
    
    	<div id="body content" align=center>
            <p>	
    		The Cobb Counselor Association (CSCA) was formed during the 1984-85 school year by over <br>sixty 
    
    counselors from the Cobb School System. During the first year, membership was expanded to include <br>counselors in  
    
    the Marietta City School System and counselors in private schools and colleges in Cobb County. Currently, the<br> 
    
    association includes over 130 professional school counselors, students, and affiliates.
    	</p>
    	</div>
      
    
    </body>
    
    
    </html>

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Rethor View Post
    I'm relatively new to CSS and HTML and I am having some problems with how my UL's seem to be appearing on my page and how the code appears in different browsers. For the UL's I just want them to stop overlapping each other to where they appear one after the other. My site also doesn't appear to be responding with the CSS across multiple browsers, on IE it seems to be appearing correctly minus the UL part but on Firefox it's not appearing the way I want it at all.Any and all help is appreciated.
    maybe is only a cut & pust problem, but check:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    	<div id="hnavigation">
    		<ul>
    		  <li><h4 align=center><a href="/cscanew/index.html">Home</a></li><br>
    		  <li><a href="/cscanew/aboutcsca.html">About CSCA</a></li>
    		  <li><a href="/cscanew/calendar.html">Calendar</a></li>
    		  <li><a href="/cscanew/resources.html">Resources</a></li>
    		  <li><a href="/cscanew/contactus.html">Contact Us</a></li></h4>
    		</ul>	
    
    	<title>Cobb School Counselor Association</title>
    
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"  />
    
    	<link href="_css/mastercss.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    	<body background="_images/background1.gif">
    
    	<div id="header">
    		<h2 align=center>Welcome to Cobb School Counselor Association!</h2>
    	</div>
    
    
    	</div>
    
    
    	<div id="vnavigation">
    		<ul>
    		  <li><h4 align=left><a href="/cscanew/joincsca.html">Join CSCA</a></li><br>
    		  <li><a href="/cscanew/newsletter.html">Newsletter</a></li><br>
    		  <li><a href="/cscanew/cscastore.html">CSCA Store</a></li><br>
    		  <li><a href="/cscanew/sponsorship.html">Sponsorship</a></li>
    		</ul>
    	</div>
    
    	<vr>
    	
    	<div id="quicklinks">
    		<ul>
    		  <li><h4 align=right><a href="http://www.schoolcounselor.org">ASCA</a></li><br>
          		  <li><a href="http://www.counseling.org">ACA</a></li><br>
          		  <li><a href="http://www.gaschoolcounselors.com">GSCA</a></li><br>
          		  <li><a href="http://www.doe.k12.ga.us">GADOE</a></li><br>
          		  <li><a href="http://www.nbcc.org">NBCC</a></li><br>
          		  <li><a href="http://www.cobbk12.org/Departments/SS/SSGuidance/">CCSD</a></li>
    		</ul>
    	</div>
    
    	<div id="body content" align=center>
            <p>	
    		The Cobb Counselor Association (CSCA) was formed during the 1984-85 school year by over <br>sixty 
    
    counselors from the Cobb School System. During the first year, membership was expanded to include <br>counselors in  
    
    the Marietta City School System and counselors in private schools and colleges in Cobb County. Currently, the<br> 
    
    association includes over 130 professional school counselors, students, and affiliates.
    	</p>
    	</div>
      
    
    </body>
    
    
    </html>
    validate your markap.

    you can remove default browser style using css reset:

    Code:
    * { margin: 0; padding: 0; }
    in front of your css file, you can put what you want to reset.

    best regards

  • Users who have thanked oesxyl for this post:

    Rethor (01-16-2008)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Add
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    to the top of your CSS and adjust margins for ul as necessary.

    Also do a little spell check on your code.

  • Users who have thanked Apostropartheid for this post:

    Rethor (01-16-2008)

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Yes, you have two body tags in there too, which will probably cause one or two issues. You should be validating your code all the way through web site creation, like (as Cyan said) a 'Spell Checker'
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • Users who have thanked ahallicks for this post:

    Rethor (01-16-2008)

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok so I've spell checked it and sent it through validators and the validators have come back with no errors. I'm still having the problem with the tabs overlapping each other and in Firefox it doesn't seem to be responding to the background image.

    CSS:
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    
    
    body { 
      background-image: url(/cscanew/_images/background.gif); 
    }
    
    p { 
      text-indent: 3em; 
    }
    
    #hnavigation li {
      display : inline;
      text-align:center;
    }
    
    #hnavigation ul, #vnavigation ul, #quicklinks ul {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-top: 4px;
    }
    
    
    #hnavigation a:link, #hnavigation a:visited, #vnavigation a:link, #vnavigation a:visited, #quicklinks a:link, 
    
    #quicklinks a:visited {
      margin-right: 2px;
      padding: 3px 10px 2px 10px;
      color: #ffff00;
      background-color: #6699cc;
      text-decoration: none;
      border-top: 1px solid #003399;
      border-left: 1px solid #003399;
      border-bottom: 1px solid #003399;
      border-right: 1px solid #003399;
    
    }
    
    #hnavigation a:hover, #vnavigation a:hover, #quicklinks a:hover {
      border-top: 1px solid #ff0000;
      border-left: 1px solid #ff0000;
      border-bottom: 1px solid #ff0000;
      border-right: 1px solid #ff0000;
    
    }
    HTML:
    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>Cobb School Counselor Association</title>
    
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"  />
    
    	<link href="_css/mastercss.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    	<div id="hnavigation" align="center">
    		<ul>
    		  <li><a href="/cscanew/index.html">Home</a></li>
    		  <li><a href="/cscanew/aboutcsca.html">About CSCA</a></li>
    		  <li><a href="/cscanew/calendar.html">Calendar</a></li>
    		  <li><a href="/cscanew/resources.html">Resources</a></li>
    		  <li><a href="/cscanew/contactus.html">Contact Us</a></li>
    		</ul>	
    	
    
    	<div id="header" align="center">
    		<h2>Welcome to Cobb School Counselor Association!</h2>
    	
    	</div>
    
    
    	</div>
    
    
    	<div id="vnavigation" align="left">
    		<ul>
    		  <li><a href="/cscanew/joincsca.html">Join CSCA</a></li>
    		  <li><a href="/cscanew/newsletter.html">Newsletter</a></li>
    		  <li><a href="/cscanew/cscastore.html">CSCA Store</a></li>
    		  <li><a href="/cscanew/sponsorship.html">Sponsorship</a></li>
    		</ul>
    	</div>
    
    	
    	<div id="quicklinks" align="right">
    		<ul>
    		  <li><a href="http://www.schoolcounselor.org">ASCA</a></li>
          		  <li><a href="http://www.counseling.org">ACA</a></li>
          		  <li><a href="http://www.gaschoolcounselors.com">GSCA</a></li>
          		  <li><a href="http://www.doe.k12.ga.us">GADOE</a></li>
          		  <li><a href="http://www.nbcc.org">NBCC</a></li>
          		  <li><a href="http://www.cobbk12.org/Departments/SS/SSGuidance/">CCSD</a></li>
    		</ul>
    	</div>
    
    	<div id="bodycontent" align="center">
            <p>The Cobb Counselor Association (CSCA) was formed during the 1984-85 school year by over sixty counselors 
    
    from the Cobb School System. During the first year, membership was expanded to include counselors in  the Marietta 
    
    City School System and counselors in private schools and colleges in Cobb County. Currently, the association 
    
    includes over 130 professional school counselors, students, and affiliates.
    	</p>
    
    	</div>
      
    
    </body>
    
    
    </html>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Rethor View Post
    Ok so I've spell checked it and sent it through validators and the validators have come back with no errors. I'm still having the problem with the tabs overlapping each other and in Firefox it doesn't seem to be responding to the background image.
    First, remove the invalid align="center", align="left" and align="right" from your markup.
    Then, make your CSS look like this:
    Code:
    <style type="text/css">
    body { 
      background: url(/cscanew/_images/background.gif); 
    }
    * {
        margin: 0;
        padding: 0;
    }
    p { 
      text-indent: 3em; 
    }
    #hnavigation ul {
    	text-align: center;
    }
    #hnavigation li {
      display : inline;
      text-align:center;
    }
    /**************quicklinks styling******************/
    	#quicklinks ul {
    		width: 120px;
    		float: right;
    		list-style: none;
    	}
    	#quicklinks a:hover, #quicklinks a:active {
    		color: #CC0000;
    		background: #ccc;
    	}
    	#quicklinks a {
    		display: block;
    		padding: 5px 0;
    	}
    
    
    </style>
    I removed all the stuff that wasn't working, as well as some that was, and then I only got the one working so you'd have an example to fix the other two. When you goto fix the horizontal menu on top, the only difference between that and a vertical list is display:inline; or float:left;.

    Good luck and post back if you need more help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •