PDA

View Full Version : dropdown menu not working with on page built with div columns



pmready
05-06-2014, 04:14 PM
I have used borrowed code to build drop down navigation menus that work. You can see how they are supposed to look at www.loudounfreedom.com. Hover over the TEAMS navigation button to see. However, when I used the code on the a page that is built using div columns, the effect isn't the same. The shadow is prominent. The text is smaller. The rows don't extend all the way to the right. I would have to give a login-password to show the page that has this poor effect. Or move a sample page outside a password-protected section. I have asked for help. I see people viewing posts but not replying.



.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: #092869
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid navy;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: ffffff;
color: #092869;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
color: #092869;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid navy;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #092869;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #E99A02;
color: #092869;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid navy;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E99A02;
}

.anylinkmenucols li{
padding-bottom: 3px;
color: #092869;
}

.anylinkmenucols .column{
float: left;
padding: 3px 3px;
margin-right: 5px;
background: #092869;

}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: #092869;
visibility: hidden;
}

pmready
05-06-2014, 04:15 PM
js for menu content:


var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu1.items=[
["3rd Grade (Fagan)", "teams/2014Fagan3.html"],
["4th Grade (Esser)", "teams/2014Esser.html"],
["4th Grade (Haines)", "teams/2014Haines.html"],
["4th Grade (Stimart)", "teams/2014Stimart.html"],
["5th Grade (Cohoon)", "teams/2014Cohoon.html"],
["5th Grade (Randall)", "teams/2014Randall.html"],
["5th Grade (T.Turner)", "teams/2014TTurner.html"],
["6th Grade (Fagan)", "teams/2014Fagan.html"],
["6th Grade (Webb)", "teams/2014Webb.html"],
["6th Grade (Williams)", "teams/2014Williams.html"],
["7th Grade (Berry)", "teams/2014Berry.html"],
["7th Grade (McFarlane)", "teams/2014McFarlane.html"],
["7th Grade (Tim)", "teams/2014TIm.html"],
["8th Grade (Hills)", "teams/2014Hills.html"],
["8th Grade (Turner)", "teams/2014Turner.html"],
["10th Grade (Clarke)", "teams/2014Clarke.html"],
["10th Grade (McFarlane)", "teams/2014McFarlaneHS.html"] //no comma following last entry!
]

var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
anylinkmenu2.items=[
["General FAQs", "faq.html"],
["Tryout FAQs", "faq2.html"],
["Parent Center", "parentcenter.html"] //no comma following last entry!
]


var anylinkmenu3={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
anylinkmenu3.items=[
["Coaching Resources", "coach/resources.html"],
["Coaches Roles", "coach_roles.html"],
["Coaching Application", "coaching_application.html"] //no comma following last entry!
]

var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''}
anylinkmenu4.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu4.items=[
["3rd Grade (Fagan)", "../teams/2014Fagan3.html"],
["4th Grade (Esser)", "../teams/2014Esser.html"],
["4th Grade (Haines)", "../teams/2014Haines.html"],
["4th Grade (Stimart)", "../teams/2014Stimart.html"],
["5th Grade (Cohoon)", "../teams/2014Cohoon.html"],
["5th Grade (Randall)", "../teams/2014Randall.html"],
["5th Grade (T.Turner)", "../teams/2014TTurner.html"],
["6th Grade (Fagan)", "../teams/2014Fagan.html"],
["6th Grade (Webb)", "../teams/2014Webb.html"],
["6th Grade (Williams)", "../teams/2014Williams.html"],
["7th Grade (Berry)", "../teams/2014Berry.html"],
["7th Grade (McFarlane)", "../teams/2014McFarlane.html"],
["7th Grade (Tim)", "../teams/2014TIm.html"],
["8th Grade (Hills)", "../teams/2014Hills.html"],
["8th Grade (Turner)", "../teams/2014Turner.html"],
["10th Grade (Clarke)", "../teams/2014Clarke.html"],
["10th Grade (McFarlane)", "../teams/2014McFarlaneHS.html"] //no comma following last entry!
]

