/    Sign up×
Community /Pin to ProfileBookmark

background issues

Copy linkTweet thisAlerts:
May 09.2005

Firefox and IE are interpreting this in two different ways. IE has got it right:

[code]
#wrap {
background: url(../graphics/side-bar.jpg) repeat-y left top;
text-align: left;
margin: auto;
width: 780px;
min-height: 100% }
* html #wrap {height:100%}
[/code]

see [url=”http://www.cityofpoulsbo.com/citysite/sample pages site folder/index.asp”]here[/url] for example. The background only goes as far as the “main” div does, when it should go down as far as the wrap div does (in FF). What do I need to change?

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326May 09.2005 — Firefox and IE are interpreting this in two different ways. IE has got it right:[/QUOTE]Well that's almost never the case. I don't see enough difference there to make a difference. IE's botched box model is causing far worse problems in the horizontal direction. Also there's a Javascript error:

Error: tP is not defined

Source File: http://www.cityofpoulsbo.com/citysite/sample%20pages%20site%20folder/index.asp

Line: 36
Copy linkTweet thisAlerts:
@hooloovoo24authorMay 09.2005 — Okay, maybe not on the index page. But if you go to the clerk's page for instance, (In the drop down menu under departments) you can see it messing up. And I'm not getting any javascript error...
Copy linkTweet thisAlerts:
@hooloovoo24authorMay 12.2005 — Please, does anyone know how to fix this problem with the background? I really need to fix it, but can't for the life of me figure it out.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Maybe I'm blind but they look the same to me in IE and FF.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Ah, I see it. If that's a div on the left, holding the nav, make the height:100%;
Copy linkTweet thisAlerts:
@hooloovoo24authorMay 12.2005 — Well...that sort of helps. It reaches the bottom of the links now. BUT I want it to reach the bottom of the page, like it does in IE. Check out what it's doing now in FF.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — then instead of a % hard code it in px. Experiment til you find the right number. My starting point (a guess) would be around 500px. If they still show it differently, then use the !important hack. Code the value that works in FF 1st, and follow the value with !important; Then in the same set of style rules code the attribute again with the value that works in IE, and DON'T put the !important. FF (and opera) will use the 1st value, IE the 2nd.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Ok, forget the hack part. I just checked and Opera shows it like IE does, so the hack will probably mess it up in Opera. You could try though.
Copy linkTweet thisAlerts:
@hooloovoo24authorMay 12.2005 — Well, not all the pages are going to be the same height in px though. Some have more content than others, some have more "community links" than others. But thank you. I have it working good enough for now. At least now, it works perfectly in IE and in FF the background shows as far as the links. So even if it isn't as pretty in FF it is still functional, so for now it'll do.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Well ok, but even if the pages differ in height, you could code that value on each page. Actually, if you set NO height for the div at all, it should expand to just large enough for the content, in all 3 browsers.
Copy linkTweet thisAlerts:
@hooloovoo24authorMay 12.2005 — if I put the code on each page, I would have to have the css inline on the page, instead of in an external file, which is what I have now. And I didn't have a height for the div before, and it wasn't working, I'm not sure why.
×

Success!

Help @hooloovoo24 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.1,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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