Why is my navigation messing up?

Why is my navigation messing up? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

CelticDragon -> Why is my navigation messing up? (1/24/2005 10:36:41)
Hey guys! I had this site working as I thought with frontpage and ms explorer a while ago. i started (and hopefully finished) translating it into CSS today and for some reason my included navigation page won't play nice! Anyone have any ideas as to why this may or may not be the case? Seems to work fine in Explorer but I've started to get picky about my code since getting to know Firefox!!!!! Cheers! Stephen Oh.... well done me! Nearly forgot to give you the address! It's my How Saxy site

c1sissy -> RE: Why is my navigation messing up? (1/24/2005 10:57:13)
Hi CD, I just loaded it up and see what you are talking about, post your css for us? I think I know what it might be, but not sure.

CelticDragon -> RE: Why is my navigation messing up? (1/24/2005 11:08:46)

Hi C1ssy.... heres my CSS code..... can't figure it out!

body {
background:#C0C0C0;
}

.maintable {
width: 750px;
background-color: #ffffff;
}

.subtable {
width: 550px;
}

td.header {
background-image: url('images/header.jpg');
height: 236px;
padding: 0px;
margin: 0px;
}

td.navigation {
width: 150px;
}

td.nav{
padding: 0px;
margin: 0px;
}

td.main {
padding: 10px;
width: 600px;
}

td.subheader {
padding-left: 5px;
width: 550px;
font-size:16px;
font-weight: bold; 
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #000099;
padding-bottom: 5px;
border-style: solid;
border-bottom-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-color: #000099;
}

td.submain {
padding: 5px;
font-size:12px; 
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #0000FF;
}

td.subheader1 {
padding-top: 5px;
padding-left: 5px;
font-size:12px;
font-weight: bold; 
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #000099;
width: 50%;
}

td.footer {
padding-top: 10px;
text-align: center;
vertical-align: bottom;
font-size: 10px;
color: #c0c0c0;
}

td {
vertical-align: top;
}

a:link {
text-decoration: underline;
color: #000080;
font-size:14px;
font-weight:bold;
}

a:hover {
text-decoration: none;
color:#000080;
font-size:14px;
font-weight:bold;
}

a:visited {
text-decoration: underline;
color: #CCCC00;
font-size:14px;
font-weight:bold;
}

ul {
list-style-type: disc;
color: navy;
font-weight: bold;
font-size: 12px;
color: #0000ff;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

input.buttons {
border:3px double #0000ff; 
background-color: #FFFFFF;
color:#000099;
font-weight:bold;
font-size: 14px;
margin: 5px;
font-family:Arial,Verdana,Helvetica,sans-serif;
}

input.textbox {
margin-bottom: 5px;
height:25px;
width: 200px;
border:3px double #0000ff;
background-color: #FFFFFF;
color: #000000;
font-weight:bold;
font-size: 12px;
font-family:Arial,Verdana,Helvetica,sans-serif;
padding: 2px;
}

textarea.textbox {
margin-bottom: 5px;
height:70px;
width: 200px;
border:3px double #0000ff;
background-color: #FFFFFF;
color: #000000;
font-weight:bold;
font-size: 12px;
font-family:Arial,Verdana,Helvetica,sans-serif;
padding: 2px;
}

The problem is I have just got the links as a load of images in a table.... I don't know why there are breaks in the navigation...

jaybee -> RE: Why is my navigation messing up? (1/24/2005 13:06:43)
You have each of the links in a separate table cell so I expect the gaps are the cell borders. You can either use border collapse to try and get rid or You set it up as a list and put the whole lot in one cell <ul> <li>.......</li> <li>.......</li> </ul> Style it to display as a block You can see some examples of this at http://css.maxdesign.com.au/listamatic/index.htm

c1sissy -> RE: Why is my navigation messing up? (1/24/2005 15:04:14)
needing to use display block and set up as Jaybee suggests is going to fix it. Try what she is telling you to do and those lines will go away.

Avick -> RE: Why is my navigation messing up? (1/25/2005 7:34:58)
Jaybee In relation to the list items for displaying menus. I remember reading on this site that I could display a list in a horizontal format. I think the command was something like display: inline Is this correct or am I thinking of something else!!!!

jaybee -> RE: Why is my navigation messing up? (1/25/2005 9:50:18)
Yep! That's the one. Inline for horizontal Block for vertical. If you're not sure of the tags there's a complete list at www.w3schools.org

CelticDragon -> RE: Why is my navigation messing up? (1/26/2005 5:14:39)
I have been trying to mess with my navigation. The thing is that they are not buttons as such but they are an interface I designed with a slight gradient in the background sliced up into images and placed in order. Because of this I don't understand why there are gaps, the same gaps are present when I have them all in different cells or in the same cell.... can't figure it out at all!!!! EDIT: Interestingly if I get rid of the Doctype declaration (As is the case on the index page) they all sit perfectly and play nice!!!! I've tried putting the loose doctype in and that doesn't work either!

jaybee -> RE: Why is my navigation messing up? (1/26/2005 5:16:58)
I've just looked at it in Firefox and the gaps are gone. OK, so if taking out the doctype works then there must have been some invalid html in there. Did you validate it?

CelticDragon -> RE: Why is my navigation messing up? (1/26/2005 5:20:11)
sorry, was messing with the doctype and it all worked perfectly when the doctype was gone but I am sure that I should be able to do it with the doctype in place.... no?

Avick -> RE: Why is my navigation messing up? (1/26/2005 5:27:56)
I had a similar problem when I used strict 4.01 I changed it to transitional it seemed to work fine. On the page in question, I ran a check on it with both 4.01 and 4.00 and both came back with no problems.

CelticDragon -> RE: Why is my navigation messing up? (1/26/2005 5:41:55)
Hurrah for science!!!!! I don't know why it didn't work the last time I tried to use that Doctype!!! Thanking you lad!

Page: [1]

0.078125