var anylinkmenu5={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
anylinkmenu5.items=[
["General FAQs", "../faq.html"],
["Tryout FAQs", "../faq2.html"],
["Parent Center", "../parentcenter.html"] //no comma following last entry!
]

var anylinkmenu6={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
anylinkmenu6.items=[
["Coaching Resources", "resources.html"],
["Coaches Roles", "../coach_roles.html"],
["Coaching Application", "../coaching_application.html"] //no comma following last entry!
]

pmready
05-06-2014, 04:26 PM
code of page not working well


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loudoun Freedom: 2014 Teams - Berry</title>
<link rel="stylesheet" type="text/css" href="../files/freedom.css">
<link rel="stylesheet" type="text/css" href="../files/anylinkmenu.css" />
<script type="text/javascript" src="../files/menucontents.js"></script>
<script type="text/javascript" src="../files/anylinkmenu.js"></script>
<script type="text/javascript">
//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")</script>
<style type="text/css">
ul {
font-family: Calibri;
font-size: 13px;
line-height: 8px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: left;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
float: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #092869;
line-height: 8px;
border-top: 1px solid #ffffff;
padding: 6px 2px 6px 2px;
background: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
color: #120250;
background-color: #E99A02;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 13px;
}
li:hover a { background: #ffffff; }
li:hover li a:hover {
color: #120250;
background-color: #E99A02;
}

</style>
</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div id="page">

<div id="top">
<img src="../images/banner.jpg" width="1350" height="150" border="0">
</div>

<div id="headerslice">
<img src="../images/spacer.gif" width="1" height="5" border="0">
</div>

<div id="navbar">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#120250" >
<td width="110"><a href="../index.html"><img src="../images/home.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../about.html"><img src="../images/about.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../teams.html" class="menuanchorclass" rel="anylinkmenu4" data-image="../images/teams.gif" data-overimage="../images/teams_on.gif"><img src="../images/teams.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../coach.html" class="menuanchorclass" rel="anylinkmenu6" data-image="../images/coaches.gif" data-overimage="../images/coaches_on.gif"><img src="../images/coaches.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../events.html"><img src="../images/events.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../registration.html"><img src="../images/registration.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../faq.html" class="menuanchorclass" rel="anylinkmenu5" data-image="../images/faqs.gif" data-overimage="../images/faqs_on.gif"><img src="../images/faqs.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../spiritwear.html"><img src="../images/spiritwear.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../sponsors.html"><img src="../images/sponsors.gif" width="110" height="25" border="0"></a></td>
<td width="110" align="left"><a href="../links.html"><img src="../images/links.gif" width="110" height="25" border="0"></a></td>
</tr>
</table>
</div>

<div id="leftside">
<table width="98%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p><img src="../images/logo2_freedom.jpg" width="99" height="85" border="0" alt="Freedom Logo"></p>
<p><a href="history_berry.html" class="sidenav">Historical Record</a></p>
<ul id="menu">
<li><a href="#">Team Photos</a>
<ul>
<li><a href="photos9_berry.html">7th Grade - Challenge</a></li>
<li><a href="photos8_berry.html">7th Grade - MD Flames</a></li>
<li><a href="photos7_berry.html">7th Grade - Paul VI</a></li>
<li><a href="photos6_berry.html">7th Grade - JMU</a></li>
<li><a href="photos5_berry.html">MD Flames - Nov 2</a></li>
<li><a href="photos4_berry.html">7th Grade - FLG</a></li>
<li><a href="photos3_berry.html">MD Flames - Oct 12</a></li>
<li><a href="photos2_berry.html">MD Flames - Sept 28</a></li>
<li><a href="photos1_berry.html">MD Flames - Sept 14</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>

<div id="coach">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="18%">&nbsp;</td>
<td width="18%">&nbsp;</td>
<td width="16%">&nbsp;</td>
<td width="16%">&nbsp;</td>
<td width="16%">&nbsp;</td>
<td width="16%">&nbsp;</td>
</tr>
<tr class="title">
<td colspan="5">&nbsp;7th Grade - Berry<br>&nbsp;</td>
<td align="right">Spring 2014&nbsp;&nbsp;<br>&nbsp;</td>
</tr>
<tr class="section" bgcolor="#E99A02" valign="middle">
<td>&nbsp;Head Coach</td>
<td>&nbsp;Assistant Coach</td>
<td colspan="4"><br />&nbsp;</td>
</tr>
<tr class="body">
<td>&nbsp;Peter Berry<br />
&nbsp;<a href="mailto:berry@loudounfreedom.com" class="body">berry@loudounfreedom.com</a></td>
<td>&nbsp;John Fenton<br />
&nbsp;<a href="mailto:fenton@loudounfreedom.com" class="body">fenton@loudounfreedom.com</a></td>
<td colspan="4">&nbsp;</td>
</tr>
</table>
</div>


<div id="collage4">

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="images/berry_teamcollage.jpg" width="900" height="661" /></td>
</tr>
</table>
</div>

<div id="roster">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
<tr>
<td class="body" align="left" valign="top"><p class="section">Team Roster:</p>
<p class="body">Hope Alston<br />
Katana Alston<br />
Izzy Berry<br />
Lydia Ditthardt<br>
Micaela Elhafdi<br>
Emma Fenton<br />
Noelle Foster<br>
Jillian Hacker<br />
Shayna Lubitz<br />
Grace Lynch<br />
Karleigh Pollock<br />
Laryssa Wade<br /></p></td>
</tr>
</table>
</div>

<div id="rightimage4">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
<tr>
<td class="body" align="center" border="0">
<img src="../images/freedomlooks1_sm.jpg" width="248" height="165" border="0" />
</td>
</tr>
<tr>
<td align="center" valign="bottom"><img src="../images/basketball_animated.gif" width="60" height="100" border="0" />
</td>
</tr>
</table>
</div>

<div id="calendar4">
<table width="99%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left" ><p class="section">&nbsp;&nbsp;Team Calendar:</p>
<p align="center"><iframe src="https://www.google.com/calendar/embed?height=430&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=c79m79rnr039k92jf102051be8%40group.calendar.google.com&amp;color=%23182C57&amp;ctz=America%2FNew_York" style=" border-width:0 " width="650" height="430" frameborder="0" scrolling="no"></iframe></p>
</td>
</tr>
</table>
</div>

<div id="teamrecord4">
<table width="99%" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><p class="section">&nbsp;&nbsp;Team Season Record: 4-7</p>
<table width="99%" cellspacing="0" cellpadding="0" align="center" class="define2">
<tr align="left" class="section">
<th width="20%">Date</th>
<th width="60%">Opponent</th>
<th width="20%">Result</th>
</tr>
<tr class="body">
<td>3/22/14</td>
<td>Gainesville Elite Tigers (Soltys)</td>
<td>L</td>
</tr>
<tr class="body">
<td>3/22/14</td>
<td>Spotsy Sting (Via)</td>
<td>L</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="footer4">
<br><hr width="100%">For information, contact the Loudoun Freedom at <a href="mailto:loudounfreedombball@gmail.com">loudounfreedombball@gmail.com</a>
</div>

</div>
</body>
</html>

pmready
05-06-2014, 07:16 PM
other relevant css.... from freedom.css file



#page {
background:#FFFFFF;
margin-left:auto;
margin-right:auto;
width:1350px;
text-align: center;
border-left: 1px solid #e99a02;
border-right: 1px solid #e99a02;
border-bottom: 1px solid #e99a02;
border-color: #e99a02;
position: relative;
}

#top {
width:1350px;
height:150px;
background-color:#ffffff;
text-decoration:none;
position: absolute;
top: 0px;
}

#headerslice {
width:1350px;
height:5px;
background-color:#e99a02;
text-decoration:none;
position: absolute;
top:150px;
}

