Link Styling Problems Accross Browsers

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.

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

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

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

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

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.

Ok.. Here is my HTML:

Dynamiclear Menu Prototype

 







Home

Tell a Friend

document.write(bookmark_link);



 





Learn More

Testimonials

Clinical Trials

Before & After

Compare

FAQs

Top 10 Tips

Instructions

Guarantee



 





All-in-one Kit

High Potency Lysine

Immune Support

Aloe vera Gel



 





Payment Options

Order Form

Delivery

Security

Privacy



 





About Us

Contact Us

Our Policies

Affiliate Center



 





Herpes Facts

Herpes Pamphlet

Herpes Support





 



 

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.

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.

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

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?

Yes.. Too true..

I guess I was looking for a quick solution.

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

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

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

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.

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