CSS - Issue With Sidebar Placement On Firefox Only.
I'm having a problem with a wordpress theme I'm creating for a site. I'm basically laying out the structure at this point before I start to really style it as I wanted to code everything from scratch (as sort of a hobby/learning experience) and I've wanted to implement things like custom taxonomies and custom post types. Anyway I've got most of the structure (except the navigation) up and working. My single problem right now is that the sidebar is pushed down to the bottom of the page on Firefox on both mac and windows. Every other browser displays it fine, even IE6 (although that one has my footer pushed up below the sidebar instead of at the bottom of the page, but I'll go back and worry about all the IE bugs later).
One thing I noticed while trying to diagnose this using the various browser developer tools available is that FireBug shows the sidebar as being in between some <section> tags (I'm using html5) and the other browsers show it being below the <section>, if you think of the section as the container div I think it'll give you a better idea of what I mean. This is the css, it seems to validate ok: Code: /* == Reset == */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } /* == BASICS == */ body { margin: 0 auto; width: 960px; } section { overflow: hidden; width: 600px; float: left; clear: none; } /* == POSTS == */ article[id*=post-] { padding: 10px 0; } article>header p, article>footer p { font-style: italic; } article+nav { font-weight: bold; } section>h1 { padding-top: 10px; } /* == SIDEBAR == */ aside { margin-top: 30px; overflow: hidden; width: 320px; float: right; clear: none; } aside li { list-style: none; } aside li ul li { list-style: disc outside; } /* search form -------------------------------------- */ .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } /* == FOOTER == */ body>footer { padding-top: 100px; text-align: center; overflow: hidden; width: 100%; clear: both; } You can check the page for yourself at http://www.jasonfoulke.com/md2/ I don't think posting the html here would really help because it basically includes a bunch of different pages, so the best way to see it is to view source on the page. Similar TutorialsHi, If you view the site below with IE, you'll probably notice that the main menu going across the top is somewhat off. By off, I mean it doesn't vertically align in the middle, but it does with Chrome. http://www.vitality-bodymindsoul.com/ Any idea what's causing this? Thanks much. Hello, this is my first time posting here. I am having a problem with a CSS sidebar. You can view the page at this URL: http://approg.msu.edu/david/ccsac/index2.htm. For the life of me, I cannot get the sidebar to automatically extend to the length of the page. Obviously, it's not much of an issue at the URL I listed, but it makes a bigger difference when there is a lot of content on the page. I'm sure the solution is simple, I just need to be pointed in the right direction. Thanks. hello everyone, I've been reading this forum for ages, but I thought i'd finally post. I have a problem with my site forexpm.com The ads are supposed to be on the right hand side, but some people say that in firefox they are in the middle, covering the text. I know it's something to do with css, but I can't work out what it is. Can anyone please help? Thanks muchly. Hey everyone, I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly. I don't have this problem when viewing the site in IE. I've coded the following XHTML and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ParaCentrumEeldeHoogeveen</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="Content-Language" content="nl" /> <link rel="stylesheet" href="css/layout.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> </div> </body> </html> And the css file: Code: html { padding: 0px; margin: 0px; } body { background: #3a60db url('../gfx/background.jpg') repeat-x; font-family: arial, "lucida console", sans-serif; font-size: 12px; color: #000000; text-align: center; margin: 0px; margin-top: 0px; padding: 0px; } #container { border: 0px solid #ff0000; width: 760px; margin: 0px auto; padding: 0px; text-align: left; } #header { background: url('../gfx/header.jpg') no-repeat; height: 238px; width: 760px; padding: 0px; margin: 0px; } Screenshot of the problem Does anybody know what the problem is? Thanks in advance. Grtz. Arjen WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hi, Ive got a site im currently working on using html and css. After just putting the navigation bar in ive discovered it lookins perfect in IE and slightly off in firefox: http://www.lnicholson.co.uk It looks hows i want it to in IE but in fiefox i notice that there is a bigger gap above the navigation bar and I have no idea how to get rid of it. Its quite annoying as some of my friends use firefox! Any help would be much appreciated, if you need anymore info let me know. Thanks Lozza Kay, So I've been trying to open a gaming league, but unfortunately my skills lie in PHP and C++. Not so much html and css. For some reason this site works pretty well in IE, but has what I call micro-tears in the firefox version, I'm really not sure whats wrong with it, can anyone help? http:// www . vl-league.com / index . html is the site. Would FF be able to interpret this background-image line? The bullets are not showing up on the page and all the references have been checked and verified the image exists and is in the proper directory. Code: li.indent{ background-image: url('getdoc?webc=images/bullet_sm.gif'); background-repeat: no-repeat; background-position: 0,0; margin-left: 10; padding-left: 10; margin-bottom: 5; } Thanks Again, IE displays fine but firefox the bottom getting_started div is all wierd. Code: <div id="container"> <div id="inner"> <?php include('header.php'); ?> <div id="index_login"> <p style="text-align: left"><b><font size="4">Login! </font></b></p> <p style="text-align: left"> </p> <form method="POST" action=""> <p style="text-align: left">Email: </p> <p style="text-align: left"><input type="text" name="email" size="20" id="index_textbox"></p> <p style="text-align: left"> </p> <p style="text-align: left">Password:</p> <p style="text-align: left"><input type="password" name="password" size="20" id="index_textbox"><br> </p> <p style="text-align: left"> <input type="submit" value="Login" name="do_login" id="index_button"></p> </form> </div> <div id="whos_new"> <div id="section_header"> Who's New </div> </div> <div id="get_started"> <div id="get_started_box"> <b>Step One:</b><br/><br/>Sign up with your basic info to get your own personal page.<br/><a href="#"><b>Sign Up!</b></a></div> <div id="get_started_box"> <b>Step Two:</b><br/><br/>Login and enter your information about yourself to allow people to find you and express yourself with the look of your profile.</div> <div id="get_started_box"> <b>Step Three:</b><br/><br/>Search for your friends and family and add them as your friend to your friend circle.</div> <div id="get_started_box_nb"> <b>Step Four:</b><br/><br/>Tell your friends about FriendTrend.com and invite them to join and be your friend.</div> </div> </div><font color="white">Copyright 2006 FriendTrend.com</font> </div> Here is my css: Code: * { margin: 0 auto; padding: 0; } body{ font-family: verdana; font-size: 8pt; } #container{ font-family: verdana; position:absolute; width: 100%; height: 100%; z-index: 1; text-align: center; background-color: gray; } #inner{ position:relative; width: 800px; height: 100%; border-style: solid; border-width: 1px; z-index: 2; background-color: white; } #header{ font-family: verdana; font-size: 8pt; position: relative; width: 100%; height: 30px; padding: 5px; background-color: orange; z-index: 3; } a:link,a:active,a:visited{ text-decoration:none; color:black; } a:hover{ font-weight:bold; } #header_link:link,#header_link:active,#header_link:visited{ text-decoration:none; color:white; } #header_link:hover{ color: #ccccff;; } #index_login{ font-family: verdana; font-size: 8pt; position: relative; width: 200px; height: 150px; top: 25px; left: -250px; border-style: solid; border-width: 1px; z-index: 3; background-color: #ccccff; padding: 10px; } #whos_new{ font-family: verdana; font-size: 8pt; position: relative; width: 300px; height: 150px; top: 25px; left: -25px; border-style: solid; border-width: 1px; z-index: 3; float:right; } #get_started{ font-family: verdana; font-size: 8pt; position: relative; width: 600px; height: 75px; top: 100px; border-style: solid; border-width: 1px; z-index: 3; } #get_started_box{ font-family: verdana; font-size: 8pt; position: relative; width: 149px; height: 100%; z-index: 3; float:left; border-right: 1px, solid; } #get_started_box_nb{ font-family: verdana; font-size: 8pt; position: relative; width: 149px; height: 100%; z-index: 3; float:left; } #section_header{ background-color: #ccccff; width: 100%; position:relative; font-family:verdana; font-size: 10pt; text-align:left; } #index_login{ font-family: verdana; font-size: 8pt; position: relative; width: 200px; height: 150px; top: 25px; left: 20px; border-style: solid; border-width: 1px; z-index: 3; background-color: #ccccff; padding: 10px; float:left; } #index_textbox{ border-width: 0; font-family:verdana; color:orange; } #index_button{ border-width: 0; font-family:verdana; color:black; background-color: orange; } #user_box{ font-family: verdana; font-size: 8pt; position: relative; width: 350px; height: 200px; top: 25px; left: -200px; border-style: solid; border-width: 1px; z-index: 3; } #user_photo{ font-family: verdana; font-size: 8pt; position: relative; width: 150px; height: 150px; border-style: solid; border-width: 1px; z-index: 3; left: 15px; top: 10px; float:left; } #user_friends{ font-family: verdana; font-size: 8pt; position: relative; width: 450px; height: 200px; border-style: solid; border-width: 1px; z-index: 3; right: 20px; top: 150px; float:right; } #view_basic{ font-family: verdana; font-size: 8pt; position: relative; width: 300px; height: 200px; top: 25px; border-style: solid; border-width: 1px; z-index: 3; float:left; left: 12px; } #view_contact{ font-family: verdana; font-size: 8pt; position: relative; width: 300px; height: 200px; top:75px; border-style: solid; border-width: 1px; z-index: 3; float:left; left: 12px; } #view_custom{ font-family: verdana; font-size: 8pt; position: relative; width: 300px; height: 200px; top: 25px; border-style: solid; border-width: 1px; z-index: 3; float:right; right: 12px; } #view_friends{ font-family: verdana; font-size: 8pt; position: relative; width: 450px; height: 200px; border-style: solid; border-width: 1px; z-index: 3; top: 150px; float:right; right: 12px; } Okay I have this strange CSS issue with Firefox. Sounds like a common problem, but oh it isn't. The issue goes a step further and it is a Firefox mac issue. The top nav works fine in Firefox PC, IE PC, and Safari Mac. But you load it in Firefox Mac and the top right list item drops down. No clue why. Anyone know what the issue is? Does Firefox on a mac render text at a different size and that pushes everything? I'm unable to send specific styles to firefox mac vs. firefox pc, unless I use a server-side script to detect the user agent. But that is not practical at all. If anyone has any feed back let me know. Oh the link to see this nav is: http://www.forsalebyowner.com Hi I'm developing a new site and have only just started with CSS. The site uses an external style sheet. I have only developed one page so far which looks fine in IE 6/7 but (some) content appears to 'drop/change position' slightly in Firefox (note the bottom navigation and contact info on the page footer in particular). I needed to add an extra div tag for the hyperlink style - could this be the cause? Also the search button and the form text area seems to change position when viewed in Firefox? Not sure what is going on! Any help would be appreciated! Link he http://www.yarmside.co.uk/version2/index.html Thanks. Hello, this is my first post on this forum! I've noticed there's another firefox thread right above mine, I don't mean to spam the forum with firefox issues but I checked that one first and it didn't have the same problem as I'm having. I'm a novice to CSS, I've only been on it for around 2-3 months for college, and i've encountered a problem I can't find a solution to likely because there could be so many ways for it being wrong. If anyone can please help me with this problem, i'd appreciate it so much! I'm just starting to create a template for college, and for some reason I've just noticed it's not working in firefox. I use i.e to develop at school so I haven't noticed it until now, and I can't seem to find a solution. I've uploaded the template here so it can be seen: bonkenmoose.com/john It works fine in internet explorer, but seems to be not working correctly in Firefox. Any help will be great! Thanks. Hello, here is the code i'm using for my lightbox. it works perfectly in Firefox but in IE it doesn't center and the background is solid black instead of a transparent black with 75% opacity. any ideas how to fix it? Code: <!-- Lightbox - Begin --> <div id="admsg" style="background:black;-moz-opacity:0.75;filter:alpha(opacity=75%);position:absolute;margin:0px;z-index:1000;left:0;top:0;display:none"></div> <div id="admsg2" style="width:600px;height:400px;position:absolute;z-index:1001;margin:0 auto;top:90px;left:0; right:0;margin-left:auto;margin-right:auto;border:solid 5px;background:white;text-align:center;display:none;padding:10px"> <!-- Message & Advertisement Here --> <center><img src="/images/roller.gif"></center><br><h3>Please wait while your file is being uploaded...</h3><i>Depending on your connection this may take up to a few minutes.</i><br/><br/><br> </div> <!-- Lightbox - End --> and when the submit button is pressed i call a JS function which does the following: Code: document.getElementsByTagName("body")[0].style.overflow="hidden"; document.getElementById("admsg").style.display="block"; document.getElementById("admsg").style.width = screen.width; document.getElementById("admsg").style.height = screen.height; document.getElementById("admsg").style.width = document.body.scrollWidth; document.getElementById("admsg").style.height = document.body.scrollHeight; document.getElementById("admsg2").style.display="block"; Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. Hey all, I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down. Here's the site: FizzPow.com/newsite I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help! Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness. I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left. I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS. As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here. The code is below. Please let me know what I'm doing wrong! Code: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> <body> <div id="container"> <div id="navbar"> <div class="navspacer"> <a href=""></a></div> <div class="nav1"> <a href="plans.html"></a></div> <div class="nav2"> <a href="phones.html"></a></div> <div class="nav3"> <a href="broadband.html"></a></div> <div class="nav4"> <a href="index.html"></a></div> <div class="nav5"> <a href="services.html"></a></div> <div class="nav6"> <a href="accessories.html"></a></div> <div class="nav7"> <a href="locations.html"></a></div> <div class="display"> <div class="presentation"> <div class="columnzone"> <div class="column1"> <div class="columncontent"> <?php $a = new Area('Sidebar'); $a->display($c); ?> </div> </div> <div class="column2"> <div class="columncontent"> <?php $a = new Area('Main'); $a->display($c); ?> </div> </div> <div class="column3"> <div class="columncontent"> <?php $a = new Area('Column3'); $a->display($c); ?> </div> </div> </div> </div> <div id="bottomnav"> <div class="bnav1"> <a href="contactus.html"></a></div> <div class="bnav2"> <a href="feedback.html"></a></div> <div class="bnav3"> <a href="employment.html"></a></div> </div> </div> </div> </div> </div> <div class="footer"> <?php $this->inc('elements/footer.php'); ?> </div> </body> And the CSS: Code: /* CSS Document */ body { font:12px Trebuchet MS, Tahoma, Arial; color:#000000; background:url(/images/bg.jpg) repeat; } #container { margin:0 auto; width:1050px; bottom:0; } /* NavBar */ #navbar { width: 928px; height: 90px; position:absolute; padding-left:50px; top:0; } #navbar li { list-style:none; display:inline; } .navspacer a { display:inline; float:left; width: 20px; height: 90px; background:url(/images/nav00.png) no-repeat; text-decoration: none; position:inherit; } .nav1 a { display:inline; float:left; width: 132px; height: 90px; background:url(/images/nav01.png) no-repeat; text-decoration: none; position:inherit; } .nav1 a:hover { background:url(/images/nav08.png) no-repeat; } .nav2 a { display:inline; float:left; width: 127px; height: 90px; background:url(/images/nav02.png) no-repeat; text-decoration: none; position:inherit; } .nav2 a:hover { background:url(/images/nav09.png) no-repeat; } .nav3 a { display:inline; float:left; width: 139px; height: 90px; background:url(/images/nav03.png) no-repeat; text-decoration: none; position:inherit; } .nav3 a:hover { background:url(/images/nav10.png) no-repeat; } .nav4 a { display:inline; float:left; width: 114px; height: 90px; background:url(/images/nav04.png) no-repeat; text-decoration: none; position:inherit; } .nav4 a:hover { background:url(/images/nav04.png) no-repeat; } .nav5 a { display:inline; float:left; width: 126px; height: 90px; background:url(/images/nav05.png) no-repeat; text-decoration: none; position:inherit; } .nav5 a:hover { background:url(/images/nav12.png) no-repeat; } .nav6 a { display:inline; float:left; width: 129px; height: 90px; background:url(/images/nav06.png) no-repeat; text-decoration: none; position:inherit; } .nav6 a:hover { background:url(/images/nav13.png) no-repeat; } .nav7 a { display:inline; float:left; width: 141px; height: 90px; background:url(/images/nav07.png) no-repeat; text-decoration: none; position:inherit; } .nav7 a:hover { background:url(/images/nav14.png) no-repeat; } /* NavBar End */ /* Central Display Area */ .display { display:block; height:475px; left: 74Px; position: static ; width:950px; background:url(/images/display.png) top no-repeat; } /* Central Display Area */ /* Presentation Area */ .presentation { display:block; height:466px; position: absolute; left:71px; width:908px; top:421px; background:url(/images/presentation01.png) top no-repeat; } .columnzone { margin-top:-35px; padding-top:52px; position:relative; z-index:0; } .columncontent { padding: 18px 0px 0px 0px; } .column1 { width:259px; float:left; padding: 0px 15px 10px 20px; } .column2 { width:303px; float:left; padding: 0px 10px 10px 9px; } .column3 { width:259px; float:left; padding: 0px 10px 10px 15px; } /* Presentation Area End */ /* Bottom Nav */ #bottomnav { display:block; width: 928px; height: 90px; position:absolute; margin-top:887px; margin-left:21px; } #bottomnav li { list-style:none; display:inline; } .bnav1 a { display:inline; float:left; width: 326px; height: 37px; background:url(/images/presentation02.png) no-repeat; text-decoration: none; position:inherit; } .bnav1 a:hover { background:url(/images/presentation05.png) no-repeat; } .bnav2 a { display:inline; float:left; width: 250px; height: 37px; background:url(/images/presentation03.png) no-repeat; text-decoration: none; position:inherit; } .bnav2 a:hover { background:url(/images/presentation06.png) no-repeat; } .bnav3 a { display:inline; float:left; width: 332px; height: 37px; background:url(/images/presentation04.png) no-repeat; text-decoration: none; position:inherit; } .bnav3 a:hover { background:url(/images/presentation07.png) no-repeat; } @-moz-document url-prefix() { #bottomnav { display: inline-block; position:absolute; width: 928px; height: 90px; margin-left:0px; padding:0 0 0 0; } /* Bottom Nav End */ .footer { background:url(/images/footer.png) no-repeat; height:60px; text-align:center; color:#fefaca; padding-top:18px; margin-top: -500px; margin-bottom:20px; position:relative; z-index:2; } Hi, I have an issue that has been tormenting me to the sharp rusty end of my chair. I set the indexTableHeader class to width:100%, and in IE6 it does what i want, it doesnt leave the edge of the screen, but in FF 2.0 it Always extends out by the width of the div element beside it, making it nearly useless. In IE7 it is even worse, it clears the left div, and goes to the bottom. The goal is to have what it looks like in ie 6. I know the css code is pretty long, but if someone could give it a couple looks and let me know what they think that would be awesome. I really appreciate it. Thanks-Dave Code: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> <style type="text/css"> html { padding:0; margin:0; border:0; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; } body { padding:0; margin:0; border:0; font-size:12px; background-color: #A2C4EA; } #head { margin:0; width:100%; height:60px; background-color: #A2C4EA; background-image: url(/holimages/hein75b.gif); background-position: left; background-repeat: no-repeat; } /* */ /* Nav menu, */ #submenu { text-align: center; background-color:#566d96; width:100%; } #submenu ul { display:block; list-style-type: disc; background-repeat: repeat-x; margin:0; } #submenu ul li { display: inline; padding-right: 20px; } #submenu ul li a { text-decoration: none; font-size:12px; color: #fff; } #submenu ul li a:hover { text-decoration: none; color: yellow; } #submenu h2 { color:white; font-size:12px; display:inline; margin-right:12px; } /*Guide bar */ #guide{ font-size:12px; background-color:#fff; width: 100%; text-align: left; margin:0; } #guide ul { list-style-type: disc; background-repeat: repeat-x; margin:0; } #guide ul li { display: inline; padding-right: 0px; } #guide ul li a { font-size:12px; text-decoration: none; color: blue; } #guide ul li a:hover { text-decoration: none; color: red; } #logo{ float:left; position:fixed; } #cit_nav{ right:0; float:right; } /* Scroll Div */ #ScrollDiv { height: 410px; overflow: auto; } /* this is the overall style of the content pane */ /* Content pane */ #content { font-size:14px; background-color:#A2C4EA; overflow:auto; } #content h2{ font-weight: lighter; font-variant: normal; font-size: 20px; background-color:#333366; color:#fff; margin:0; padding:3px; padding-left:20px; } #content h3{ font-weight: lighter; font-variant: normal; font-size: 14px; background-color:#333366; color:#fff; margin:0; } #content a{ text-decoration:none; } #content a:visited{ text-decoration:none; } /* Contact us Page */ #contact-us{ background-color:#DDDDFF; } /* this holds anyhting that is regarded as "call next" */ #content-container{ width:100%; } /* */ /* Index Page */ /* This is the table that holds the headings */ #headerWrapper{ } .indexTableHeader { background-color:#566d96; display: table; width:100%; } /* This is the cell that holds the Headers for the Index Page */ . /* This is the table that holds the content #566d96 #DDDDFF*/ .indexTable { width:100%; background-color:#566d96; display: table; font-size:14px } #sub-menu2 { font-size: 12px; float:left; width:170px; border-right:2px none #000; border-bottom:2px none #000; padding-left:10px; padding-bottom:20px; display:block; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; color: #FFFFFF; background-color:#566d96; border-top-style: solid; border-left-style: none; border-top-width: 1px; border-top-color: #FFFFFF; } #sub-menu2 h2 { font-weight: lighter; font-variant: normal; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-top-color: #99cc00; border-right-color: #99cc00; border-bottom-color: #99cc00; border-left-color: #99cc00; font-size: 20px; background-color:#566d96; } #sub-menu2 a:link { font-size: 12px; text-decoration: none; color: #CCCCCC; } #sub-menu2 a:visited { color: #CCCCCC; font-size: 12px; } #sub-menu2 a:hover { font-size: 12px; color: #FFFFFF; } .indented{ margin:0 0 0 -1.5em; } /*----LEGACY CSS */ pre { font-family: Arial, Helvetica, sans-serif; } </style> <title> rere</title> <style type="text/css"> .accessibility { display: none; } </style> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> </head> <body> <div id="wrapper"> <form id="holform" name="holform" action="HeinOnlineForm"> <div id="head"> <a href="#skipto" title="Skip repetitive navigation links" accesskey="2"><span class="accessibility">Skip repetitive navigation links</span></a> <div id="logo"> </div> <div id="cit_nav"> <table border="0" cellpadding="0" cellspacing="0" > <tr><td valign="top"> Select RERE <br/> <select name="collection" onchange="collectionselecter(this.options[this.selectedIndex].value);" style="font-size:9pt;width:225;font-weight:bold;color:#006633"> <option value="journals" > DDDDDD/option> </select> </td> <td valign="top"> </td> </tr> </table> </div> </div> <div id="container"> <div id="submenu"> <ul> <li> <a href="/front/x" class="nav" title="Home"> Home </a> </li> <li><a href="Search?collect" class="nav" title="Display search options for this collection"> Search </a></li> <li> <a href="SearchH" class="nav" title="Review Previous Searches"> Search History </a></li> <li> <a href="Help?collectio" class="nav" title="Display Help for this collection"> Help </a></li> <li><a href="ContactInfo" class="nav" title="Use e-mail to send comments to HeinOnline Technical Support"> Contact Us </a></li> <li> <a href="#" onclick="toggleDiv()" class="nav" title="Printer Friendly Version"> Printer Friendly </a> </li> </ul> </div> <a name="skipto"></a> <div id="content"> <div id="guide"> <ul> <li> <a href="">trtrtrtrtrt >> </a> </li> <li><a href="#">wewewewewe >> </a> </li> <li> <a href="#"> - wewewewewew >> </a> </li> </ul> </div> <div id="sub-menu2"> <h2>Navigation</h2> <ul class="sub-list"> <li class="sub-list-element">Quick Locator</a></li> <li class="sub-list-element">Simple Search</a></li> <li class="sub-list-element">Advanced Search</a></li> <li class="sub-list-element"> </ul> <div align="center"><img src="../../images/narablue.gif" width="120" height="122" > </div> </div> <div id="content-container"> <h2 >Titles </h2> <div id="headerWrapper"> <table class="indexTableHeader" > <tr > <td width="50%" align="center" border="0" > <h3>Number </h3> </td> <td width="50%" align="center" border="0" > <h3>Name </h3> </td> </tr> </table> </div> <div id="ScrollDiv"> <table width="100%" class="indexTable" cellspacing="1" cellpadding="2"> <tr > <td width="50%" align="center" style="height:0px;"> </td> <td width="50%" align="center" style="height:0px;"> </td> </tr> </table> </div> </div> </div> </div> </form> <div id="foot"> </div> </div> </body> </html> I seem to have an issue with the float parameter in Firefox. If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me.. http://www.arestaenterprise.com/enf/ Any help is appreciated Thanks! |