/    Sign up×
Community /Pin to ProfileBookmark

new site not lining up

Copy linkTweet thisAlerts:
Apr 27.2006

I am developing a new site, using all css/div’s right now, but I can’t quite get it to look right in IE. In Firefox, everything looks fine, but in IE, there is a margin right below the header image and above the bar at the top with text in it. Also, my footer image at the bottom seems to be getting hidden a little. It should look the same as the bar at the top, just turned around, but it seems to be getting overlayed by something. If someone could help me, it would be greatly appreciated. Here is a test url:

[URL=http://681681.web001.whp.server-hosting.com/index2.asp]Link[/URL]

Thanks!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelApr 27.2006 — where your css currently says
[CODE]body {
margin:0 0 25px 0;
padding:0px;
background-image:url(/images/bg.gif);
background-repeat:repeat-x;
}[/CODE]
add this:
[CODE][B]body, html {padding:0; border:0; margin:0;}[/B]
body {
margin:0 0 25px 0;
padding:0px;
background-image:url(/images/bg.gif);
background-repeat:repeat-x;
}[/CODE]

The part is BOLD re-sets IE's faulty box model to "zero" for the three selectors declared. You're probably picking-up or inheriting a border, a padding or a margin.

Note that this first css only affects IE, as all other browsers do this by default. Any added margins or padding or borders created later on, are built upon an assumption of being "zero" to begin with. IE assumes a few pixels, which always messes-up any additional amounts you state later on.
Copy linkTweet thisAlerts:
@jrthor2authorApr 27.2006 — I added your code, but that sill didn't help.

I got the footer image to show up correctly, I didn't have a height on my ftr style.

Also, now that I put some content on the page, in IE, the content is below the left nav bar, it should be at the top. Also, how do I get the left nav bar to extend all the way to the bottom when the page has a lot of content on it?

Here's the link again: [URL=http://681681.web001.whp.server-hosting.com/index2.asp]Link[/URL]

Thanks again!!
Copy linkTweet thisAlerts:
@jogolApr 27.2006 — in IE, the content is below the left nav bar[/QUOTE]
explanation: float drop bug

how do I get the left nav bar to extend all the way to the bottom when the page has a lot of content on it?[/QUOTE]
solution: faux columns
Copy linkTweet thisAlerts:
@jrthor2authorApr 27.2006 — Thanks for the reply, but could someone help me with my code to fix these.

I have the content now up next to the left nav, but I still can't get the "gap" in between my header and top bar to go away in IE, and I can't get the left nav to go all the way to the bottom in IE (I tried the faux technique and couldn't get it to work).

Thanks.
Copy linkTweet thisAlerts:
@ray326Apr 28.2006 — Try a #hdr img { display:block }.
Copy linkTweet thisAlerts:
@jrthor2authorApr 30.2006 — I put the #hdr img {display: block;} in, but id did not fix anything. Can anyone help me fix these 2 issues I have (the header image not being up agians the bar at the top and getting the left navv to extend to the footer)?

Thanks again for everyone's suggestions so far.
×

Success!

Help @jrthor2 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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