/    Sign up×
Community /Pin to ProfileBookmark

Works everywhere but IE (Hack missing?)

XHTML

[code]
<div id=”footer”>
<div id=”logo”>
<img src=”footer.gif” id=”loon_logo” alt=””/>
</div>
<div id=”footerText”>
<div id=”footerLinks”>
<p>| <a href=”#”>Home</a> | <a href=”#”>Links Index</a> | <a href=”#”>Publications</a> |
<a href=”#”>Related Sites</a> | <a href=”#”>HWW</a> |</p>
<p>
| <a href=”#”>What’s New</a> | <a href=”#”>About Us</a> |
<a href=”#”>Topics</a> | <a href=”#”>Publications</a> | <a href=”#”>Weather</a> |
</p>
<p>| <a href=”#”>Fran&ccedil;ais</a> | <a href=”#”>Contact Us</a> | <a href=”#”>Help</a> | <a href=”http://www.ec.gc.ca/search_e.html”>Search</a> | <a href=”#”>Environment Canada Site</a> | <a href=”#”>Canada Site</a> |</p>
</div>
<div id=”topPage”>
<a href=”#autop”><img src=”pageup.gif” title=”Top of page” alt=””/></a>
</div>
<div id=”disclaimer”>
<div id=”leftDisc”>
Last update: 2003-07-18
</div>
<div id=”rightDisc”>
<a href=”#”>Important Notices</a>
</div>
<div id=”pageUrl”>
URL of this page: [url]http://this[/url] and that dot com
</div>
</div>
</div>
</div>
[/code]

CSS…

[code]
**/
/* Footer styles*/
/**/
#footer{
clear:both;
padding-top: 15px;
width: 600px;
}

#footer #logo{
float: left;
width: 86px;
height: 69px;
margin-left: 134px;
}

#footer #footerText{
float: right;
width: 380px;
font-size: 70%;
border-top: 3px solid #508CC8;
}

#footer #footerText P{
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
}

#footer #footerText #topPage{
background-color: #508CC8;
width: 100%;
text-align: right;
}
#footer #footerText #topPage img{
border: 0px;
}
[/code]

In Mozilla, great. In Netscape 7, great. In IE, it doesn’t align properly. Instead of the logo being parallel to the left of the text, it comes and places itself between the content of the page and the footer text. I figure its probably due to a hack that I’m missing.

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonJan 19.2004 — I'm using Win XP Home and viewing your page using Moz 1.4 1.5, Moz FB 0.6 0.7, NN 7.02 7.10 and it looks equally broken in all of them. On the other side of the coin it looks completely different (but still broken) in IE 6. You got a screen shot of what it should look like, I'll re-code the CSS to try and make it work.

Edit: I have managed to avoid all CSS hacks so far, I hope to continue this trend.
Copy linkTweet thisAlerts:
@FangJan 19.2004 — Change the first, add the second:
#footer #logo{
float: left;
}
#loon_logo{
width: 86px;
height: 69px;
margin-left: 134px;
}


[B]lavalamp[/B] wrote:
I have managed to avoid all CSS hacks so far, I hope to continue this trend.[/QUOTE]
That is the only way ?
Copy linkTweet thisAlerts:
@DanDigiManauthorJan 20.2004 — Great! It works!

So if I have images, I should always specify their dimensions in CSS? At least those who impact the layout I guess?

For me, in Firebird 0.7 and Netscape 7.1 it worked fine. Now, I can add IE 6.0.2xx ?
Copy linkTweet thisAlerts:
@FangJan 20.2004 — It's always good practice to define image height and width
×

Success!

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