Spacing in CSS menu

14 years ago

#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

{{ DiscussionBoard.errors[7349689].message }}

TheContentAuthority

14 years ago

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

Signature

Outsource to the experts...

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

{{ DiscussionBoard.errors[7350329].message }}

ThomasTe

14 years ago

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

Thanks
1 reply

{{ DiscussionBoard.errors[7363985].message }}

Brandon Tanner

14 years ago

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.

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[7365186].message }}

wayfarer

14 years ago

Originally Posted by 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.

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!

Thanks
1 reply

Signature

I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs

{{ DiscussionBoard.errors[7365634].message }}

Brandon Tanner

14 years ago

Originally Posted by wayfarer

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

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[7365709].message }}

wayfarer

14 years ago

Originally Posted by Brandon Tanner

I noticed that there was a lot of deprecated code on that page... at least some of which is not compatible with HTML5 (ie )... which is why I didn't recommend the HTML5 doc type.

I didn't actually look at the page, but garbage will still RENDER under HTML 5. Not that it's recommended, stuff like 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

Thanks
1 reply

Signature

I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs

{{ DiscussionBoard.errors[7365814].message }}

Brandon Tanner

14 years ago

Originally Posted by wayfarer

I didn't actually look at the page, but garbage will still RENDER under HTML 5. Not that it's recommended, stuff like 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 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!

Thanks

Signature

{{ DiscussionBoard.errors[7365925].message }}

ThomasTe

14 years ago

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

Thanks
1 reply

{{ DiscussionBoard.errors[7368889].message }}

Brandon Tanner

14 years ago

Originally Posted by 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

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 ). Much better to use CSS for things like that.

Thanks

Signature

{{ DiscussionBoard.errors[7370131].message }}

ThomasTe

14 years ago

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

Thanks
1 reply

{{ DiscussionBoard.errors[7377426].message }}

wayfarer 14 years ago

Originally Posted by ThomasTe

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.
- Thanks
Signature
I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
{{ DiscussionBoard.errors[7389123].message }}

umrbd

14 years ago

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

{{ DiscussionBoard.errors[7378165].message }}

ThomasTe

14 years ago

Thanks, umrbd. I still have some issues though. Sent you a pm.

Thanks

{{ DiscussionBoard.errors[7388277].message }}

Spacing in CSS menu

Trending Topics

Warrior Forum - still Relevant??

Brand NEW Warrior Forum Show With Eric Louviere

Zero Backlinks Website Ranking in the First Page of Google without Best SEO Practices.

Hi, I'm new

New CEO Of The Warrior Forum (Let's Get Cracking!)