9 replies [Last post]
alt731
alt731's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

Okey doke... here's a strange one for anyone whose interested:

I have a nab bar that seems to be aligned about 40px from the left of the window. But I can't figure out why its doing it! Here is a pic of it: http://tinypic.com/view.php?pic=ogxr3o&s=5

The only thing is, I really want to ensure that as you reduce the size of the window, all the buttons on the nav bar bunch up to remain on screen, as in the following pic:
http://tinypic.com/view.php?pic=2qb8a39&s=5

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
 
 
    <!--------------------
    ----------------------
 
    CSS STARTER
 
    ----------------------
    --------------------->
 
 
<style media="screen" type="text/css">
 
 
    /*********************
    **********************
 
    PARAGRAPHS
 
    **********************
    *********************/
 
 
p{text-indent:0px;
line-height:160%;
text-align:justify;
font-family:Verdana;
font-size:1.00em;
margin-left:20px;
margin-right:20px;}
 
 
    /*********************
    **********************
 
    NAV BAR
 
    **********************
    *********************/
 
 
#navlist{position:relative;
margin-top:0px;
padding-top:0px
margin-left:0px
padding-left:0px}
 
#navlist li{
padding-top:0;
list-style:none;
top:0;
height:28px;
display:block;
float:left;
margin-left:0px}
 
#navlist a{height:28px;
display:block;}
 
#Home{
width:140px;
background:url('/images/buttonhome.jpg') 0 0;}
#Home a:hover{background: url('/images/buttonhome.jpg') -0 -29px;}
#Home a:active{background: url('/images/buttonhome.jpg') -0 -58px;}
 
#Learn{
width:140px;
background:url('/images/button.jpg') 0 0;}
#Learn a:hover{background: url('/images/button.jpg') -0 -29px;}
#Learn a:active{background: url('/images/button.jpg') -0 -58px;}
 
#QuestionAnswer{
width:140px;
background:url('/images/button.jpg') 0 0;}
#QuestionAnswer a:hover{background: url('/images/button.jpg') -0 -29px;}
#QuestionAnswer a:active{background: url('/images/button.jpg') -0 -58px;}
 
#Thoughts{
width:140px;
background:url('/images/button.jpg') 0 0;}
#Thoughts a:hover{background: url('/images/button.jpg') -0 -29px;}
#Thoughts a:active{background: url('/images/button.jpg') -0 -58px;}
 
#Resources{
width:140px;
background:url('/images/button.jpg') 0 0;}
#Resources a:hover{background: url('/images/button.jpg') -0 -29px;}
#Resources a:active{background: url('/images/button.jpg') -0 -58px;}
 
    /*********************
    **********************
 
    NAV LINKS
 
    **********************
    *********************/
 
.nav a{
text-align:center;
font-size:0.7em;
color:#340e0b;
font-weight:bold;
text-decoration:none;
text-shadow: 0px 0px 0px #e9d2ca;
letter-spacing:0px;
padding-top:7px;}
 
.nav a:visited{
color:#340e0b;
text-shadow: 1px 1px 1px #e9d2ca;}
 
.nav a:hover{
color:fff7f8;
text-shadow: 0px 0px 0px #7b583a;}
 
.nav a:active{
color:fff7f8;
text-shadow: 0px 0px 0px #6a462c;}
 
 
 
    /*********************
    **********************
 
    CSS ENDER
 
    **********************
    *********************/
 
</style>
 
</head>
 
<body>
 
 
    <!--------------------
    ----------------------
 
    NAV BAR
 
    ----------------------
    --------------------->
 
 
<ul id="navlist">
 
<li id="Home">
<a href="index2.php"></a>
</li>
 
<li id="Learn">
<span class="nav"><a href="learn.php" style="height:21px;">LEARN MORE</a></span>
</li>
 
<li id="QuestionAnswer">
<span class="nav"><a href="qa.php" style="height:21px;">QUESTION & ANSWER</a></span>
</li>
 
<li id="Thoughts">
<span class="nav"><a href="thoughts.php" style="height:21px;">THOUGHTS</a></span>
</li>
 
<li id="Resources">
<span class="nav"><a href="resources.php" style="height:21px;">FURTHER RESOURCES</a></span>
</li>
 
</ul>
<br><br><br>
    <!--------------------
    ----------------------
 
    TEXT
 
    ----------------------
    --------------------->
 
<p>text correctly aligned at 20px from side of page</p>
 
<p>But nav bar above seems to be aligned at something like 40px from left for no apparant reason! how strange</p>
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9255
Points: 3261

How about a link to the page.

How about a link to the page. I don't see a reason off hand, so a live page … ?

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

alt731
alt731's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

http://www.thegoodmessage.com/test.php

thanks. its just in the testing stage at the mo:

http://www.thegoodmessage.com/test.php

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 4 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

UL has a left-padding by

UL has a left-padding by default (it may be left-margin on IE, I forget). It's right around 40px IIRC.

alt731
alt731's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

ah ha

Thanks. You don't know how I could get rid of it do you?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 4 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

How about changing the

Party How about changing the padding?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9255
Points: 3261

Thought of that, V

The OP's code shows he had already zeroed the padding, BUT …. What I didn't catch are the missing semi-colons.

@alt731: It is always a good practice to run your code through the validator.

#navlist{position:relative;
margin-top:0px;
padding-top:0px
margin-left:0px
padding-left:0px}
The browser sees only the position and margin-top properties. The following properties are ignored because of invalid values. That is, padding-top is ignored because without the semi-colon, it is parsed as "padding-top" for the property name, and since the value has not been terminated, it is read as "0px margin-left:0px padding-left:0px", and finally terminated by the closing brace.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

alt731
alt731's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

yay for validator! yay for gary!

oh wow, thanks very much. got to remember that validator!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 4 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

gary.turner wrote: The OP's

gary.turner wrote:

The OP's code shows he had already zeroed the padding, BUT …. What I didn't catch are the missing semi-colons. ...

Ah, yes. Dragonfly ignores invalid styling. I've got to stop assuming that the guidelines are followed.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9255
Points: 3261

To follow or ?

Maybe the problem lies with the guidelines being followed. In both html markup and in css, invalid tags, properties, and values are to be ignored. That's why we can use -[vendor]- prefixes and other proprietary tags/properties/values without causing issues with different UAs.

Firebug does the same, i.e. ignoring or not showing the invalid properties. I find it helpful in a case like this to compare Firebug's info to the actual css text. Fortunately, Firebug points to the line number in which to find the selector of interest. Presumably Dragonfly does likewise.

Wouldn't it be nice if they would show all the properties and mark the ignored/invalid lines?

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.