14 replies [Last post]
tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

I'm having a small issue with some CSS in a menu that I am building for a website:

http://ultimatesalesmeetings.com/scratch47/2006/

I'm wanting the dark grey color on the top row of the navigation area to encompass the 'Home' option ONLY instead of extending out across the rest.

I have tried limiting the width of that div amongst other things, and so far no luck.

Can anyone help me out here?

Thanks in advance.

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Inline Problem

It seems that with MSIE, adding padding:0; to #primarymenu fixes the problem.
You still have to close meta tags, link tags and fix a few html problems.

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

Ok thanks for that... I'll give it a try?
Are you saying I have lots of tags and html problems to fix?

How do I find out what they are?

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Inline Problem

One solution :
http://validator.w3.org/check?verbose=1&uri=http%3A//ultimatesalesmeetings.com/scratch47/2006/
also :
line 6 column 26 - Warning: adjacent hyphens within comment
line 7 column 1 - Warning: <meta> element not empty or not closed
line 8 column 1 - Warning: <meta> element not empty or not closed
line 9 column 1 - Warning: <meta> element not empty or not closed
line 10 column 1 - Warning: <meta> element not empty or not closed
line 11 column 1 - Warning: <meta> element not empty or not closed
line 12 column 1 - Warning: <meta> element not empty or not closed
line 13 column 1 - Warning: <meta> element not empty or not closed
line 14 column 1 - Warning: <meta> element not empty or not closed
line 16 column 24 - Warning: adjacent hyphens within comment
line 15 column 1 - Warning: <meta> element not empty or not closed
line 18 column 1 - Warning: <link> element not empty or not closed
line 19 column 1 - Warning: <link> element not empty or not closed
line 20 column 1 - Warning: <link> element not empty or not closed
line 25 column 1 - Warning: <script> inserting "type" attribute
line 157 column 11 - Warning: <div> anchor "divider" already defined

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

oh ok... thanks for that

but your suggestion on the padding:0; didn't even come close to solving my inline problem.

Perhaps you misunderstood what I'm asking...?

I just want the grey box in the 'Primary' line of menu options to be around the 'HOME' link only. For some reason the top portion is extending across all of them???

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Inline Problem

It works for me : The green bar doesn't appear any more. A cache problem ?

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

The Green Bar????

That proves to me you're not getting me. I'm talkign about the grey bar that extends above beyond 'HOME' to cover 'ABOUT US' 'SALES TIPS' etc as well.

That's the bit I need to bring back so it ONLY covers the 'HOME' word. So essentially it creates a neat 'tab' over the word 'HOME'...

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Inline Problem

Did you try ?
#primaryMenu {
padding:0px 15px;
}

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

yeah I did. No good.

It's got nothing to do with "#primaryMenu" anyway.

If anything it can only be:

#psContainer {
background-color:#777;
display:inline;
}

or

#primarySelected {
padding:0 10px;
display:inline;
}

That can be of blame here...

Otherwise it can only be an arror in the 'Nifty Corners' script that I'm using. In which case I'm stuffed! Tongue

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Inline Problem

tigger wrote:
Otherwise it can only be an arror in the 'Nifty Corners' script that I'm using. In which case I'm stuffed! Tongue

Without looking too closely into it, that would be my guess. The nifty corners is being applied to both elements whereas you only want to apply it to one.
The version of nifty you're using is different from the one I've used before in that I can specify what class/ID to attach it to, e.g.:

<script type="text/javascript" src="nifty.js"></script>
	<script type="text/javascript">
	window.onload=function(){
		if(!NiftyCheck())
		    return;
		RoundedTop("div.corners","#F4F6F7","#0A50A1");
		RoundedBottom("div.corners","#F4F6F7","#FAFCFE");
	}
	</script>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

Yeah I'm just containing those variables in a seperate JS file is all:

window.onload=function(){
if(!NiftyCheck())
    return;

Rounded("div#psContainer","tl tr","#transparent","#777","border #777");
}

as far as I know though, there's nothing amiss there...

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

This might help explain what I'm trying to get at:

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Inline Problem

The green bar above disappeared with msie and firefox when I applied padding: 0 15px instead of padding: 3px 15px 0px 15px;
the rounded corners too...

tigger
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-8
Joined: 2005-12-19
Posts: 9
Points: 0

Inline Problem

As you can see by the example image I just posted, the green bar has nothing at all to do with original my query...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Inline Problem

In #psContainer, remove {display: inline;}, add { float: left;}.

Recode that whole thing as a list, and use sliding doors instead of 'nifty corners', with which I am less than impressed. It's an ugly hack for so little return.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.