472,993 Members | 2,055 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,993 software developers and data experts.

css conflicting with named anchor tags

3
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.  
Sep 18 '09 #1
8 5083
drhowarddrfine
7,435 Expert 4TB
I only took a quick look but I think this is a javascript issue.
Sep 18 '09 #2
azjudd
3
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.
Sep 18 '09 #3
keyone
2
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
Sep 28 '09 #4
azjudd
3
Hi keyone. No, this issue is still unresolved. I'm hoping someone with the time and expertise will lend a helping hand.
Sep 28 '09 #5
keyone
2
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
Sep 28 '09 #6
Dormilich
8,658 Expert Mod 8TB
@keyone
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.
Sep 29 '09 #7
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!
Oct 7 '09 #8
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.
Oct 7 '09 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: deko | last post by:
I use named anchors to take users to specific parts of a long page. But I want to add some processing and do some things with my nav bar when users go to certain sections delineated by named...
1
by: Jack Fox | last post by:
I am saving some formated html fragments (text, some formatting tags and anchor tags) in a SQL text column then writing it to a page. Something strange is happening with the anchor tags within the...
6
by: Nalaka | last post by:
Hi, Is there a gui control in VS2005 to set a "named anchor"? For an example now I go to the html and write the following code <a name="jumpToThisLocation"/>
1
by: newcreation | last post by:
I call this a weird problem because I can't find anything on it over the internet. Whenever I try to put in an anchor tag within a paragraph, the anchor forces a line break and appears on the next...
12
by: deko | last post by:
I have a long page with several sections and want to link to these sections from another page like this: <a href='http://www.mysite.com/content.html#section12'>Section 12</a> Here's what the...
6
by: Greg Collins [Microsoft MVP] | last post by:
In ASPX, how does one get the named anchor from a URL? Its not in any of the ServerVariables. If a url is: http://www.somerandomsite.com/page.aspx#named_anchor How do I get the value of the...
1
by: Alec MacLean | last post by:
Hi. I'm using VS2005 Pro to work on a website project for my company. The site has several navigation elements, all based on the standard VS2005 navigation components. I have high-level...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
3
SueHopson
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.