/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Centering and spacing problems with IE

Copy linkTweet thisAlerts:
Nov 29.2006

[url]http://www.ianandjocelyn.com/[/url]
CSS file: [url]http://www.ianandjocelyn.com/main.css[/url]

I’m new to CSS and my site has two problems in IE. It looks fine in FF.

First, all of the content should be centered. I have 3 “boxes” contained in one division called “container”. This should be centered but it isn’t.

Second, the two bottom boxes should be moved down 13 pixels so that the two header graphics (“IAN & JOCELYN” and “BARKER”) are lined up against the black and white background. I have a “padding-bottom” tag that does this in FF but it doesn’t work in IE.

Any ideas? Thanks.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarNov 29.2006 — I don't think it's an alignment problem, the text appears to be correct in alignment, but under some bizarre interpretation that it should display it on the left as opposed to the right of the page, try adding this line:

body{
text-align: center;
}
to your CSS and see if that works.
Copy linkTweet thisAlerts:
@ianbarkerauthorNov 29.2006 — That worked. But for some reason it shifted all of my links at the top to the right. I have those positioned "relatively" because I couldn't find a better way to position them. I'm going to try and space them differently.

Any ideas on how I can move the body of the site down?
Copy linkTweet thisAlerts:
@scragarNov 29.2006 — I'm not sure what you mean by the later question, but rather than relative positioning I'm sure you could just let the fall into the automatic positioning if your body's content is all centred.
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Nov 29.2006 — Try this for your body and #container CSS
body {
cursor:default;
background: repeat url(graphics/background.gif) 0 40px;
margin: 0;
padding:0;
text-align: center;
}

#container {
position: relative;
width: 610px;
margin: 40px auto 0 auto;
padding: 0;
text-align:left;
}
The reason it didn't center in IE was because of your doctype. Its a partial doctype that causes IE to go in to quirks mode causing margin:auto; not to work. Change your doctype to this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
and margin:auto; will work. IE incorrectly centers block level elements using text-align:center. text-align:center; is the only way to center a div in IE5.5 and below.
Copy linkTweet thisAlerts:
@ianbarkerauthorNov 29.2006 — Ok. I fixed the menu graphics at the top so everything is centered now the way I want it.

As for my second question, I have a black horizontal bar at the top. I want to have "IAN & JOCELYN" and "BARKER" to run up flush against the line where the black turns into white. Right now in IE, it is too high. I'm using a "padding-bottom" tag to give space but it doesn't appear to be working. Does that make sense?
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Nov 29.2006 — Seems to work fine in IE6.
Copy linkTweet thisAlerts:
@ianbarkerauthorNov 29.2006 — _Aerospace_Eng_:

It looks like <!DOCTYPE HTML PUBLIC...> did the trick.

Thank you so much!!
×

Success!

Help @ianbarker 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...