css conflicting with named anchor tags

[azjudd]

Thank you in advance for your help on this one.

I'm using named anchor tags on a FAQ page with questions listed at the top and answers below; a standard jump-to feature. However, anytime an anchor tag link is used, whether it be a question down to an answer or an answer back to the list of questions, I lose the banner div, a good portion of of my MenuDv disappears, and white space is added to the bottom of my page. You can see my FAQ page here:

http://www.quittersblog.com/090914/about/faqs/

If I unlink the template.css file from the page, the anchor tag functionality works fine without any change/loss of page content. You can see my FAQ page without the template.css applied here:

http://www.quittersblog.com/090914/about/faqs/index3.html

The template.css file was built-out by an agency and I can't figure out what is causing this issue. Should you wish to view the template.css file and don't use FF's Web Developer add-on, I've included the css below. Again, I would really appreciate some assistance because I'm stumped. Thanks!

@charset "utf-8";

/*
Tags suffix Legend
Frm = Form   Lb = Label   In = Input text   Sel = Select   Btn = Button   Pg = P   Dv = Div   Spa = Span   A = Lnk
*/

/* Normalize */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup,sub{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* Margins */
html, body{
padding:0;margin:0;border:0;
width:100%;height:100%;
}

/* 
Cross-browser Typographical Normalization 
25px 150%
24px 150%
23px 144%
22px 138%
21px 131%
20px 125%
19px 119%
18px 113%
17px 106%
16px 100%
15px 94%
14px 88%
13px 81%
12px 75%
11px 69%
10px 63%
9px  56%
8px  50%
*/

/* Default Font, Color and Background */
body{ 
font-family:Arial, Helvetica, sans-serif;
font-size:medium; /* 16px */
color:#000000; /* Black */
background:#79ad3e url(../images/ash-bgd.gif) repeat-x top; /* Deep Sky Blue  */
margin-bottom:18px; /* always show scrollbar to avoid page jumping */
}

/* Hide dotted outlines in Firefox */
*:focus{outline:none;border:none;}
strong {font-weight:bold;}

/* clean paddings */
.clear {clear:both;}

/* =Container
-----------------------------------------------------------------------------*/
div#container{
position:absolute;
margin:0;
width:780px; /* Web Default: 980px; */
left:50%; 				
margin-left:-390px;
min-height:1px; /*IE7 hasLayout "disappearing content" bugfix*/
text-align:left;
}

/* =Header
-----------------------------------------------------------------------------*/
div#header{
position:relative;		
width:780px;
height:72px; 	
}

#header .LeftHd {
	float:left;
	width:195px;
	height:72px;
}

#header .RightHd {
	float:left;
	width:585px;
	height:50px; /* 52px */
	border-bottom:1px solid #d7e7c3;
	background-color:#79ad3e;
	text-align: center;
	padding-top: 22px;
}

#header  .LogoDv{
	float:left;
	width:81px;
	padding-top:10px;
	height:62px;
	background-color:#79ad38;
	border-bottom:1px solid #d7e7c3;
}

#header  .Logo  img{
	display:block;
	float:right;
	margin-right:20px;
}

* html #header .AZServiceDv img{
margin-right:10px;
}

#header .SearchFrm{
padding-top:16px;
padding-left:17px;
}

#header .SearchPg{
float:left;
width:229px;
}

#header  .SearchIn {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 63%;
	font-weight: normal;
	color: #797979;
	float: left;
	height: 13px;
	width: 163px;
	border: 1px solid #FFFFFF;
	padding-left: 4px;
	text-align: left;
}

#header .SearchBtn{
float:right;
width:52px;
height:19px;
}

/* = Main Parts
-----------------------------------------------------------------------------*/
div#LeftSide{
float:left;
width:195px; 
background:#f2f2f2; /* Grey */
}

div#RightSide{
float:left;
background:#ffffff; /* White */
width:584px;
min-height:657px;
}

/* = Footer
-----------------------------------------------------------------------------*/
div#Footer{
float:left;
width:780px;
padding-top:12px;
padding-bottom:50px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:56%; /* 9px */
font-weight:bold;
line-height:20px;
color:#ffffff;
}

#Footer a{
color:#ffffff;
font-size:100%;
text-decoration:none;
}

#Footer a:hover{
text-decoration:underline;
}

div#Main{
float:left;
width:780px;
background:#ffffff;
}

/* =Flux Columns */
div#LeftSide {padding-bottom:32768px;margin-bottom:-32768px;}
div#Main{overflow:hidden;}

/* =Home LeftSide - Menu, Signup Form, Arizona Health Logo
-----------------------------------------------------------------------------*/
#LeftSide .MenuDv{
	float:left;
	width:195px;
	height:288px;
}

#LeftSide .SignupDv{
float:left;
width:195px;
height:188px;
vertical-align:top;
text-align:center;
}

#LeftSide .PrivacyLnk{
display:block;
float:right;
padding-top:5px;
padding-right:19px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:63%; /* 10px */
word-spacing:-1px;
text-decoration:underline;
color:#797979;
}

#LeftSide  #SignupFrm{
display:block;
float:left;
width:195px;
}

