Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

css conflicting with named anchor tags

Newbie
  
Join Date: Sep 2009
Posts: 3
#1: Sep 18 '09
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/a...qs/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!

Expand|Select|Wrap|Line Numbers
  1.  
  2. @charset "utf-8";
  3.  
  4. /*
  5. Tags suffix Legend
  6. Frm = Form   Lb = Label   In = Input text   Sel = Select   Btn = Button   Pg = P   Dv = Div   Spa = Span   A = Lnk
  7. */
  8.  
  9. /* Normalize */
  10. 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;}
  11. table{border-collapse:collapse;border-spacing:0;}
  12. fieldset,img{border:0;}
  13. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
  14. li{list-style:none;}
  15. caption,th{text-align:left;}
  16. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  17. q:before,q:after{content:'';}
  18. abbr,acronym{border:0;font-variant:normal;}
  19. sup,sub{vertical-align:text-top;}
  20. sub{vertical-align:text-bottom;}
  21. input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
  22.  
  23. /* Margins */
  24. html, body{
  25. padding:0;margin:0;border:0;
  26. width:100%;height:100%;
  27. }
  28.  
  29. /* 
  30. Cross-browser Typographical Normalization 
  31. 25px 150%
  32. 24px 150%
  33. 23px 144%
  34. 22px 138%
  35. 21px 131%
  36. 20px 125%
  37. 19px 119%
  38. 18px 113%
  39. 17px 106%
  40. 16px 100%
  41. 15px 94%
  42. 14px 88%
  43. 13px 81%
  44. 12px 75%
  45. 11px 69%
  46. 10px 63%
  47. 9px  56%
  48. 8px  50%
  49. */
  50.  
  51. /* Default Font, Color and Background */
  52. body{ 
  53. font-family:Arial, Helvetica, sans-serif;
  54. font-size:medium; /* 16px */
  55. color:#000000; /* Black */
  56. background:#79ad3e url(../images/ash-bgd.gif) repeat-x top; /* Deep Sky Blue  */
  57. margin-bottom:18px; /* always show scrollbar to avoid page jumping */
  58. }
  59.  
  60. /* Hide dotted outlines in Firefox */
  61. *:focus{outline:none;border:none;}
  62. strong {font-weight:bold;}
  63.  
  64. /* clean paddings */
  65. .clear {clear:both;}
  66.  
  67. /* =Container
  68. -----------------------------------------------------------------------------*/
  69. div#container{
  70. position:absolute;
  71. margin:0;
  72. width:780px; /* Web Default: 980px; */
  73. left:50%;                 
  74. margin-left:-390px;
  75. min-height:1px; /*IE7 hasLayout "disappearing content" bugfix*/
  76. text-align:left;
  77. }
  78.  
  79. /* =Header
  80. -----------------------------------------------------------------------------*/
  81. div#header{
  82. position:relative;        
  83. width:780px;
  84. height:72px;     
  85. }
  86.  
  87. #header .LeftHd {
  88.     float:left;
  89.     width:195px;
  90.     height:72px;
  91. }
  92.  
  93. #header .RightHd {
  94.     float:left;
  95.     width:585px;
  96.     height:50px; /* 52px */
  97.     border-bottom:1px solid #d7e7c3;
  98.     background-color:#79ad3e;
  99.     text-align: center;
  100.     padding-top: 22px;
  101. }
  102.  
  103. #header  .LogoDv{
  104.     float:left;
  105.     width:81px;
  106.     padding-top:10px;
  107.     height:62px;
  108.     background-color:#79ad38;
  109.     border-bottom:1px solid #d7e7c3;
  110. }
  111.  
  112. #header  .Logo  img{
  113.     display:block;
  114.     float:right;
  115.     margin-right:20px;
  116. }
  117.  
  118. * html #header .AZServiceDv img{
  119. margin-right:10px;
  120. }
  121.  
  122. #header .SearchFrm{
  123. padding-top:16px;
  124. padding-left:17px;
  125. }
  126.  
  127. #header .SearchPg{
  128. float:left;
  129. width:229px;
  130. }
  131.  
  132. #header  .SearchIn {
  133.     font-family: Verdana, Arial, Helvetica, sans-serif;
  134.     font-size: 63%;
  135.     font-weight: normal;
  136.     color: #797979;
  137.     float: left;
  138.     height: 13px;
  139.     width: 163px;
  140.     border: 1px solid #FFFFFF;
  141.     padding-left: 4px;
  142.     text-align: left;
  143. }
  144.  
  145. #header .SearchBtn{
  146. float:right;
  147. width:52px;
  148. height:19px;
  149. }
  150.  
  151. /* = Main Parts
  152. -----------------------------------------------------------------------------*/
  153. div#LeftSide{
  154. float:left;
  155. width:195px; 
  156. background:#f2f2f2; /* Grey */
  157. }
  158.  
  159. div#RightSide{
  160. float:left;
  161. background:#ffffff; /* White */
  162. width:584px;
  163. min-height:657px;
  164. }
  165.  
  166. /* = Footer
  167. -----------------------------------------------------------------------------*/
  168. div#Footer{
  169. float:left;
  170. width:780px;
  171. padding-top:12px;
  172. padding-bottom:50px;
  173. text-align:center;
  174. font-family:Verdana, Arial, Helvetica, sans-serif;
  175. font-size:56%; /* 9px */
  176. font-weight:bold;
  177. line-height:20px;
  178. color:#ffffff;
  179. }
  180.  
  181. #Footer a{
  182. color:#ffffff;
  183. font-size:100%;
  184. text-decoration:none;
  185. }
  186.  
  187. #Footer a:hover{
  188. text-decoration:underline;
  189. }
  190.  
  191. div#Main{
  192. float:left;
  193. width:780px;
  194. background:#ffffff;
  195. }
  196.  
  197. /* =Flux Columns */
  198. div#LeftSide {padding-bottom:32768px;margin-bottom:-32768px;}
  199. div#Main{overflow:hidden;}
  200.  
  201. /* =Home LeftSide - Menu, Signup Form, Arizona Health Logo
  202. -----------------------------------------------------------------------------*/
  203. #LeftSide .MenuDv{
  204.     float:left;
  205.     width:195px;
  206.     height:288px;
  207. }
  208.  
  209. #LeftSide .SignupDv{
  210. float:left;
  211. width:195px;
  212. height:188px;
  213. vertical-align:top;
  214. text-align:center;
  215. }
  216.  
  217. #LeftSide .PrivacyLnk{
  218. display:block;
  219. float:right;
  220. padding-top:5px;
  221. padding-right:19px;
  222. font-family:Verdana, Arial, Helvetica, sans-serif;
  223. font-size:63%; /* 10px */
  224. word-spacing:-1px;
  225. text-decoration:underline;
  226. color:#797979;
  227. }
  228.  
  229. #LeftSide  #SignupFrm{
  230. display:block;
  231. float:left;
  232. width:195px;
  233. }
  234.  
  235. #LeftSide .SignupPg{
  236. display:block;
  237. margin:0;
  238. padding:7px 5px 10px 0px;
  239. font-family:Verdana, Arial, Helvetica, sans-serif;
  240. font-size:63%; /* 10px */
  241. font-weight:bold;
  242. color:#484848;
  243. line-height:13px;
  244. }
  245.  
  246. #LeftSide .SignupIn{
  247. border:1px solid #7f7f7f;
  248. padding-left:4px;
  249. margin-bottom:5px;
  250. font-family:Verdana, Arial, Helvetica, sans-serif;
  251. font-size:63%; /* 10px */
  252. font-weight:normal;
  253. color:#4c4c4c;
  254. width:157px;
  255. height:13px;
  256. }
  257.  
  258. #LeftSide .SignupFrmPg{
  259. float:left;
  260. margin:0;
  261. width:180px;
  262. padding-left:12px;
  263. }
  264.  
  265. #LeftSide .SubmitPg{
  266. display:block;
  267. float:right;
  268. margin:0;
  269. padding-right:19px;
  270. }
  271.  
  272. #LeftSide .ExtraDv{
  273.     float:left;
  274.     width:195px;
  275.     background:#f2f2f2;
  276. }
  277.  
  278. #banner {
  279. float: left;
  280. width: 584px;
  281. }
  282.  
  283. /* =Form
  284. -----------------------------------------------------------------------------*/
  285. .FormStyle {
  286. width:100%;
  287. font-size:75%; /* 12px */
  288. color:#999999;
  289. text-align:left;
  290. border:#999999 1px solid
  291. }
  292.  
  293. /* = Menu
  294. -----------------------------------------------------------------------------*/
  295. .menulist{
  296.     float:left;
  297.     padding:0;
  298.     margin:0;
  299.     margin-top:0px !important; /* FF  IE7 and Others */
  300.     margin-top:2px; /* Only IE6 */
  301.     width:195px;
  302.     height:281px;
  303. }
  304.  
  305. .menulist li{
  306. float:left;
  307. padding:0;
  308. margin:0;
  309. margin-top:0px !important; /* FF  IE7 and Others */
  310. margin-top:-2px; /* Only IE6 */
  311. height:36px;
  312. }
  313.  
  314. .menulist ul li{ 
  315. float:none;
  316. padding-left:10px;
  317. list-style:none;
  318. height:36px;
  319. font-family: Verdana, Arial, Helvetica, sans-serif;
  320. font-size:75%; /* 12px */
  321. font-weight:normal;
  322. }
  323.  
  324. .menulist a, .menulist a:link, .menulist a:visited{
  325. font-family: Arial, Helvetica, sans-serif;
  326. font-size:100%;
  327. font-weight:normal;
  328. color:#fff;
  329. text-decoration:none;
  330. }
  331.  
  332. .menulist a:hover{
  333. font-family: Arial, Helvetica, sans-serif;
  334. font-size:100%;
  335. font-weight:normal;
  336. color:#fff;
  337. text-decoration:underline;
  338. }
  339.  
  340. .menulist ul li a{
  341. display:block;
  342. font-family: Arial, Helvetica, sans-serif;
  343. font-size:100%;
  344. font-weight:normal;
  345. color:#fff;
  346. text-decoration:none;
  347. padding-left:20px;
  348. height:36px;
  349. background:url(../images/menu/submenu-arrow.gif) no-repeat left top;
  350. }
  351.  
  352. .menulist ul li a:hover{
  353. color:#fff;
  354. text-decoration:underline;
  355. }
  356.  
  357. /* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
  358. .menulist ul{
  359.     display:none;
  360.     position:absolute;
  361.     top:0;
  362.     padding-top:10px;
  363.     padding-left:10px;
  364.     width:195px;
  365.     left:185px;
  366.     background-color:#79ad3e;
  367. }
  368.  
  369. /* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */
  370. .menulist li{
  371. position:relative;
  372. }
  373.  
  374. /* Links inside the menu */
  375.  
  376. /* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */
  377. * html .menulist li a{
  378. border-width:0;
  379. margin:1px;
  380. }
  381.  
  382. *:first-child+html .menulist li {
  383. float:left;
  384. width:100%;
  385. }
  386.  
  387. * html .menulist li {
  388. float:left;
  389. height:1%;
  390. }
  391.  
  392. * html .menulist a {
  393. height:1%;
  394. }
  395.  
  396. /* End Hacks */
  397.  
  398. /* Rules for IE 5.x */
  399.  
  400. @media tty {
  401.  i{content:"\";/*" "*/}} @import 'ie55.css'; /*";}
  402. }/* */
  403.  
  404.  
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,559
#2: Sep 18 '09

re: css conflicting with named anchor tags

I only took a quick look but I think this is a javascript issue.
Newbie
  
Join Date: Sep 2009
Posts: 3
#3: Sep 18 '09

re: css conflicting with named anchor tags

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.
Newbie
  
Join Date: Sep 2009
Posts: 2
#4: Sep 28 '09

re: css conflicting with named anchor tags

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
Newbie
  
Join Date: Sep 2009
Posts: 3
#5: Sep 28 '09

re: css conflicting with named anchor tags

Hi keyone. No, this issue is still unresolved. I'm hoping someone with the time and expertise will lend a helping hand.
Newbie
  
Join Date: Sep 2009
Posts: 2
#6: Sep 29 '09

re: css conflicting with named anchor tags

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/h...ors.html#agold
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,621
#7: Sep 29 '09

re: css conflicting with named anchor tags

Quote:

Originally Posted by keyone View Post

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.
Newbie
  
Join Date: Oct 2009
Posts: 2
#8: Oct 7 '09

re: css conflicting with named anchor tags

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!
Newbie
  
Join Date: Oct 2009
Posts: 2
#9: Oct 7 '09

re: css conflicting with named anchor tags

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

Tags
anchor, conflicts, css, tags

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved