html/css help needed

Discussion in 'Software' started by mr_flea, Jan 29, 2005.

  1. mr_flea

    mr_flea First Sergeant

    I'm having problems with a page in firefox. I have 2 div's at the top marked as fixed location (when you scroll down they follow), and they work fine except I can't click the links on it. Any ideas why? You can look at the code in the textbox below or go to mrflea.homeip.net:8080/main.htm. If the server's laggy it's because I'm hosting it off my computer while some other stuff is using the line.

    Code:
     <html>
 <head>
 <title>title</title>
 <style>
 <!--
 body { font-family: tahoma, arial, sans-serif; }
 /* these div's wont render quite right in IE because it hates humanity and organisms with more than 1 cell */
 div#top1, div#top2 { color: #C0C0C0; left: 0px; width: 100%; overflow: hidden; display: block; position: absolute; }
 div#top1 { background: #292E33; letter-spacing: 5px; font-size: 20px; font-style: italic; padding-left: 50px; top: 0px; height: 25px; display: block; }
 div#top2 { background: #535A61; font-size: 12px; padding-left: 30px; padding-top: 4px; top: 25px; height: 20px; display: block; }
 body>div#top1, body>div#top2 { position: fixed; }
 div#top1 a:link, div#top2 a:link, div#top1 a:visited, div#top2 a:visited { color: #C0C0C0; text-decoration: none; }
 div#top1 a:hover, div#top2 a:hover, div#top1 a:active, div#top2 a:active { color: #DDDDDD; cursor: default; }
 div#main { position: absolute; top: 0px; left: 0px; width: 99%; padding-top: 50px; max-width: 100%; padding-left: 5px; }
 div#main a:hover, div#main a:active { text-decoration: none; }
 div#main a { color: #000000; }
 -->
 </style>
 </head>
 <body>
 <div id="top1">text</div>
 <div id="top2"><a href="index.php" accesskey="h"><u>H</u>ome</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome, Somebody.</div>
 <div id="main">
 <a href="somewhere.som">somewhere</a>
 </div>
 </body>
 </html>
    so far the problem only occurs in firefox, not IE. No clue why, but the css is written to trick IE into using position: absolute; because it isn't compatable with position: fixed;. It's currently impossible to interact with the text in the div's using firefox, you can't even select it.
     
    mr_flea, Jan 29, 2005
    #1
  2. Kodo

    Kodo SNATCHSQUATCH

    get rid of this in your #main
    position: absolute; top: 0px; left: 0px;
     
    Kodo, Jan 29, 2005
    #2
  3. mr_flea

    mr_flea First Sergeant

    that worked. Thanks, Kodo. :)
     
    mr_flea, Jan 29, 2005
    #3

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds