Forum Moderators: not2easy

Message Too Old, No Replies

CSS issues in Chrome and IE6

link color problem and rounded table problem

         

naiquevin

4:14 am on May 11, 2009 (gmt 0)

10+ Year Member



I am facing these two problems in Chrome and IE6...which I donot encounter in Firefox..

1) In an horizontal navigation menu styled using CSS, Crome and IE6 are showing some links in the default color(purple) and size and not as per the CSS declaration. But on hover the color change occurs .. Here is the part of the CSS

#nav-menu {
margin-top:64px;
margin-left:90px;
z-index:999;
font-family:comic sans ms;
width:50em;
z-index:1;
}

#nav-menu ul {

list-style: none;
margin:0;
padding:0;

}

#nav-menu li {

float: left;
margin: 0 1em;
}

#nav-menu li a:link {
color:black;
text-decoration:none;
font-size:16px;
z-index:2;
}

#nav-menu li a:hover {
color:#fad144;
text-decoration:none;
font-size:16px;
}

2) I have created a rounded block using tables ...
and between the first and the second row of the table, it shows a gap..
although cellpadding and cellspacing for the table are set to zero ..

Both these things work fine in Firefox

Kindly help

swa66

7:53 pm on May 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



font-family:comic sans ms;

fnt names that have spaces in them should be enclosed in quotes. Furthermore it's a list that should end in a generic font, e.g. "fantasy"
[w3.org...]

There are 2 ways to solve your visited links:

  • either remove the :link from the selector and style the "#nav-menu li a" and the "#nav-menu li a:hover" (btw: in that case there's no need for text-decoration and font size to be repeated on teh :hover)
    I prefer this method myself.

  • either style :link, :visited :hover and :active states of the link (in that order (mnemonic: love-hate))

second question: too little input to say anything sensible, try to construct a minimal example and post the code.

naiquevin

4:32 am on May 12, 2009 (gmt 0)

10+ Year Member



the first problem is solved.. thanks ...

for the second problem, I still have the code in HTML, as it has been done when I wasnt much familiar with CSS.. so its more of HTML problem, I guess..

May be I should try using CSS and see if it works

Anyways it goes this way...

<table border="0" cellspacing="0" cellpadding="0" style="font-size:18px">

<tr>
<td width="20" height="20" valign="top">
<img class="trans" src="images/c1.gif" width="20" height="20" border="0"/>
</td>

<td width="20" height="20" valign="top">
<img class="trans" src="images/sq.gif" width="500" height="20" border="0"/>
</td>

<td width="20" height="20" valign="top">
<img class="trans" src="images/c2.gif" width="20" height="20" border="0"/>
</td>
</tr>

<tr>
<td class="trans" width="20" align="left" valign="top" background="images/sq.gif">

</td>

<td class="trans" width="500" align="left" valign="top" background="images/sq.gif">

<?php

// All the stuff

?>

</td>

<td class="trans" width="20" align="right" valign="top" background="images/sq.gif">

</td>

</tr>

<tr>
<td width="20" height="20" valign="top">
<img class="trans" src="images/c3.gif" width="20" height="20" border="0"/>
</td>

<td width="500" height="20" valign="top">
<img class="trans" src="images/sq.gif" width="500" height="20" border="0"
</td>

<td width="20" height="20" valign="top">
<img class="trans" src="images/c4.gif" width="20" height="20" border="0"/>
</td>

</tr>

</table>