CSS UL Overlapping Help

Rethor

01-15-2008, 04:09 PM

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: 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: <!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>

oesxyl

01-15-2008, 04:21 PM

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:

<!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:

* { margin: 0; padding: 0; }

in front of your css file, you can put what you want to reset.

best regards

Apostropartheid

01-15-2008, 04:21 PM

Add * {
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.

ahallicks

01-15-2008, 04:35 PM

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'

Rethor

01-16-2008, 04:26 PM

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: * {
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: <!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>

Excavator

01-16-2008, 06:25 PM

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:<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.