Issue With CSS/XHTML
Moderator: General Moderators
Issue With CSS/XHTML
-snip-
Last edited by AMT on Wed Sep 17, 2008 12:43 pm, edited 1 time in total.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: Issue With CSS/XHTML
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
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).
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
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
- 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
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.
- andyhoneycutt
- Forum Contributor
- Posts: 468
- Joined: Wed Aug 27, 2008 10:02 am
- Location: Idaho Falls
Re: Issue With CSS/XHTML
It appears to be an issue with the .post class. Might try adding "auto" at the end of your margin declaration for .post:
-Andy
Code: Select all
.post {
margin: 0 0 5em auto;
}Re: Issue With CSS/XHTML
Didn't fix itandyhoneycutt wrote:It appears to be an issue with the .post class. Might try adding "auto" at the end of your margin declaration for .post:
- andyhoneycutt
- Forum Contributor
- Posts: 468
- Joined: Wed Aug 27, 2008 10:02 am
- Location: Idaho Falls
Re: Issue With CSS/XHTML
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.
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
add:
padding-top: 5em;
to .post
and you should be good to go.
-OmniUni
padding-top: 5em;
to .post
and you should be good to go.
-OmniUni
Re: Issue With CSS/XHTML
The thing is, it looks fine in IE. I've messed around with padding and margin settings all day, I can't fix this.omniuni wrote:add:
padding-top: 5em;
to .post
and you should be good to go.
-OmniUni
It's probably something I have to change in my HTML or the method I generate the nav bar.
Re: Issue With CSS/XHTML
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!
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
^That didn't work either.
I just did
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.
I just did
Code: Select all
.post {
margin: 0 0 2.7em;
padding-top: 2.3em;
}Thanks for the help everyone.