/    Sign up×
Community /Pin to ProfileBookmark

Mysterious margin/padding errors

Copy linkTweet thisAlerts:
Oct 01.2005

[url]http://hakanai.net/diptych/vgc/index.htm[/url]
[url]http://hakanai.net/diptych/vgc/style.css[/url]

The site looks different in both firefox and IE. Both are wrong :/

In Firefox, the navigation menu should be flush up against the header, and the way I *thought* I had it coded, it should be flush up against the left side as well.

In IE, the top is placed correctly, but the bottom should stop immediately under the navigation bar, not continue downward for a few pixels. This also suffers from the same left positioning error as Firefox. Note that the red border is the outline of the UL element, but has zero height here.

I’ve tried setting every single padding and margin that I can think of to zero, and none have had any effect. I’ve done this same thing dozens of times, and I have never had this issue….what the heck is going on here?

For bonus points:

The navigation list is supposed to be centered. I’ve tried nesting and using margin: 0 auto; and I’ve tried converting to display: inline; and using text-align: center; I’ve also used every combination of the two I can think of, but the bloody thing just will not center. Any ideas?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@drhowarddrfineOct 01.2005 — Without studying it, you have two validation errors listing missing tags.

EDIT: One problem is you use a div in a list. Only a li is allowed as a list item.
Copy linkTweet thisAlerts:
@siskoauthorOct 01.2005 — Whoops, that was embarassing. Anyway, the problems still exist when the cleaner is placed in a different location.

Also, without placing a cleaner inside the list, the UL has a height of 0, despite there so obviously being elements in it. Why?
Copy linkTweet thisAlerts:
@KravvitzOct 01.2005 — Because the <ul> doesn't auto expand to contain the <li>s.

Adding overflow:auto to the <ul> should work to clear the <li>s this time.

http://www.csscreator.com/attributes/containedfloat.php

http://www.positioniseverything.net/easyclearing.html

http://css-discuss.incutio.com/?page=ClearingSpace

You should specify a font-family, color, and background-color on html and body.
Copy linkTweet thisAlerts:
@siskoauthorOct 03.2005 — Interesting reads and all but:

http://hakanai.net/diptych/vgc/test/index.htm

http://hakanai.net/diptych/vgc/test/style.css

It sort of works in Firefox...it just makes the navigation bar taller than it should.

It wreaks havoc in IE. The overflow doesn't work, and various other problems crop up that I never had to contend with.

The mystery paddings/margins still exist. It seemed to cause more problems, and not fix any....
Copy linkTweet thisAlerts:
@siskoauthorOct 03.2005 — Part 2:

I've since stripped out all of the positioning CSS (aside from the floats and non-semantic cleaners). Everything works correctly (except in Opera 7.5). I'm still not sure what the problem was, but at least it works now.
Copy linkTweet thisAlerts:
@siskoauthorOct 03.2005 — I've been tweaking the semantic cleaners all morning and everything just clicked into place. I'm not sure what the old problem was, but I like this new technique better.

Thanks for pointing it out!
×

Success!

Help @sisko spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...