Spacing in CSS menu

by 14 replies
17
Hi,

I'm testing a new layout at ***

In Internet Explorer the menu looks fine, but in Safari there is a spacing between some of the sub-menu items.

Any ideas on what I should do?

Thanks a lot.

Best regards,
Thomas
#programming #css #menu #spacing
  • #navbar li {
    float:left;
    height:30px;
    list-style:none;
    }

    Take out the height, I would also consider a border-bottom:1px solid for each LI too and play with that
    • [ 1 ] Thanks
  • Thomaste,

    I just wanted to add a little tip that is super cool. If you look at a site in Google Chrome and right click on an area that you are having trouble with and select inspect element, chrome allows you to see all the HTML and corresponding CSS that make up what you are viewing in the browser. Its similar to Firebug for Firefox. The best part is that you can change things right in the tool and it will show you how things will look without really making the change. So for instance on Tonyk518’s suggestion, you could find that style code and change the height attribute from within chrome to see if that change really would help. Pretty cool huh!?

    Heres more info on developer tools,

    https://developers.google.com/chrome.../docs/overview

    Hope you can use that down the road when you have another style issue,

    Shawn
    • [ 1 ] Thanks
  • If I remove the height in #navbar li, then it looks like it should in Safari.
    However, in Internet Explorer, the sub-items becomes really high. Any input?

    Thanks.

    Best regards,
    Thomas
    • [1] reply
    • Thomas,

      For one, you are missing a doc type declaration on that page. Paste the following line to the very top of the document (before the opening <html> tag)...

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      Then change the opening html tag to this...

      <html xmlns="http://www.w3.org/1999/xhtml">

      There are other issues on that page too, but adding the doc type should at least solve the CSS spacing problem.
      • [1] reply
  • I tried the doctype, but it still doesn't work. It started to mess up the layout after I removed the length of the first <li>. Could it be something with the height of <li ul> that I need to edit?

    Thanks.

    Best regards,
    Thomas
    • [1] reply
    • First of all, you have the doctype and the opening <html> tag in the wrong place, and you have 2 different opening <html> tags (there should only be 1).

      The doc type and opening <html> tag go at the very top, before the <head> section, like this...

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>
      <meta http-equiv="Content-Language" content="en-us">
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>TimeSheet Reporter - Time Reporting in Your MS Outlook Calendar - TimeSheet Reporting Made Simple</title>
      <meta name="keywords" content="timesheet reporter, tsr, time sheet reporter, timesheet, report timesheet, report time, timesheet reporting, time reporting, time sheet report, report time outlook, timesheet outlook, time sheet outlook, timesheet reporter outlook, timesheet calendar, timesheet erp, timesheet crm, timesheet report, manage timesheet, timesheet administration, timesheet overview, time reporter, time report">
      <meta name="description" content="TimeSheet Reporter - TimeSheet Reporting Made Simple - Report time on organizations, projects and activities from your Microsoft Outlook Calendar">
      <link href="CSSFunctions.css" rel="stylesheet" type="text/css">
      </head>

      And then the <body> tag goes directly after </head>.

      But even after you fix that, you may still have some problems with certain browsers, because you are using tables for layout purposes (you should use div's and CSS for layout instead).

      Web Page Layouts Shouldn't Use Tables - Avoid Tables for Web Page Layout

      Also, as I mentioned above, you are using deprecated tags (ie <font>). Much better to use CSS for things like that.
  • Got it to work without adding doctype, etc.
    Simply sat the length of <il> in the css definition to 171 and then changed the inline length to what I wanted, so it works now.

    Thanks for all the input.

    Best regards,
    Thomas
    • [1] reply
    • That's the wrong choice. You SHOULD add a doctype. It's not a magical solution, but you should add it before you begin to work on one.
  • You may want to apply float: left css on the li of your navigation also make sure that their is no padding and margin on ul and li of navigation
    • [ 1 ] Thanks
  • Thanks, umrbd. I still have some issues though. Sent you a pm.
Join the discussion

Next Topics on Trending Feed