Navigation Problems

[calette]

So I'm trying to get my navigation in my header to be just so, and there's an outside style element not anywhere in my css affecting it. Or at least thats what Chrome inspector is telling me.

 

You can view the site here: https://secure9.securewebexchange.com/comicbookshoppe.com/

 

Right now its just a simple table with an inline list. Here's the code.

 

<td align="left" valign="bottom">

<ul id="navList">

<li><a href="index.php">Home</a></li>

<li><a href="comicbookshoppe.com/blog/">News</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Events</a></li>

</ul>

</td>

</table>

 

Here's the CSS

 

#navList {

vertical-align:bottom;

color:#fff;

float:left;

}

 

#navList li {

float:left;

list-style-type:none;

border-right:1px solid #fff;

white-space:nowrap

}

#navList li a {

display:block;

padding:0 10px;

font-size:30px;

text-transform:uppercase;

text-decoration:none;

font-variant:small-caps;

}

 

However, its not placed right. There's already a padding on it, I can't place it where I want to. Stretching everything. Chrome inspector id's the code also attached to the ul as such;

 

-webkit-padding-start: 40px;

display: block;

list-style-type: disc;

margin: 1em 0px 1em 0px;

 

I've looked all over the darn place and I can't find it. Not in the stylesheet, not anywhere. I am going out of my flipping mind just trying to do a simple navigation menu. Any help would be so very very appreciated.

[calette]

Anyone? I really need help on this. Its driving me crazy. I've attached all the css I know of affecting the area, but is there something I'm not thinking of?

[germ]

Not really sure what you're looking for.

 

Does this do what you want:

 

<ul id="navList" [color="#FF0000"][b]dir="rtl"[/b][/color]>

That scooted the text to the left in the web developer plugin in Firefox.

 

Did you know you have a reference to the stylesheet in the footer (or thereabouts):

 

<!-- body_eof //-->

<!-- footer //-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<br>

<div id="footer">

:unsure:

[calette]

The reference to the stylesheet was there to begin with - I never added it. Part of the default template perhaps?

 

Anywho, the dir="rtl" at least lets it stick better to the sides, but I'm still getting large amounts of space around it. Its most noticeable in firefox and chrome (which I now understand to be built with or around webkit?). It now seems to be a question of working around that. Any ideas/suggestions?

[germ]

Still not sure what you're after.

 

You should remove the second reference to the stylsheet.

 

You can try something like this:

 

#navList li {
float:left;
list-style-type:none;
border-right:1px solid #fff;
white-space:nowrap;
[color="#FF0000"]	line-height:25px;[/color]
}

Sometimes after changing the stylesheet you have to hold the <Ctrl> key down while doing a page refresh in the browser to force the browser to reload all contents from the server, including the newly changed stylesheet.

 

This works with IE and Firefox.

[playcraft]

The reference to the stylesheet was there to begin with - I never added it. Part of the default template perhaps?

 

Anywho, the dir="rtl" at least lets it stick better to the sides, but I'm still getting large amounts of space around it. Its most noticeable in firefox and chrome (which I now understand to be built with or around webkit?). It now seems to be a question of working around that. Any ideas/suggestions?

remove the dir="rtl" and add

display:inline;

to #navList

[germ]

Firefox didn't like that suggestion...

:blush:

[playcraft]

Firefox didn't like that suggestion...

:blush:

Which suggestion? I tested the display:inline with firefox it works.

[germ]

It might work but it makes the problem worse.

:o

[playcraft]

It might work but it makes the problem worse.

:o

#navList {
vertical-align:bottom;
color:#fff;
float:left;
line-height:45px;
padding:0px;
display:inline
}

Makes the problem worse?

[germ]

Yes.

 

It puts him back where he was BEFORE my suggestion (at least it does in the web developer plugin in Firefox).

[playcraft]

Yes.

 

It puts him back where he was BEFORE my suggestion (at least it does in the web developer plugin in Firefox).

It shows up what he wants in FireFox 3.0.11.

[germ]

All I can say is what I see.

 

When I try your suggestion he's back to square one.

[playcraft]

All I can say is what I see.

 

When I try your suggestion he's back to square one.

Can someone else jump in here to confirm?

[germ]

You'd need to see what it looked like BEFORE to see the problem.

 

A second opinion isn't going to do much here.

[playcraft]

You'd need to see what it looked like BEFORE to see the problem.

 

A second opinion isn't going to do much here.

Screenshot?

[germ]

I'm not here to argue, fight, b*tch, moan, complain, or be an a$$.

 

The original poster can try what he wishes.

 

You only see half a picture, and I don't have the other half.

 

When he comes back he can try what you posted - I have no problem with that.

 

Just voicing my opinion that from where I sit it appears to be an exercise in futility.

 

Maybe I'm wrong.

 

If so it's not the first (or last) time that would be true.

[playcraft]

I'm not here to argue, fight, b*tch, moan, complain, or be an a$$.

 

The original poster can try what he wishes.

 

You only see half a picture, and I don't have the other half.

 

When he comes back he can try what you posted - I have no problem with that.

 

Just voicing my opinion that from where I sit it appears to be an exercise in futility.

 

Maybe I'm wrong.

 

If so it's not the first (or last) time that would be true.

Well at least what version of firefox are you viewing this in? I would like to know the reason you are seeing different from what I am. I was not arguing but trying to figure this problem out as it is unusual.

[Guest]

However, its not placed right. There's already a padding on it, I can't place it where I want to. Stretching everything. Chrome inspector id's the code also attached to the ul as such;

 

-webkit-padding-start: 40px;

display: block;

list-style-type: disc;

margin: 1em 0px 1em 0px;

 

I've looked all over the darn place and I can't find it. Not in the stylesheet, not anywhere. I am going out of my flipping mind just trying to do a simple navigation menu. Any help would be so very very appreciated.

This is at the very bottom of your stylesheet.css

dir{
-webkit-padding-start: 0px;
padding:0;
margin:0;
}

ul{
padding:0;
margin:0;
}
menu{
padding:0;
margin:0;
}

[h2oHOH]

This is at the very bottom of your stylesheet.css

yes bottom styles overide top...

i think:

#navList li {
display: inline;
}

where is

#navList ul{
}