CSS - Block Nav With Individual Links Inside

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

Hey,

I've run into some trouble with a menu.

Below is my CSS:
css Code:
Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }

  

 #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }


 #menu ul li{ float: left; margin: 0 5px; }


 #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; } 

As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely.

This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list.

I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with.

Please let me know if you need any further information - otherwise, thank you in advance for any assistance!

Hello, thanks for taking the time to read my post.

I'm having a problem getting my divs to layout where I want them to.

Here is the worst example:here
Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div...

This works ok: this
But if the content for that page is short, it's going to do this: here

This only works for very short content, nesting it in with the menu: here

I am able to position it horizontally depending on which div I nest it in.

It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom.

thanks for your time,
juglesh

What is the best way to evenly space these links inside the div?

PHP Code:
<div id="contain_header">
        <div id="header">
        <a href="index.php" class="nav">Homepage</a>
        <a href="manufacturers.php" class="nav">Manufacturers</a>
        <a href="contact.php" class="nav">Contact Us</a>
        <a href="carfinder.php" class="nav">Advanced Car Search</a>
        <a href="specialoffers.php" class="nav">Special Offers</a>
        <a href="faq.php" class="nav">FAQ's</a></div>
    </div> 

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.

Im using this to make an onscroll effect
Code:

table.left {border-collapse:collapse;
                float:left;
		  margin-left:10px;
		  margin-right:10px;
		  background:#8f8f8f;
		  padding:5px;
	          color:#000000;
                 font-family:Verdana;
		  text-decoration:none;
	
     }

td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}

td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;



}

And the links don't format with the typical css markup
Code:

a:active {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:link {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:hover {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}

Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck
Note:this is in IE


Nevermind...I just figured it out..used a link class and set the visited attribute

I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html

However, I wish to have MY OWN font style on each links as it can be seen on:

The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php

i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.

Code:

				
<li><a title="link six" href="index.html">link six</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link one" href="index.html">link one</a></li>

My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???

I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.

My CSS code so far is:

Code:

/* CSS Document */

body 
{
	background-color:black;
	background-attachment:fixed;
}

/* .................................... HEADER & FOOTER ................................... */

#header
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	width:100%; 
}

#header  a
{
	color:yellow;	
	text-decoration:none;
}

#header  a:hover
{
	text-decoration:underline;
}

#footer
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	border-top:3px solid fuchsia;
	float:left;
	background-color:black;
	width:100%; 
}

#footer a
{
	color:yellow;	
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:underline;
}

/* ........................................ BANNER ........................................ */

#banner
{
	width:100%;
	border:none;
	text-align:center;
	background-color:none;
}

/* ......................................... TOP MENU .................................... */

#topMenu
{
	width:100%;
	float:right;
	border:none;
}

#topMenu ul
{
	float:left;
	margin-left:4%;
}

#topMenu ul li 
{
	display:inline;
	width:20%;
}


/* ................................... CONTENT ................................................ */

#leftContent
{
	float:left;
	width:10%;
	border:1px solid red;
	background-color:green;
}

#centerContent
{
	background-color:white;
	width:75%; 
	margin-left:1%;
	float:left;
	border:1px solid green;
}

#centerContent ul
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	list-style-type:decimal;
	color:black;
}

#centerContent li
{
	margin:3% 3%;
	line-height:1.5em;
}

#rightContent
{
	float:right;
	background-color:fuchsia;
	border:1px solid red;
	width:10%;
}

/* ................................... STYLES ......................................... */

p.first-letter:first-letter
{
	color:red;
	margin-left:5%;
	font-size:xx-large;
}

p
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	line-height:1.5em;
	margin:2% 3%;
	color:black;
}

h4
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	font-size:x-large;
	color:green;
}

h5
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	margin:2% 3%;
	color:blue;
}

h6
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	margin:0;
	font-size:medium;
	font-weight:normal;
	color:red;
}

.italic
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.bold
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.colorTextRed
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:red;
}

.colorTextBlue
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:blue;
}

.colorTextGreen
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:green;
}

/* ................................... TABLE ......................................... */

#contactTable
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
}

#contactTable tr
{
	border:none;
}

#contactTable th
{
	color:fuchsia;
}

#contactTable td
{
	font-size:medium;
	color:black;
}

/* ................................... CLASSES ......................................... */

.table
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-collapse:collapse;
	text-align:left;
}

.tr
{
	border:none;
}

.td
{
	border:thin solid red;
	font-size:medium;
	padding:2px;
	text-align:center;
	color:black;
}

What I want is a result that looks like this:

1. (+2)
--2. (+2)
----3. (+2)
------4. (+2)
-------4.1. (+1)
--------4.2. (+1)
Where "-" is 1px,

So: all parents should be positioned +2px relative to the previous parent item. All childs should be positioned +1 relative to their parent.
What would be very very cool is to implement math function (eg each parent item should be previous indent * 4).