#navbar {
width:1350px;
height:25px;
background-color:#120250;
text-decoration:none;
position: absolute;
top: 154px;
}

#coach {
width:1205px;
background-color:#ffffff;
text-decoration:none;
position: absolute;
top: 185px;
left:150px;
text-align: left;
}

#collage4{
width:900px;
height:661px;
background:#FFFFFF;
border:3px;
border-color:#E99A02;
border-style:solid;
text-decoration:none;
font-family:Calibri;
position: absolute;
top: 355px;
left:150px;
}

#rightimage4{
width:270px;
height:325px;
background:#FFFFFF;
border:3px;
border-color:#E99A02;
border-style:solid;
text-decoration:none;
font-family:Calibri;
position: absolute;
top:690px;
left:1062px;
}

#calendar4{
width:665px;
height:490px;
background:#FFFFFF;
border:3px;
border-color:#E99A02;
border-style:solid;
text-decoration:none;
font-family:Calibri;
position: absolute;
top: 1031px;
left:150px;
vertical-align:middle;
}

#teamrecord4{
width:502px;
height:490px;
background:#FFFFFF;
border:3px;
border-color:#E99A02;
border-style:solid;
text-decoration:none;
font-family:Calibri;
position: absolute;
top: 1031px;
left:830px;
}

