14 replies
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
#css #menu #spacing
  • Profile picture of the author Tonyk518
    #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
    {{ DiscussionBoard.errors[7349689].message }}
  • 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
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7350329].message }}
  • Profile picture of the author ThomasTe
    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
    {{ DiscussionBoard.errors[7363985].message }}
    • Profile picture of the author Brandon Tanner
      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.
      Signature

      {{ DiscussionBoard.errors[7365186].message }}
      • Profile picture of the author wayfarer
        Originally Posted by Brandon Tanner View Post

        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.
        Or, you could just do <!DOCTYPE HTML> instead of all that. It puts all the browsers in the same "standards mode", which is all we need. Technically, it is the HTML 5 doctype, but as far as IE6-IE8 are concern it just means strict mode. Much easier to remember also!
        Signature
        I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
        {{ DiscussionBoard.errors[7365634].message }}
        • Profile picture of the author Brandon Tanner
          Originally Posted by wayfarer View Post

          Or, you could just do <!DOCTYPE HTML> instead of all that. It puts all the browsers in the same "standards mode", which is all we need. Technically, it is the HTML 5 doctype, but as far as IE6-IE8 are concern it just means strict mode. Much easier to remember also!
          I noticed that there was a lot of deprecated code on that page... at least some of which is not compatible with HTML5 (ie <font>)... which is why I didn't recommend the HTML5 doc type.

          But if the page was designed correctly in the first place, then that wouldn't be an issue, of course.
          Signature

          {{ DiscussionBoard.errors[7365709].message }}
          • Profile picture of the author wayfarer
            Originally Posted by Brandon Tanner View Post

            I noticed that there was a lot of deprecated code on that page... at least some of which is not compatible with HTML5 (ie <font>)... which is why I didn't recommend the HTML5 doc type.
            I didn't actually look at the page, but <font> garbage will still RENDER under HTML 5. Not that it's recommended, stuff like <font> and <center> has had better alternatives for years now.

            Anyway, the point is a DOCTYPE is the first step to getting standard type code to render similarly
            Signature
            I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
            {{ DiscussionBoard.errors[7365814].message }}
            • Profile picture of the author Brandon Tanner
              Originally Posted by wayfarer View Post

              I didn't actually look at the page, but <font> garbage will still RENDER under HTML 5. Not that it's recommended, stuff like <font> and <center> has had better alternatives for years now.

              Anyway, the point is a DOCTYPE is the first step to getting standard type code to render similarly
              I haven't used the <font> tag in a loooooong time, so I was just going on what I've recently read about it...

              HTML font tag

              It may still render in most browsers, but that may not always be the case... so it's probably a bad idea to keep using it!
              Signature

              {{ DiscussionBoard.errors[7365925].message }}
  • Profile picture of the author ThomasTe
    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
    {{ DiscussionBoard.errors[7368889].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by ThomasTe View Post

      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
      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.
      Signature

      {{ DiscussionBoard.errors[7370131].message }}
  • Profile picture of the author ThomasTe
    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
    {{ DiscussionBoard.errors[7377426].message }}
    • Profile picture of the author wayfarer
      Originally Posted by ThomasTe View Post

      Got it to work without adding doctype, etc.
      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.
      Signature
      I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
      {{ DiscussionBoard.errors[7389123].message }}
  • Profile picture of the author umrbd
    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
    {{ DiscussionBoard.errors[7378165].message }}
  • Profile picture of the author ThomasTe
    Thanks, umrbd. I still have some issues though. Sent you a pm.
    {{ DiscussionBoard.errors[7388277].message }}

Trending Topics