Click to See Complete Forum and Search --> : list alignment issues

01-30-2007, 09:54 AM
Yep it's me again. I was wondering if you guys/gals could take a looksey at something. This (http://www.patsdesign.com/template_2_no_thumbs.htm) is the page that I have been practicing/trying to learn css on. Now at home it looks great but here at work it goes wonky. Most of the issues I am sure I can iron out, but there is one that mystifies me.
Why doesnt the words in the navigation line up left justified. There is a slight stagger to them.

Any suggestions?

Thank you

01-30-2007, 10:11 AM
I just installed Opera and Firefox and none of the issues show. Now I am wondering if explorer here at work is going in to quirks mode or not. Still please take a look and let me know what your opinion is.

01-30-2007, 10:50 AM
Yes, IE is in Quirks mode, because you're using

<?xml version="1.0" encoding="utf-8"?>

IE 6 doesn't understand this line (I think this has been fixed in 7).

But, if you're asking why when an item wraps to a second line it doesn't line up with its first line, it's because you have a padding-left of 3px on the A tags in the list. You should be able to fix this by setting the A to display: block.

Both Firefox and IE have browser add-ons that make debugging this stuff much easier. Search for "web developer toolbar" in Google and you'll see them.

01-30-2007, 12:19 PM
Actually you answered my question with the first answer. Ok so how do I go about determining the best xml tag to include?

The second answer you gave will undoubtfully be useful in the future. The copy on those lines should not be going to the next line. I think that due to ie going into quirks mode it made my fonts larger and caused that issue. Opera is actaully making some of the copy a tad smaller as well as some of the spacing.

Also, thankyou for the toolbar tip. I will search for that when I get home tonight.

01-30-2007, 12:30 PM
Ok so I took the mentioned line of code out and that fixed alot (http://www.patsdesign.com/template_2_with_thumbs.htm). I will fix the display:block tonight and hopefully that will fix the alignment problems.

But now I have another question. In Opera and Firefox the spacing is fine, but in ie there is a gap added above the ugly arse graphic/collage (don't blame me it was what I was given lol) Now I assumed this was due to quirks mode. But, didn't taking that mentioned line of code out fix that?

Also when I was asking about the stagger I meant when the lines were not wrapping.

02-01-2007, 10:08 AM
I am pretty sure I added the display:block properly where needed but it still hasn't fixed the alignment issues. Plus I think it is still going into quirks mode. Could someone please take a look and see if you see a problem. Site (http://www.patsdesign.com/template_2of2_with_thumbs.htm)

Thank you

02-01-2007, 10:48 AM
No, it's not still in quirks mode. Have you tried either of the web developer toolbars?

You'll have to be more specific about what alignment issues you're having. In both Firefox and IE 6, all the menu items are left aligned perfectly.

02-01-2007, 10:52 AM
I did install the firefox dev bar. I have taken a look at then and played with the options but I haven't had as much free time as I like in the evenings to really get into how they work.
If you don't mind me asking, how do you know when ie is in quirks mode.

02-01-2007, 10:58 AM
Just broke the rules and installed the dev tool here at work. Ill check it out on my breaks a bit more.

02-01-2007, 11:07 AM
IE is in strict mode whenever you have a full doctype. You have a full doctype, so it's not in quirks mode. This page http://www.satzansatz.de/cssd/quirksmode.html has a piece of javascript you can try to test. If it's in quirks mode it'll say something like "BackCompat".