#footer4 {
width:88%;
background:#ffffff;
text-decoration:none;
position: absolute;
top: 1526px;
left:155px;
font-size: 12pt;
font-family: Calibri;
font-style: normal;
font-weight: 200;
color: #092869;
}

jscheuer1
05-07-2014, 03:40 AM
I would have to give a login-password to show the page that has this poor effect. Or move a sample page outside a password-protected section.

Yes, do one or the other of those please.

pmready
05-07-2014, 05:23 PM
I won't give the login/pwd publicly. sample page
http://www.loudounfreedom.com/2014Berry.html

contrasted with
http://www.loudounfreedom.com/

hover over the TEAMS navigation image.

jscheuer1
05-08-2014, 12:51 AM
Add the highlighted as shown to the loudounfreedom.com/files/anylinkmenu.css file:


.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: #092869
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
background-color: white;
border: 1px solid navy;
border-bottom-width: 0;
font: normal 12px Verdana;

pmready
05-08-2014, 02:01 AM
John, first, thank you. I added it. It removed the shadow of course. However, there are still issues: (1) the text is smaller and the nav items are smaller in the 2014Berry.html file and (2) the lines that separate each row do not extend to the far right of each nav item. The effect is still different.

jscheuer1
05-08-2014, 05:04 AM
Get rid of this:


