/    Sign up×
Community /Pin to ProfileBookmark

Can’t vertically-align HTML in IE

Copy linkTweet thisAlerts:
Oct 27.2010

I’ve been trying for 2 days to get my text to vertically-align middle in IE, but it just won’t listen. I’m building the site [url]www.acadianacomputerrepair.com;[/url] the title and menu items need to be aligned to the middle of their div containers, but they want to float to the top.

I’m setting the parent div’s as tables and the child as a table-cell. It works great in firefox and perfect, even in IE, on a simple html test page, but I can’t get it to work for the site. I don’t know what else to try.

Can someone help?

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — sorry, the correct address is www.acadianacomputerreapir.info, not .com.
Copy linkTweet thisAlerts:
@xeteaOct 27.2010 — It seems to work fine in Firefox 3.6.11, can you post a screenshot of it? Or did you post a link to the test site?
Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — Check my second post, it's got the correct link to the test site.
Copy linkTweet thisAlerts:
@xeteaOct 27.2010 — The second link doesn't work at all, I guessed it should be http://www.acadianacomputerrepair.info/ and that site worked fine for me.
Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — Stupid brain to fingers... Did you check it in IE? It should be aligned to the middle of its div, in the middle of the background. It works in Firefox, not in IE.

Everyone keeps telling me it's impossible, IE doesn't support the "Table" and "Table-Cell" display properties, so I made this test page:

www.acadianacomputerrepair.info/test2.html
Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — here is a screenshot:

http://www.acadianacomputerrepair.info/acr_test_image.png

Am I doing something different?

???
Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — It looks like my hosting software is re-writing the doct type. That's why it works on the test page and not the actual site. I'll see if I can correct it and let you know...
Copy linkTweet thisAlerts:
@talkinggoatauthorOct 27.2010 — SUCCESS!!!

I changed the doctype to <!DOCTYPE XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and everything in IE started lining up!

For anyone using DotNetNuke's hosting software, this solution worked for me:

Create an XML file named after your loaded skin, like this:

Example:default.html

XML: default.doctype.xml

Inside, place the doctype you want, escaping out the characters...

<SkinDocType>

<![CDATA[<!DOCTYPE XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]]>

</SkinDocType>

There should be nothing else in it... parse the skin package and reload. You're done.
×

Success!

Help @talkinggoat 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 4.26,
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,
)...