14 replies [Last post]
Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

Hi all..

I am having a problem with my nav menu.

The problem is that my link styles do not render correctly in firefox or safari.. but they work perfectly in internet explorer.

The issue lies mainly with the height & width, margins and possibly also padding.

Here is the style class:

a.menu_item {
height: 25px;
width: 113px;

margin-top: 2px;
margin-left: 2px;

padding: 5px;
padding-left: 7px;

font-family: Tahoma;
font-size: 11;
color: #FFFFFF;

white-space: nowrap;
vertical-align: middle;
text-decoration: none;

background: url(http://www.mysite.com/images/nav-sub-blue.gif) no-repeat;
}

Can anyone help with this?

Thanks.

Remo

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Remo wrote: The issue lies

Remo wrote:

The issue lies mainly with the height & width, margins and possibly also padding.

If you know what the issue is, then why do you need our help?

Also, can you use the [ code ] tag, there is a reason Tony put it there, I promise.
Lastly, can you post ALL your code? a live link would be even better.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

One problem is your

One problem is your font-size doesn't have a unit.

This is my big chance . . . yep, I blew it . . .

Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

I know the issue, but not the fix...

Deuce,

I know what the issue is, but I do not know the fix.

Here is a link: http://www.dynamiclear.com/index_temp.htm

If you can have a look at this page in IE and FF or SAFARI then you will see the issue.

Thanks

Remo

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 39 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

http://css.maxdesign.com.au/l

This is my big chance . . . yep, I blew it . . .

Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

Listamatic...

Does anyone know of a fix that will not require me to redesign the entire nav menu?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The answer to that is not

The answer to that is not helped by a broken link?

if you have designed the menu incorrectly then the only option is to re-do it correctly.

Again sadly without full sight of code it's not possible to help further. One thing I do notice in that snippet is that you are trying to apply width/height and margins to line box inline element which doesn't take these properties.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

Ok.. Here is my

Ok.. Here is my HTML:


Dynamiclear Menu Prototype




and, Here is my CSS:

table.menu {
background: url(http://www.dynamiclear.com/images/nav-middle.gif) repeat-y;
}

table.menu_top {
height: 20px;
font-size: 1px;
background: url(http://www.dynamiclear.com/images/nav-top.gif) no-repeat;
}

table.menu_bottom {
height: 10px;
font-size: 1;
background: url(http://www.dynamiclear.com/images/nav-bottom.gif) no-repeat;
}

table.menu a.menu_item {
height: 25px;
width: 113px;

margin-top: 2px;
margin-left: 2px;

padding: 5px;
padding-left: 7px;

font-family: Tahoma;
font-size: 11px;
color: #FFFFFF;

white-space: nowrap;
vertical-align: middle;
text-decoration: none;

background: url(http://www.dynamiclear.com/images/nav-sub-blue.gif) no-repeat;
}

table.menu a.menu_item:hover {
color: #7998DA;
background: url(http://www.dynamiclear.com/images/nav-sub-white.gif) no-repeat;
}

td.main {
width: 627px;
border-right: 2px solid CCD8F3;
}

Please disregard the broken links, as I am only working on the nav styles at this stage.
Also note that the JS for the bookmark link is not included here.. as it's not relevant.

Also, the styles render fine in IE 6 and 7. Firefox and Safari are the problem.

Thanks,

Remo.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please tell me you no what a

Please tell me you know what a DTD is and that you actually do have one in place on the page proper?

Did my mention of width/height/margins not applying to inline elements mean anything?

You have a table based graphic led layout by the looks of things and as such I bow out as I don't deal with these.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

DTDs, In-Line Elements...

DTDs, In-Line Elements... This is all jibberish to me..

Ok, I will explain my needs as this may help a little..

I am tring to make a CSS navbar with background-images that work on "hover". (like onMouseOver, but I want to keep the links simple, so that they are not encapsulated in JS and they are more Search Engine friendly).

I followed the listamatic link in one of the above posts, and redesigned my nav menu, but still, the hover does not show the entire background-image, only what is filled by the text of the link and any padding.

if anyone can point me in the right direction, it would be much appreciated.

thanks

Remo

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:DTDs, In-Line

Quote:
DTDs, In-Line Elements... This is all jibberish to me..

Then what are doing coding web pages :? statements like this will not get a lot of respect!

Look these things up get familiar with what they mean, one of them is absolutely essential.

Then I would also work your way through some basic CSS tutorials and layout examples.
Tables are simply not how to code up the structure of a page.

Again I ask the question do you understand that you can't give height or width to anchor elements?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Remo
Remo's picture
Offline
newbie
Last seen: 13 years 25 weeks ago
Timezone: GMT+10
Joined: 2007-05-03
Posts: 6
Points: 0

Yes.. Too true.. I guess I

Yes.. Too true..

I guess I was looking for a quick solution.

I will go and research DTDs and do some CSS Tutes etc.

Quote:

Again I ask the question do you understand that you can't give height or width to anchor elements?

To answer your question, actually, IE 6 and 7 do render heights and widths of anchors. This is the reason why I thougth that it would be possible in other browsers.

But thanks for your help anyway Hugo.

Remo

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

IE is crap. Without a

IE is crap. Without a doctype it renders in "Quirks Mode".

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Remo wrote:Yes.. Too

Remo wrote:
Yes.. Too true..

Quote:

Again I ask the question do you understand that you can't give height or width to anchor elements?

To answer your question, actually, IE 6 and 7 do render heights and widths of anchors. This is the reason why I thougth that it would be possible in other browsers.

But thanks for your help anyway Hugo.

Remo

They may do in Quirks mode, but we deal with Standard based rendering as this is the only reliable means of applying CSS properties with any certainty that they do what they are supposed to.

Inline elements do not take width or height properties.

You will need to add display:block to the anchors if you wish them to take these properties, but first you will need a DTD.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Remo wrote: To answer your

Remo wrote:

To answer your question, actually, IE 6 and 7 do render heights and widths of anchors. This is the reason why I thougth that it would be possible in other browsers.

Using any version of IE to design to is a snare and will just get you into deeper trouble. Even IE7 is not yet ready to be designed to, though it has improved quite a bit over IE6.

You want to design to, if anything, a good standards compliant browser, such as Firefox or Opera (and there are others). Then you will see your page pretty much as the CSS standard says it should be.

Even better would be to first code up your page with valid and semantic html, all the while completely forgetting about styles and layout. Then take a look at the result without a stylesheet. Is it useable? If so, and only if so, it is ready to be styled.

Once you have a solid foundation of valid, semantic html, then you have a good basis for style and layout, but not before. Of course no-one follows my advice on this, heck even I often don't. But when I don't, all to often I find myself getting into problems and then having to cut back down and remake my html as valid and semantic, and then start again. You'd think I'd learn eventually...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.