/    Sign up×
Community /Pin to ProfileBookmark

IE6 breaking my divs at small resolution if there’s an IMG

Copy linkTweet thisAlerts:
Jul 25.2007

Here’s my problem and it is a doozy, at least to me. At resolutions around or below 800, if my flexible divs contain an image, IE6 breaks them, apparently because the image stops fitting inside the div (though it shouldn’t). Firefox, of course, does not.

Here’s my code:

[CODE]#content {
background: transparent url(graphics/rpar.gif) 100% 0 repeat-y;
padding: 0 80px 35px 4px !important;
padding: 0 100px 35px 0;
top:0;
margin-right:-4px;
position:relative;
zoom: 1;
}

#contentback {
margin: 0 177px 0 177px;
background: #e3cfae url(graphics/parch.gif) 100% 0 repeat;
top:0;
position:relative;
zoom:1;
}[/CODE]

I attached two screenies so you can see what happens. I would greatly appreciate some help with this. You could save me a ton of work and headaches if it’s a fairly easy fix.

[upl-file uuid=733f0e4a-6dca-432e-9a7e-e87f9da4aae1 size=95kB]screen1.jpg[/upl-file]

[upl-file uuid=825b518b-f941-4e1c-8c8e-3fcc95c86d16 size=55kB]screen2.jpg[/upl-file]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FarlandauthorJul 26.2007 — Sorry, see next post.
Copy linkTweet thisAlerts:
@FarlandauthorJul 26.2007 — Update: Actually it is weird, but in IE6 at 800 resolution, the top of the div is shifted down. I've attached another screen to show what I mean. Anyone have any idea? Should I attach my code in its entirety?

The site is up at www.farlandworld.com, and www.farlandworld.com/darkbattles.html will show you the problem in IE6 at small res.

[upl-file uuid=7c2b0364-db9e-4ac7-8fc5-45c65a771102 size=76kB]screen3.jpg[/upl-file]
Copy linkTweet thisAlerts:
@FarlandauthorJul 30.2007 — *Bump*

Is this a stumper, then? ?
Copy linkTweet thisAlerts:
@WebJoelAug 01.2007 — I've just about 20-mins. looking at this in different browsers/resolutions and I do not see what you mean.

From the first URL's code, -this puzzles me though:#content {

background: transparent url(graphics/rpar.gif) 100% 0 repeat-y;

[B]padding: 0 80px 35px [COLOR="Red"]4px[/COLOR] !important;

padding: 0 80px 35px 0;[/B]

top:0;

[B]margin-right:[COLOR="Red"]-4px[/COLOR];[/B]

position:relative;

zoom: 1;

}[/QUOTE] The !important provides and extra 4-px left for IE, the next is for all other browsers, -then you yank the whole thing to the right by (negative)4px... What is this supposed to do? It seems contradictory, or redundant. This shoves the DIV #content seeimngly needlessly. ? What am I missing here?

I am curious as to what this is about also:#foot {

height:25px;

margin: -25px [B]111px[/B] 0 143px [B]!important;[/B]

margin: -25px [B]61px[/B] 0 143px;

padding-bottom: 10px;

background: transparent url(graphics/bot.gif) 0 0 repeat-x;

clear: both;

text-align:center;

position:relative;

overflow:hidden;

}[/QUOTE] -Why the need (and is this part of some larger problem)?. "negative margins" gives me the creeps.... If 'negative margin' more than a few pixels you are are seriously compensating for some agregious shortcoming that exisits somewhere else. :eek:

Your second URL has some coding errors. See screenshot. ?

[upl-file uuid=3f28fa80-c08d-4cf5-b665-d62a50ffaa16 size=13kB]ScreenHunter_2.gif[/upl-file]
Copy linkTweet thisAlerts:
@FarlandauthorAug 01.2007 — Thank you. ?
×

Success!

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