Page 1 of 1

Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 2:08 am
by AMT
-snip-

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 3:28 am
by JAB Creations
I recommend and use Chris Pederick's Web Developer toolbar. Install it for Firefox, restart Firefox, and then use the Display Element Information tool under the Information menu to click on things to figure out what is where so you can determine what element to apply your margins, padding, etc to.

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 10:34 am
by AMT
I know it's an issue caused by the way I've created the top nav bar, and the fact it uses display: float.

I got that Firefox plugin and it really isn't helping me (or telling me anything I don't already know). :(

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 10:40 am
by matthijs
The way to sort out problems like this and learn something in the process is (besides using the webdev toolbar as suggested):
- use some sort of reset to start with (give everything zero margins and paddings). * {margin:0;padding:0;} works as a quick hack
- give important elements a background color
- check in browsers to see were elements start and end
- add margins and paddings
- check in browsers what happens

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 1:32 pm
by AMT
I know that the fact the navigation bar is floated has something to do with the problem (if it is not the problem). If i set the display mode back to block the links do not align proper.

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 1:39 pm
by andyhoneycutt
It appears to be an issue with the .post class. Might try adding "auto" at the end of your margin declaration for .post:

Code: Select all

.post {
    margin: 0 0 5em auto;
}
-Andy

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 2:20 pm
by AMT
andyhoneycutt wrote:It appears to be an issue with the .post class. Might try adding "auto" at the end of your margin declaration for .post:
Didn't fix it :(

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 2:24 pm
by andyhoneycutt
The tricky thing about CSS is that the rules cascade down to the elements beneath. Work your way up from the InnerHTML of the title object and do what others have suggested previously: start setting margins and padding to 0 all the way up and work your way back down to isolate the problem.

In this situation I would probably go from the .post class and auto all margins (plus whatever you've currently set their values to) one at a time until the problem is either corrected or you've ruled out margins-auto as the problem.

-Andy.

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 4:22 pm
by omniuni
add:

padding-top: 5em;

to .post

and you should be good to go.

-OmniUni

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 5:14 pm
by AMT
omniuni wrote:add:

padding-top: 5em;

to .post

and you should be good to go.

-OmniUni
The thing is, it looks fine in IE. I've messed around with padding and margin settings all day, I can't fix this.

It's probably something I have to change in my HTML or the method I generate the nav bar.

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 5:29 pm
by omniuni
I'm afraid not. It's just that IE implements a few things incorrectly. The fix I posted should work correctly in Firefox, Safari, Google Chrome, etc. If you need that to NOT affect IE, do:

padding-top: 5em; > padding-top: auto;

Which will make the CSS non-standard, but due to a parsing bug, it will over-write the 5em with "auto" only in IE.

Remember, always test your CSS in Firefox or another standard browser first, and fix it for IE, not the other way around, or you'll likely find that you were relying on at least a few of IE's bugs to make it render correctly, and it'll be a hassle to fix for everything else!

Re: Issue With CSS/XHTML

Posted: Wed Sep 03, 2008 8:15 pm
by AMT
^That didn't work either.

I just did

Code: Select all

.post {
    margin: 0 0 2.7em;
    padding-top: 2.3em;
}
because I'm sick of messing with it. The space in IE7 looks better than no space at all in the rest of the browsers.

Thanks for the help everyone.