display:block

[benbacardi]

how come my display:block only makes the table dimesion around the FIRST <a> tag part of the hyperlink?

[benbacardi]

come on guys i rely on u lol :wink:

[D3mon]

I've no idea what you mean - can you be more descriptive or provide a demo?

[benbacardi]

ok...

for example: code:

<table>
<tr>
<td>
Text
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
</table>

only the first <a> fills the whole table cell, the others only apply the hyperlink to the text.. do you know what i mean now?

[courtjester]

uh.. where's the rest of the code? That's HTML and that won't do anything except put a link on the Text. Has to be some CSS I am not seeing

[D3mon]

Assuming its nothing horribly simple I'd suggest it was a conflit with the table elements as sometimes CSS is not applied to elements within table. Show the CSS too.

[benbacardi]

the css is is purely

a {

display:block;

}

[D3mon]

its an IE bug... as to how to fix it...

[D3mon]

do it properly with a <UL>:

<ul>[*]Text[*]Text[*]Text[*]Text[/list]

[benbacardi]

but i need them in <td> because the <td> themselves have a rollover, so they cell changes colour... i suppose i could always add a onclick="location='index.html'" to the <td> but apart from that...

[D3mon]

use a:hover to effect the rollover state...

[benbacardi]

thanks but it still wouldn't look the same as if it was in a <td> though would it? sorry lol

[D3mon]

try this:

Code: Select all

<style type="text/css">
ul { list-style-type: none; margin:0; padding:0; }
li { height:20px; width:100px border:1px solid gray;}
a { display: block; width:100%; }
a:hover {background: #fc0 }
</style>

<ul>[*]Text[*]Text[*]Text[*]Text[/list]

[benbacardi]

thanks i'd forgotton about the wonderful awesome power that is CSS!

[benbacardi]

ok this is the code I have for the menu:

Code: Select all

<table cellspacing="0" cellpadding="0">

<tr>

<td height="20" align="center" class="open">

<p class="menu">Menu One</p>

</td>

<td height="20" align="center" class="gap">
<p class="fill">-</p>
</td>

<td height="20" align="center" class="closed">

<p class="menu">Menu Two</p>

</td>

<td height="20" align="center" class="gap">
<p class="fill">-</p>
</td>

<td height="20" align="center" class="closed">

<p class="menu">Menu Three</p>

</td>

<td height="20" align="center" class="gap">
<p class="fill">-</p>
</td>

<td height="20" align="center" class="closed">

<p class="menu">Menu Four</p>

</td>

<td height="20" align="center" class="gap">
<p class="fill">-</p>
</td>

<td height="20" align="center" class="closed">

<p class="menu">Menu Five</p>

</td>

</tr>

<tr>

<td colspan="9" class="main" valign="top">

<p style="color:#997788">-</p>

</td>

</tr>

</table>

and this is the css:

Code: Select all

body {

font-family:verdana;
font-size:10pt;

}

.fill {

font-size:0pt;
color:#ffffff;

}

.open {

background-color:#997788;
border-left-style:solid;
border-top-style:solid;
border-right-style:solid;
border-color:#000099;
border-width:1px;
width:100px;
color:#ffffff;

}

.gap {

border-bottom-style:solid;
border-color:#000099;
border-width:1px;
width:10px;

}

.closed {

background-color:#997788;
border-bottom-style:solid;
border-color:#000099;
border-width:1px;
width:100px;
color:#ffffff;

}

.main {

background-color:#997788;
border-bottom-style:solid;
border-left-style:solid;
border-right-style:solid;
border-width:1px;
border-color:#000099;
height:100px;

}

a {

color:#ffffff;
text-decoration:none;
display:block;
width:100%;

}

a:hover {

background-color:#446622;

}

p.menu {

margin:0px;
padding:0px;
text-align:center;
height:100%;
width:100%;

}

The links now aren't vertically aligned within the <td>, and not all of the <td> changes color when you mouseover the links. Does anyone know why?

[Rob]

Why the tables? The whole point of XHTML and CSS is to lose code bloat (ie... tables)

[benbacardi]

the tables because i cant get

or <ul>[*] to go next to each other.. they go under each other instead

[Rob]

you need this:-
display:inline;

on any block elements you want to be treated as inline elements... eg:- p tags, and li tags.

[capture]

Hi I am fairly new to CSS, but I do not use any table tags at all.

Here is code for a navigation bar positioned to the left of the main content.

CSS:

#left
{position:absolute;
left:0;
top:0;
height:100%;
width:200px;
background:#aaa;
background-position:0 100px;
font-size:1em;
color:#fff;
z-index:4;}

.pad2
{display:block;
height:100px;}

a.nav, a.nav:visited
{display:block;
width:100px;
height:25px;
text-decoration:none;
color:#fff;
font-weight:bold;
line-height:25px;}

a.nav:hover
{color:#fc0;}

HTML:

<div id="left">
<div class="pad2"></div>
<ul>[*]Home[*]About Me[*]Stuff[*]More Stuff[*]A whole lotta stuff[*]I'm finished[/list]</div>

Hash marks in place of url to make is easier to read.

My first post.
Thanks
capture

[capture]

Sorry, didn't see the PLEASE REMEMBER message. Will not do that again.

capture