/    Sign up×
Community /Pin to ProfileBookmark

vertical-align: top; issues in IE

I cant seem to get my images to align correctly in IE. Can anyone help me?

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@KDLAJan 05.2007 — A link, or better description of the problem, might help us help you. ?

KDLA
Copy linkTweet thisAlerts:
@surfclevelandauthorJan 05.2007 — I am still learning sooooo much. Here is the link: http://www.easyfloodquote.com/

If you view it in IE you will notice that the "why flood insurance" button does not align to the top of the title image. I have tried several things to get the vertical alignment correct, but nothing is working.

Thanks!
Copy linkTweet thisAlerts:
@KDLAJan 05.2007 — Put this above your </head> tag:
<i>
</i>&lt;style type="text/css"&gt;
img {display: block; margin: 0; padding: 0;}
&lt;/style&gt;


The browser is treating your image as an inline element, rather than a block. Indicating to it display: block; will change that assumption.

KDLA
Copy linkTweet thisAlerts:
@surfclevelandauthorJan 05.2007 — YAY!!!! Thank you soo much!! I ended up putting it in a div tag aroud my anchor tags like thuis: <div style="display:block"> and it worked beaitifully!!

This was the first time I have ever participated in a forum, thanks again!
Copy linkTweet thisAlerts:
@WebJoelJan 07.2007 — Nice page. I like the image roll-over effect. And welcome to the Forums. ? You will find much help here.

I checked validation on your page, -there are some 'warnings' (which are actually 'error-lites'), like this:

[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>[/B]


<title>

Easy Online Flood Quote | Use The Easy Online Flood Quote Application

</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="generator" content="vBulletin 3.0.16" />

<meta name="keywords" content="Easy Flood Insurance Quote Online" />

<meta name="description" content="Fill out this easy flood insurance quote application today and get your flood insurance quote almost instantly" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
[B]<body >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>[/B]

<meta http-equiv="Content-Type" content=....etc etc..."[/QUOTE]
There should only be ONE "!doctype" and it belongs before the opening "<html>". The second one here is not required. And, there is another <head> in the second BOLD, and here it comes after the opening "<body>", which is not where it should be. :o You should close </head> before opening <body>.

I see that there is a repeated instance of the [U]closing[/U] </body> and </html> as well.

A good tool to have, it "[B]HTML-Validator by TIDY[/B]", available as a 'stand-alone' program, or, download "Firefox" the borwser and install the extention "HTML-Validator by TIDY" (these are all [U]FREE[/U], btw). For Firefox, the extention is 'self-installing'. TIDY will check your code and offer to correct any WARNINGS (these are mild errors, like proprietary tags/deprecated tags, incorrect order of tags, unrecognized tags, tags with proper closing/opening, etc.). TIDY will [U]not[/U] correct bona~fide ERRORS, but it does offer to show what is wrong and suggest why it is, and show link to the W3C site for more information. Generally, correcting "warnings" is enough to make an otherwise 'busted page' show properly. Your page shows 33 "warnings" that TIDY could correct with just ONE click of a button. ?
Copy linkTweet thisAlerts:
@surfclevelandauthorJan 07.2007 — Thank you so much. This is all great information. I will definatley download the validator.
×

Success!

Help @surfcleveland 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.19,
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,
)...