Issue With CSS/XHTML

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Issue With CSS/XHTML

Post by AMT »

-snip-
Last edited by AMT on Wed Sep 17, 2008 12:43 pm, edited 1 time in total.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Issue With CSS/XHTML

Post 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.
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Re: Issue With CSS/XHTML

Post 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). :(
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Issue With CSS/XHTML

Post 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
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Re: Issue With CSS/XHTML

Post 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.
User avatar
andyhoneycutt
Forum Contributor
Posts: 468
Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls

Re: Issue With CSS/XHTML

Post 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
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Re: Issue With CSS/XHTML

Post 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 :(
User avatar
andyhoneycutt
Forum Contributor
Posts: 468
Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls

Re: Issue With CSS/XHTML

Post 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.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Issue With CSS/XHTML

Post by omniuni »

add:

padding-top: 5em;

to .post

and you should be good to go.

-OmniUni
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Re: Issue With CSS/XHTML

Post 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.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Issue With CSS/XHTML

Post 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!
AMT
Forum Newbie
Posts: 6
Joined: Sat Feb 26, 2005 11:35 pm

Re: Issue With CSS/XHTML

Post 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.
Post Reply