<style type="text/css">
ul {
font-family: Calibri;
font-size: 13px;
line-height: 8px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: left;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
float: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #092869;
line-height: 8px;
border-top: 1px solid #ffffff;
padding: 6px 2px 6px 2px;
background: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
color: #120250;
background-color: #E99A02;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 13px;
}
li:hover a { background: #ffffff; }
li:hover li a:hover {
color: #120250;
background-color: #E99A02;
}

</style>

pmready
05-08-2014, 12:27 PM
that is used for dropdown for a different functionality, for a different purpose on the page. There is a team photo dropdown on the left side that shows items...different from the main nav. Is there a conflict between that and the other code? I know it may seem like piecemeal functionality for different things.

jscheuer1
05-08-2014, 03:43 PM
Yes there's a conflict. The code I'm asking you to remove is generic (applies to all ul tags and their children). If you make it more specific (via the use of a separate class name for example), you can keep it. Apply a class like so:


<style type="text/css">
ul.photosdrop {
font-family: Calibri;
font-size: 13px;
line-height: 8px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: left;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
float: none;
}
ul.photosdrop li {
display: block;
position: relative;
float: left;
}
ul.photosdrop li ul {
display: none;
}
ul.photosdrop li a {
display: block;
text-decoration: none;
color: #092869;
line-height: 8px;
border-top: 1px solid #ffffff;
padding: 6px 2px 6px 2px;
background: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul.photosdrop li a:hover {
color: #120250;
background-color: #E99A02;
}
ul.photosdrop li:hover ul {
display: block;
position: absolute;
}
ul.photosdrop li:hover li {
float: none;
font-size: 13px;
}
ul.photosdrop li:hover a { background: #ffffff; }
ul.photosdrop li:hover li a:hover {
color: #120250;
background-color: #E99A02;
}

</style>

Then where you want those styles to apply, give the parent (outer) ul(s) a class of "photosdrop":


<table width="98%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p><img src="images/logo2_freedom.jpg" width="99" height="85" border="0" alt="Freedom Logo"></p>
<p><a href="history_berry.html" class="sidenav">Historical Record</a></p>
<ul id="menu" class="photosdrop">
<li><a href="#">Team Photos</a>
<ul>
<li><a href="photos9_berry.html">7th Grade - Challenge</a></li>
<li><a href="photos8_berry.html">7th Grade - MD Flames</a></li>
<li><a href="photos7_berry.html">7th Grade - Paul VI</a></li>
<li><a href="photos6_berry.html">7th Grade - JMU</a></li>
<li><a href="photos5_berry.html">MD Flames - Nov 2</a></li>
<li><a href="photos4_berry.html">7th Grade - FLG</a></li>
<li><a href="photos3_berry.html">MD Flames - Oct 12</a></li>
<li><a href="photos2_berry.html">MD Flames - Sept 28</a></li>
<li><a href="photos1_berry.html">MD Flames - Sept 14</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>

pmready
05-08-2014, 05:54 PM
I used the js and css for the dropdowns because they were easier for use when the nav is an image. if you have a recommendation for a better way of basically doing the same dropdown when the top level nav item is an image but the menu is text....

pmready
05-08-2014, 05:55 PM
ok. I understand using the class as a specifier. . thank you

pmready
05-09-2014, 01:16 PM
I have one more question. I centered the content of pages and have a border. the css is:

#page {
background:#FFFFFF;
margin:0 auto 0 auto;
margin-left:auto;
margin-right:auto;
width:1350px;
text-align: center;
border:1px solid #e99a02;
border-left: 1px solid #e99a02;
border-right: 1px solid #e99a02;
border-bottom: 1px solid #e99a02;
border-color: #e99a02;
position: relative;
}

the html places the div after the body as a container
<body
<div id="page">

web page content

<div>
</body>

the issue is similar. the content is centered and has a border on most pages. but on the pages that are built using divs, the content is centered but the border does not show. I assume there is an over-riding issue again. You can see the http://www.loudounfreedom.com2014Berry.html page again as an example where the border does not show. http://www.loudounfreedom.com the border does show

pmready
05-09-2014, 03:50 PM
I have been trying to figure out the relationships between position: relative or absolute, overflow: auto... when I put in overflow, it creates a section on the webpage with content in a frame that scrolls. position:relative starts to show content but then the content divs are all over the place. The

jscheuer1
05-10-2014, 08:13 PM
I'm having trouble comparing the pages from your 2nd to last post. The first of the two will not load up. I can find a page that seems like it might be what you mean:

http://www.loudounfreedom.com/2014Berry.html

But it asked for a password/login. I choose cancel and then saw a page that just didn't look right, but I'm not sure if that's the one and whether or not canceling the login is in part responsible for how it looks. Even so there is a border, so I'm not sure which border(s) you might mean.

In any case, you're probably right, another css conflict. The only other possibilities I can think of are markup (error with tag syntax and/or different tags than you think are there), javascript (if it changes the markup, content or styles in some unexpected way), or content (too much or too little to fill out the markup as expected). Assuming it's a css conflict, one way to resolve it is to look at the element with a DOM inspector (in most browsers, right click on the element and choose 'inspect element' to open the browser's native DOM inspector, if any - most have them). This will show you (usually on the right of the inspector window) which styles are being followed by that element and where each one comes from - be it inline, or an internal or external stylesheet. Most will even show styles for the element that are being overridden by other styles via overstrikes or a lighter color for overridden rules.

As to your last post, overflow: auto for an element means that if there's not enough room inside the element for its content, there will be a horizontal and/or vertical scrollbar as needed to allow the overflowing content to be scrolled into view. Using position absolute will sometimes take that content out of the flow of the element. If it does, overflow auto will not produce scrollbars even for content that doesn't fit. If that happens it will either be seen outside the border (acting like overflow: visible) or not seen (acting like overflow: hidden). It can go either way. Relative positioning means little (acts like ordinary 'static', except sometimes overcomes rendering bugs and/or z-index stacking issues) unless top, left, bottom, and/or right coordinates are also specified. Once these are, the relative content moves from where it would be if static, to the offset(s) from there as specified. However, it still maintains layout space at its original location + any additional space that might be required for it to appear where it is offset to. Therefore margin/padding are often better ways to tweak the position of elements.