hi,
could anyone help me with this? :
basically im trying to alter the CSS of a wicked drop down menu ive found, but as im using images i dont want borders around them, so that the menu bar looks streamlined. Ive managed to get rid of the borders on mouseover, but if I change the borders normally to 0px, the whole menu disappears... this is how it stands at the moment for the mouse off bit:
.Bar
{
FLOAT: left;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 0px;
BORDER-BOTTOM: 1px solid;
POSITION: relative;
BACKGROUND-COLOR: transparent;
BORDER-LEFT: 1px solid;
TEXT-ALIGN: center;
MARGIN: 0px
}
I'm sure theres a really simple answer im missing! any advice would be great.Can we have a link to where this problem can be seen?yup - have posted the page temporarily at <!-- w --><a class="postlink" href="http://www.heneage.com">www.heneage.com</a><!-- w --> - its the New Titles section:
the new navigational bar that appears should ideally be streamlined across the page without any borders etc
hope someone can help!I do not see a menu at all.
MNSthats not good...! even if you click on new titles, no new nav bar appears?Where is "new titles"? See the attached pic.
MNSjeez - thats not how it looks in IE... see attached pic -
what browser are you using - this has completely thrown me!!
any advice on how to sort this out?Yes. DO NOT use IE 6 to check your layouts in. It has the worst CSS support of current browsers. Use Mozilla 1.4 or Netscape 7.1 to check it in first, then see what it looks like in IE 6.
If you do it in IE 6 first, you have already done it wrong basically.
I am using Netscape 7 on a MAC.
MNSok, so if i design for netscape and mozilla first off is that a better idea? how come spacing is so different in IE vs your browser (ie the nav bar being so far down you cant see it)? Is there a way to combat that? or is it best to check what browser a user is using a redirect to a prepared page for that browser?It is not so far down you can't see it. It isn't there at all. Anywhere.
Do your CSS to standards and check it in Mozilla or Netscape to see how it works first. Do not design for any browser.
Because CSS support is so different for each browser, most sites I have checked out have a javascript sniffer for browser version ond OS and then people get redirected to a stylesheet for that browser/OS.
Personally I don't do CSS because you spend more time learning all the various hacks necessary to make it work in each browser than what it is worth.
In a few years, it may be practical, but for now it just does not make sense unless you can code all that yourself and you have an extremely rich client. Or just plenty of time to kill.
The only designs in CSS that work in all browsers are very simle plain ones. The more complex the layout and design, the more you are going to hack to get it to work in all browsers.
As long as people use IE as their browser of choice CSS is endered pretty much useless imho. IE 6 does not completely support CSS1.
Good luck!
MNSthanks MNS, loads of great advice to think over! one last question though (sorry!) - would you recommend using tables then if not CSS?Originally posted by MotherNatrsSon
I do not see a menu at all.
MNS
What browser are you using because I checked in Mozilla 1.4 and IE 6 and it looks the same. It looks fine to me too, so I don't know if code was changed from when the problem was originally posted.spufi - yup i changed it, strangely enough just taking out two <br> tags made it the same in all browsers... dont really understand why if it was so different with them in.
do you have advice on drop down menus that are going to work in all browsers? it seems the one I found isnt going to - all this makes me realise how much I need to learn!
Here's the thing, drop down menus are going to need browser specific code no matter what way you do it. To my knowledge you can do it either using JavaScript, or CSS. The JavaScript one will work on IE and Netscape/Mozilla after you code to work with the quirks of each browser, but you also have to deal with the 13% of people who have JavaScript disabled. The CSS way is only good for Netscape/Mozilla, so that's just a very small percentage of your viewers. I will say the CSS way is easier to code, but again, it's depends on the number of users you have who can take advantage of it.
could anyone help me with this? :
basically im trying to alter the CSS of a wicked drop down menu ive found, but as im using images i dont want borders around them, so that the menu bar looks streamlined. Ive managed to get rid of the borders on mouseover, but if I change the borders normally to 0px, the whole menu disappears... this is how it stands at the moment for the mouse off bit:
.Bar
{
FLOAT: left;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 0px;
BORDER-BOTTOM: 1px solid;
POSITION: relative;
BACKGROUND-COLOR: transparent;
BORDER-LEFT: 1px solid;
TEXT-ALIGN: center;
MARGIN: 0px
}
I'm sure theres a really simple answer im missing! any advice would be great.Can we have a link to where this problem can be seen?yup - have posted the page temporarily at <!-- w --><a class="postlink" href="http://www.heneage.com">www.heneage.com</a><!-- w --> - its the New Titles section:
the new navigational bar that appears should ideally be streamlined across the page without any borders etc
hope someone can help!I do not see a menu at all.
MNSthats not good...! even if you click on new titles, no new nav bar appears?Where is "new titles"? See the attached pic.
MNSjeez - thats not how it looks in IE... see attached pic -
what browser are you using - this has completely thrown me!!
any advice on how to sort this out?Yes. DO NOT use IE 6 to check your layouts in. It has the worst CSS support of current browsers. Use Mozilla 1.4 or Netscape 7.1 to check it in first, then see what it looks like in IE 6.
If you do it in IE 6 first, you have already done it wrong basically.
I am using Netscape 7 on a MAC.
MNSok, so if i design for netscape and mozilla first off is that a better idea? how come spacing is so different in IE vs your browser (ie the nav bar being so far down you cant see it)? Is there a way to combat that? or is it best to check what browser a user is using a redirect to a prepared page for that browser?It is not so far down you can't see it. It isn't there at all. Anywhere.
Do your CSS to standards and check it in Mozilla or Netscape to see how it works first. Do not design for any browser.
Because CSS support is so different for each browser, most sites I have checked out have a javascript sniffer for browser version ond OS and then people get redirected to a stylesheet for that browser/OS.
Personally I don't do CSS because you spend more time learning all the various hacks necessary to make it work in each browser than what it is worth.
In a few years, it may be practical, but for now it just does not make sense unless you can code all that yourself and you have an extremely rich client. Or just plenty of time to kill.
The only designs in CSS that work in all browsers are very simle plain ones. The more complex the layout and design, the more you are going to hack to get it to work in all browsers.
As long as people use IE as their browser of choice CSS is endered pretty much useless imho. IE 6 does not completely support CSS1.
Good luck!
MNSthanks MNS, loads of great advice to think over! one last question though (sorry!) - would you recommend using tables then if not CSS?Originally posted by MotherNatrsSon
I do not see a menu at all.
MNS
What browser are you using because I checked in Mozilla 1.4 and IE 6 and it looks the same. It looks fine to me too, so I don't know if code was changed from when the problem was originally posted.spufi - yup i changed it, strangely enough just taking out two <br> tags made it the same in all browsers... dont really understand why if it was so different with them in.
do you have advice on drop down menus that are going to work in all browsers? it seems the one I found isnt going to - all this makes me realise how much I need to learn!
Here's the thing, drop down menus are going to need browser specific code no matter what way you do it. To my knowledge you can do it either using JavaScript, or CSS. The JavaScript one will work on IE and Netscape/Mozilla after you code to work with the quirks of each browser, but you also have to deal with the 13% of people who have JavaScript disabled. The CSS way is only good for Netscape/Mozilla, so that's just a very small percentage of your viewers. I will say the CSS way is easier to code, but again, it's depends on the number of users you have who can take advantage of it.