I guess that one can not create a kind of dynamic indent (as in to write it all in one 'simple' statement). I assume that I should indeed write the css for each item. Is their a way to add such a code (something like 'padding-left: (ul li) * 2; and so forth...


Given the following list:
Code:

<ul id="navbar">
    <li>1.<ul>
    <li>2.</li>
    <li>3.</li> 
    <li>4.</li>
        <li>4.1.</li>
        <li>4.2.</li>
    </ul></li>

</ul>

How does one get that kind of result and is it possible in the first place?

Hi I need something simple done.

I need to decrease the size of a textbox (Image verification) on this page:

http://quickonline.co.za/

Im not sure what to put in CSS , I tried this:
Code:

input.chrono_verification {
width:50px;
}

nevermind Its a Id not a class

Is is possible to style each type of input elements individually without the use of classes? Currently I use classes to make the borders of buttons appear differently from that of text fields.

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site.

hover color for an individual piece of link on a page full of links.
So not like this in the header:
Code:

<STYLE>
a:hover {color:#FF0000}
</STYLE>

but something like this, but then it has to work :
Code:

<a href="page.html" style="hover-color:#FF0000;">
Link text</a>

I noticed that 'text-decoration: none' works in the second way, but i dont know how this hover color has to be done in that way.

I'm trying to replicate what I had in html tables with css div. The final (I hope) problem is that as I populate cells with data retrieved from a MySQL data base there are columns that want to expand beyond the default height. When that happens, that cell overlaps the next row. If I use min-height, the cell alignment goes haywire because other cells are below the minimum. The workaround is to increase the default height, but that doesn't make me love divs. Is there a solution to this?

Here's my code (stripped down--there'e a lot more to the application, and sanitised for anonymity).

Thank you.


<style type="text/css" media="screen, print, projection">
body,
html {
margin:0;
padding:0;
color:#000;
background:LightBlue;
}
#wrap {
width:99.5%;
margin:0 auto;
background:LightBlue;
padding:0px 0px 0px 0px;
border: none;
}
#p {
float:left;
width:72.5%;
padding: 0px 0px 0px 0px;
border: 3px solid navy;
}
# li {
border-bottom: 1px solid navy;
height: 36px;
font-size:small;
}
#p li.header {
border-bottom: 1px solid navy;
font-weight:bold;
font-size:medium;
height: 24px;
padding:0px 0px 0px 0px;
}
#p ul {
margin:0;
padding:0px;
list-style:none;
}
#p p {
font-weight:bold;
font-size: medium:
padding: 0px 0px 0px 0px;
}
#title {
border-bottom: 1px solid navy;
width:100%;
}
#button {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:10%;
}
#pt {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:20%;
}
#c {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:30%;
}
#ex {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:19%;
}
#az {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:9%;
}
#ep {
float:left;
border-bottom: 1px solid navy;

width:11%;
}
</style>
</head>
<body>
<?php
// code to connect to mysql and do do some other stuff goes here
$cl=field_already_retrieved_from db;
echo "<div id=wrap>"; //wrapper for entire page (the real application does a lot more than this section
$result = mysql_query
//sql select statment goes here
$num_rows = mysql_num_rows($result);
echo "<div id='p'>"; //wrapper for p's
echo "<div id='title'>";
echo "<ul><li class=header>Lines</li></ul>";
echo "</div>"; //end title
while($row = mysql_fetch_array($result))
{
$p=$row['p'];
$v=$row['V'];
echo "<form action='detail.php' method='post'> ";
echo "<div id='button'>"; //button to display line detail
echo "<ul><li>";
echo "<input type='submit' class='btn' name='line' value ='Detail'><input type='hidden' name='p' value ='$p'><input type='hidden' name='v' value ='$v'><input type='hidden' name='cl' value ='$cl'>";
echo "</li></ul>";
echo "</div>"; //end button
echo "</form>";
echo "<div id='pt'>";
echo "<ul><li>";
echo $row['pt'];
echo "</li></ul>";
echo "</div>"; //end pt
echo "<div id='c'>";
echo "<ul><li>";
echo $row['c'] . "/" . $row['PN'];
echo "</li></ul>";
echo "</div>";//end c
echo "<div id='ex'>";
echo "<ul><li>";
echo $row['Ex'];
echo "</li></ul>";
echo "</div>"; //end ex
echo "<div id='az'>";
echo "<ul><li>";
echo $row['az'];
echo "</li></ul>";
echo "</div>"; //end az
echo "<div id='ep'>";
echo "<ul><li>";
echo $row['ep'];
echo "</li></ul>";
echo "</div>"; //end ep
echo "</form>";
} // end while (select lines from database)
echo "</div>"; //end p--wrap for lines
echo "</div>"; //end wrap--entire page
mysql_close($con);
?>
</body>
</html>