Sat, 2011-12-31 01:53
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>
Sat, 2011-12-31 12:41
#1
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
Sat, 2011-12-31 14:37
#2
http://www.thegoodmessage.com/test.php
thanks. its just in the testing stage at the mo:
Sat, 2011-12-31 15:29
#3
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.
Sat, 2011-12-31 17:51
#4
ah ha
Thanks. You don't know how I could get rid of it do you?
Sat, 2011-12-31 18:29
#5
How about changing the
How about changing the padding?
Sat, 2011-12-31 19:19
#6
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}
cheers,
gary
Sat, 2011-12-31 19:42
#7
yay for validator! yay for gary!
oh wow, thanks very much. got to remember that validator!
Sat, 2011-12-31 19:49
#8
gary.turner wrote: The OP's
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.
Sat, 2011-12-31 22:06
#9
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