PDA

View Full Version : CSS Menu Help - (Is it Hopeless?)


wyclef
01-23-2004, 03:20 PM
Hello,

I am so stuck. Please help me with this.

I have attached the files and a read me document explaining everything.

If there is anyone out there... :( who can help. I am so stuck. :confused:

splict
01-23-2004, 04:00 PM
I don't really have time to look into it, but I did run it through Dreamweaver MX2004 to get a list of tag issues. You are always gonna get things listed as issues, but I thought this might help you track your problem down. Dreamweaver saves this stuff as an XML file so I just made a screenshot for you - should be easier to read. I went as far back as 4.0 in netscape, 5.0 for opera and ie. Safari/mozilla checks are 1.0 only and ie for mac checks are 5.2 only.

btw - it looked like the gif to me except there were a couple pixels of blank space right above the top of the main menu part and select box - underneath the top line. WinXP IE6.0.2600. In Mozzilla 1.6 it looked fine. Keep in mind, messing with taking away doc type (using quirks mode) is sometimes useful, but all it is really doing is rendering it like it was designed for an older version of the browser.

Hope this helps.

-splict

wyclef
01-23-2004, 06:25 PM
Thanks. I looked into all those issues and still couldn't resolve the problem of the DIVs positioning themselves incorrectly.

tg
01-23-2004, 10:18 PM
i'm not sure why your bothering with css, when you've got the rest of the page the entire page layed out in a table.

why not just set up your whole layout with tables, instead of bothering with your 2 little divs?

or if your gonna go with css, get rid of the table all together, and do your actual page layout with real css positioning.

wyclef
01-24-2004, 02:28 PM
How can I set up that navigation with Tables? How would the hover color change aspect work? Can you provide me with an example of this?

tg
01-24-2004, 10:50 PM
sure, you can do the hover with css if you want, that is much easier... but it sounds like your problem was with the positioning? of the navigation... btw, it looked fine to me in ie6 (on windows), or at least pretty much like the image you provided.

just include the <a> identifiers in your css file.

then in the row you have your <div> tags in, put in a new table with all your navigation stuff in it.... trying to set css anything (beside the anchor tag <a>) is very problematic cross browser.

tg
01-24-2004, 10:54 PM
really, your original idea of using css for positioning is a very good one... better than using tables really, but you should really try to empliment it without the tables on your page.


didn't mean to sound harsh or anything above, but css inside tables can really make life difficult for you.

btw, have you checked out cssedge, or a list apart? both sites have really good css info.

wyclef
01-25-2004, 12:26 PM
So how can I use CSS to change the TD cell color when an A link is rolled over?

tg
01-25-2004, 07:27 PM
omg... i hope i havn't screwed things up for you.

keep the css for your <a> tag changes... just like you have them.
position the links via a table.
<table> tags and all that go with them, pretty much work cross browser.

farafiro
01-26-2004, 01:51 AM
I think this thread doesn't belong to here
con some mod move it??

wyclef
01-26-2004, 09:50 AM
I understand that TG but how can the bgcolor of the TD cell with the link in it change on rollover of the link? It seems like i'd only be able to change the background color of the link in a TD cell and not the entire cell?

tg
01-26-2004, 09:53 AM
keep your a:hover/a:active/a:... etc. part of the css. scrap the positioning piece. do your positioning with a table.

tg
01-26-2004, 09:54 AM
if i get a chance (fat chance) i'll do up a demo for css positioning for your... a tabless layout.

wyclef
01-26-2004, 09:55 AM
I don't see how this will solve the bgcolor hover state of the TD cell. Can you show me an example?

catbert303
01-29-2004, 07:24 PM
Hi,

if IE wasn't useless ;) you could apply the :hover selector the the td element,


<style type="text/css">
td.rollover {
background-color: #eeeeee;
}
td.rollover:hover {
background-color: #ff9900;
}



<table>
<tr>
<td class="rollover">css rollover</td>
</tr>
</table>


this page offers some workarounds for IE,

http://www.xs4all.nl/~peterned/csshover.html

however it may be easier to use javascript rollover events from the link to style the cell,


<style type="text/css">
td {
background-color: #eeeeee;
}
</style>
<script type="text/javascript">
function switchColour(node, colour) {
node.style.backgroundColor = colour;
}
</script>



<table>
<tr>
<td><a href="#" onmouseover="switchColour(this.parentNode, '#ff9900');" onmouseout="switchColour(this.parentNode, '#eeeeee');">javascript rollover</a></td>
</tr>
</table>