Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by mboehler3

  1. Here is what the menu looks like on the rollover:
  2. I have created a background image to use for rollovers on my navigation menu. Sites I've looked at online suggest to combine your normal-state image and rollover image onto one image file, and in the CSS, use a <background-position: 0 -30px> on the rollover, to move the image down. Here is the image I've created to use:So, the green bar with a grey border is the normal state, and when the user rollover the link, the white bar with a grey border will display.But on my page, I do not see the white bar with a grey border on the rollover. This is what I see:In my CSS, I thought perhaps th
  3. Actually you're suggestion in my other thread about removing the left-padding from the "top" delcaration caused the sub-menu to display properly, without adding the left padding. Thank you!
  4. Well I need to use the padding in order to get my text aligned with the other links... so when I went into my code and removed the padding declaration, this is what I see:So it's now completely ignoring my background image... but at least it has the padding! What can I change in my CSS to display the entire background image?
  5. In my navigation menu, there is unwanted left-padding given to my sub-menu, as seen here:All of the links have a background image, which creates a little bit of white space to look like padding, but my browsers are giving it an additional ~20pixels more padding. I have tried fooling around with the CSS but can't figure this out.Here is my CSS: #navmenu {margin-right:-30px;margin-left:-30px;background-color: #88ac2e;height: 30px;}.navmenu960 ul{margin: 0;padding: 0;list-style-type: none; font-size: 14px;font-family: Arial;z-index:4;}.navmenu960 ul li{position: relative;display: inline;float:
  6. Hi, I am working on the navigation for my website. I want to create a rounded-corners look to my drop down menu, so I have created a background-image used for the first and last tabs on the drop-down. Without adding a link to the first tab, it looks fine:But when I just add a <a href="#"> </a> around it, it looks like this:Here is my HTML Code, with the a href added: <div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a> <ul> <li class="top"><div style="padding
  7. Actually if anyone is looking at this thread, is there a way for IE to work with margins? It seems that when I add padding or a margin, and rollover it, IE makes the menu go away. Not in Firefox.
  8. I've added the display:block and a width, and I still see this in my IE browser:Here is the exact code from my CSS:.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px; display:block; width:251px;} In Firefox is looks like this:
  9. I created a new class:.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px} And gave this to the last li: <li class="bottom"></li> And it looks good in Firefox, but not IE. Am I doing this right?
  10. I am working on the navigation menu for my website, using <li> for the drop-down menu. In order to create a rounded-box effect, I am using an image as the last item. However for some reason in both IE and Firefox, a 5-10px margin is displaying between the last and second-to-last item, seen here:After looking through my code I cannot explain why this is happening. Will someone please offer some advice? #navmenu {background-color: #88ac2e;height: 30px;}.navmenu960 ul{margin: 0;padding: 0;list-style-type: none; font-size: 14px;font-family: Arial;z-index:4;}.navmenu960 ul li{position: r
  11. I found a solution to this dilemma, using an image as the top <li> to "create" space between the top bar and sub menu.
  12. Thank you for the advice, it led me to a solution! However I now have a new question...
  13. I am creating a new navigation menu for my website, and I want to give about a 10 pixel margin between the top navigation list items and my drop-down submenu list. I'm able to do that simply by giving a top margin to my "ul li ul." The problem is when you rollover from the top item to the sub-menu. In Firefox, the submenu stays visible when you mouse-over that 10 pixel margin. But in IE, once you mouse over the margin, the sub-menu disappears.Since it works in Firefox, I am hoping there is an easy way to make this work in IE. Does anyone have any experience with something like this, and/o
  14. I made the topnav_bckground a span instead of a div, like so:<span class="topnav_bckground"> <div id="content-outer"><div class="container_12"> <div class="grid_12"><!-- #include virtual = "/surechoice/new_960_header.asp" --></span> And this is what I see:
  15. I'm using the 960 Grid System to create my website, but I want to extend the header and footer 100% wide, outside of the 960 system. I'm able to do so with the footer, but the header (which contains a nav menu, using JS) is creating a problem. The problem is that the content in the header must stay within the 960 Grid. So all I need is to create a background that is about 30 pixels tall and 100% wide, and then have my header/navigation menu fall on top of it.After playing around with my code, here is the result I see:So as you can see, the background color is there, but the navmenu breaks b
  16. But I added this to the CSS: .headerSubpagesCenter img {vertical-align:middle;} And the image aligns now! Thank you for your help.
  17. Thanks for the suggestion, but I added vertical-align:middle to .headerSubpagesCenter and there was no change on the page.
  18. I am trying to align an image with text in my header... here is my page:I want the Customer Login to move down about 5-10 pixels so that is lines up with the text. I've tried adding padding and margins but it breaks onto two lines. What is the best way to go about doing this?Here is my CSS: .headerSubpages {margin: 0 auto; width:960px; height:104px; margin-bottom: 20px;}.headerLeftSubpages {width: 300px;float: left; }.headerSubpagesCenter {padding-top:40px; text-align:right;} And the HTML: <div class="headerSubpages"> <div class="headerLeftSubpages"><a href="http://<%= R
  19. .content-outer has nothing declared, it was included in the 960 demo..container_12,.container_16{margin-left:auto;margin-right:auto;width:960px;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_4{width:300px;}
  20. I am trying to create a footer that extends 100% horizontally and am having trouble styling the background color. I am extending the footer 100% wide, but am using 960 style to create three columns of links. Here's a screenshot of what this looks like in IE:But in Firefox, the lighter green is not showing up, and looks like this:Here is my CSS: .footerTopGreenBar {background-color:#556c1a; width:100%; height:30px;}.footerTopYellowBar {background-color:#d4e2b1; width:100%; height:2px;}.footerBody {background-color:#88ac2e; width:100%; font-family: Arial; color:White;}.footerTitle {font-famil
  21. Hi, my problem is that multiple pages on my site have links that include target="_blank" to open new windows, but when clicked they do not open in a new window.Here is a page:http://www.surepayroll.com/product/401k/. The PDF link "Sure401k Plan Summary" is supposed to open in a new window.I have been adding/removing code on the page to find the culprit, and now I found the file but do not know what to do next. The file was included in my footer, and this is the code from that file: <%'== Start Functions ======================================================function IsProServer dim sLyris
  22. Thank you for your input. So what changes do I have to make on my end?
  23. I am referencing this site here: http://www.barelyfitz.com/projects/tabber/ to try and set up a tab content script.The site makes it seem easy. In step 1 I enter this code into my page: <div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div></div> And get this nice looking result:But when you get to step 3, he throws in the <ul> to dictate the tabs. However, when I implement his code: <div class="tabberlive"> <ul
  24. is this the correct section for this post? should it be in JavaScript or ASP?
  • Create New...