#LeftSide .SignupPg{
display:block;
margin:0;
padding:7px 5px 10px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:63%; /* 10px */
font-weight:bold;
color:#484848;
line-height:13px;
}

#LeftSide .SignupIn{
border:1px solid #7f7f7f;
padding-left:4px;
margin-bottom:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:63%; /* 10px */
font-weight:normal;
color:#4c4c4c;
width:157px;
height:13px;
}

#LeftSide .SignupFrmPg{
float:left;
margin:0;
width:180px;
padding-left:12px;
}

#LeftSide .SubmitPg{
display:block;
float:right;
margin:0;
padding-right:19px;
}

#LeftSide .ExtraDv{
	float:left;
	width:195px;
	background:#f2f2f2;
}

#banner {
float: left;
width: 584px;
}

/* =Form
-----------------------------------------------------------------------------*/
.FormStyle {
width:100%;
font-size:75%; /* 12px */
color:#999999;
text-align:left;
border:#999999 1px solid
}

/* = Menu
-----------------------------------------------------------------------------*/
.menulist{
	float:left;
	padding:0;
	margin:0;
	margin-top:0px !important; /* FF  IE7 and Others */
	margin-top:2px; /* Only IE6 */
	width:195px;
	height:281px;
}

.menulist li{
float:left;
padding:0;
margin:0;
margin-top:0px !important; /* FF  IE7 and Others */
margin-top:-2px; /* Only IE6 */
height:36px;
}

.menulist ul li{ 
float:none;
padding-left:10px;
list-style:none;
height:36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:75%; /* 12px */
font-weight:normal;
}

.menulist a, .menulist a:link, .menulist a:visited{
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:normal;
color:#fff;
text-decoration:none;
}

.menulist a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:normal;
color:#fff;
text-decoration:underline;
}

.menulist ul li a{
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:normal;
color:#fff;
text-decoration:none;
padding-left:20px;
height:36px;
background:url(../images/menu/submenu-arrow.gif) no-repeat left top;
}

.menulist ul li a:hover{
color:#fff;
text-decoration:underline;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul{
	display:none;
	position:absolute;
	top:0;
	padding-top:10px;
	padding-left:10px;
	width:195px;
	left:185px;
	background-color:#79ad3e;
}

/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */
.menulist li{
position:relative;
}

/* Links inside the menu */

/* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */
* html .menulist li a{
border-width:0;
margin:1px;
}

*:first-child+html .menulist li {
float:left;
width:100%;
}

* html .menulist li {
float:left;
height:1%;
}

* html .menulist a {
height:1%;
}

/* End Hacks */

/* Rules for IE 5.x */

@media tty {
 i{content:"\";/*" "*/}} @import 'ie55.css'; /*";}
}/* */

[drhowarddrfine]

I only took a quick look but I think this is a javascript issue.

[azjudd]

I appreciate your time. The issue definitely involves poorly written css in the template.css file; removing all .js refs doesn't fix the issue. I'm currently playing with adjustments with to the main box element divs (container, header, main, LeftSide, RightSide, and footer) in an attempt to fix the issue. I would appreciate continued input from the forum to help me out. Thank you.

[keyone]

figure it out?

Did you figure it out? I'm having the same problem and ran across this thread by googling "anchors conflicting with hidden div".

Thanks! carol

[azjudd]

Hi keyone. No, this issue is still unresolved. I'm hoping someone with the time and expertise will lend a helping hand.

[keyone]

I figured out my problem, which was that the anchors on a page did not work (they did not bump the user down to that spot on the page, as expected).

The problem was that I had anchors named gold, silver, platinum. I also had div's with ids of gold, silver, platinum. Those div's were hidden, and only became visible when the user clicked some text to view more info. Anyway, when I renamed the anchors to agold, asilver and aplatinum, they worked! No more conflicts!

Hope that gives you a clue to solving your issue!

Compare, bad page, anchors not working:

http://www.knowingmore.com/testing/html/bad.html#gold

To, good page, anchors working:

http://www.knowingmore.com/testing/html/for_educators.html#agold

[Dormilich]

The problem was that I had anchors named gold, silver, platinum. I also had div's with ids of gold, silver, platinum.

as with the development of HTML, it is favoured to use anchor IDs instead of anchor names, so modern browsers copy the name to the ID. if the ID is defined later again, the href points to an ID that is not in an anchor, thus it can’t jump to it.

[ollybatz]

I am getting the same problem as you azjudd. I am using a directory structured URL which I thought was the problem. I'm sure if url was a file there wouldn't be an issue i.e. page.htm#anchor . I am also using jquery on the site but I wonder if there is a workaround by removing the # after the / using JS? I will have a go and report on my findings. I see yours is still not fix so I presume you are still investigating.

If anyone else could shed some light that would be awesome :)

I have a feeling its a CSS bug :( I have a headache already!

[ollybatz]

Problem fixed!

I had a CSS hack to make the left column have a background no matter how high the right column was.

I notice you have the same hack:

div#LeftSide {
margin-bottom:-32768px;
padding-bottom:32768px;

I suggest you remove this and find an alternative. I created a repeating background applied to the left column which did the trick.