17 replies [Last post]
dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

http://home.dejazzd.com/jdapkiewicz/CSSCREATOR/Test_Template.htm

http://home.dejazzd.com/jdapkiewicz/CSSCREATOR/_masterSTYLE.css

These are the files. In IE6 there is about a 3 px gap to the left of the images, and on the bottom of the bottom image. I have a feeling if the images displayed side by side like they are supposed to the gap would be gone. In Firefox and Netscape 7 everything is as it should be. My CSS and XHTML validates. Where did I go wrong?

Thanks for any help.

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 16 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

IE 6, space around images?

I don't think it's you; check this out for a possible explanation & fix (scroll down for what happens with images):

http://www.positioniseverything.net/explorer/threepxtest.html

ian
ian's picture
Offline
Enthusiast
South Carolina
Last seen: 16 years 26 weeks ago
South Carolina
Timezone: GMT-5
Joined: 2004-11-08
Posts: 103
Points: 0

IE 6, space around images?

Helen, You're on fire today!

-clever quote at the bottom of my post-

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

IE 6, space around images?

EXCELLENT. That seemed to do the trick......
However, by accounting for the 3px gap at the bottom of the images, somehow I lose 3 pixels on the bottom of the "featured Products" orange bar?? :?:

Thanks a ton for that link tho Laughing out loud

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 16 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

IE 6, space around images?

"on fire" ... or "home sick with the flu again and bored." You make the call, ian. Wink

I wish I could help further, dappy, but I don't even run Windows, so all these IE problems are sheer theory for me, sorry! :? (An acutal guru will be able to help, though.) Could you specify a height on the orangeRULE in ems?

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

GAPS!!!

No matter what I do it seems that IE wants to put a 2-3px gap BELOW images. Even if I have the width and height set to exactly the size of the image and place a border on the <div> IE renders a gap on the bottom of the image. Whats goign on?

I fixed the left showing gap with the link above.
In the links posted, I compensated for the "below image" gap by setting an IE only ID for the Orangerule below it with a -3px margin. This moved the orange rule up, but ends up chopping off the bottom of the Orangerule and not showing the bottom border of the rule??

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 16 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

IE 6, space around images?

Did you try eliminating all whitespace in your relevant html code? That appears to do odd things in IE sometimes.

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

IE 6, space around images?

I tried that and nothing. I think what I'm going to do, since I all I know about CSS and most of what I know about HTML I learned in the last 2 weeks, is start over using the layout generator on this page, then tweak it to work properly. It is essentially a 2 column with header and footer. Thanks for all your help Helen, I'm sure Ill be back with more problems Smile

euio
Offline
Enthusiast
Last seen: 16 years 10 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

IE 6, space around images?

I think there's also a few more pixel gap between the top of the browser to your header too in IE6. Shock

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

IE 6, space around images?

CRAP. Why is that there??? GRR.... I hate IE. Everyone should use a mac.
I can live with extra space above the header cause it wont really affect the experience, unless that is causing all my other problems. Do I have my doctypes defined correctly? I validated everything...

<!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">
[/code]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE 6, space around images?

IE6 seems ok if you increase the width of #mainCONTAINER to 777px. By that I mean it puts the images on the same line. It does however leave a 3px gap between the left edge of the the right column and the right edge of the left column.

I haven't been able to get IE to do anything about that gap. None of the normal tricks seem to work.

I can make the images disappear though (put #content {position:relative} and see IE decide to hide them). :?

Since your header and left navbar are of known dimensions, have you considered using absolute positioning. it might not be the neatest solution but it may get you there with some hair left!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE 6, space around images?

also see above.

I have fixed it so it works, see here

What I did
- remove float:right from crumbNAV and orangeRULE
- add #content {position:relative; margin-left: 141px}
- add two IE style hacks

* html #mainCONTAINER {width: 777px}
* html #content {left:-3px;}

[edit]
There maybe some combination of height:1%; (the standard method to overcome IE 3px jog problem) that will not cause the images to disappear and remove the 3px jog, but I couldn't find it.

euio
Offline
Enthusiast
Last seen: 16 years 10 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

IE 6, space around images?

hello! off topic:

Chris...S can you refer me to a resource that explains the use of '*html' ? :oops: thanks a bunch!!!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE 6, space around images?

I read about it on the IE Three Pixel Gap page and it refers to it as the tan hack

In a nutshell, the root element in an HTML document is <html>. However in IE <html> is descended from another element (of unknown name). So ...

* html

means the html element descended from any other element. In all browsers except IE, <html> is not descended from anything, so they will ignore the rule. IE however will process it. So to apply an IE only style to something prefix its style rule by "* html".

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

BRILLIANT!!

Thanks for helping me out. But i have more questions Smile I have not gotten a chance to examine the CSS and HTML you edited yet but after lunch I shall be delving into it. Basically, WHY does that fix my problems? And how can I apply this to future problems?

I'm also having problems with the entire Windows OS not making fonts bold (works perfectly on my lovely mac!) but I'll save that for later.

Thanks again chris

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 16 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

IE 6, space around images?

Chris can give you a real answer, but removing floats where possible seems to really help IE with things like collapsing horizontal margins.
Excellent article on un/collapsing margins by Eric Meyer if you haven't seen it yet

Re. the missing bold font-weight, that's weird indeed. Can't recall hearing about that bug before - looks like your CSS syntax is correct, though. Could it be a setting in your WinIE itself, maybe sorta kinda?

dappy wrote:
Everyone should use a mac.

Music to my ears. Stick around, Dappy! Laughing out loud

(I'm envious of your having both OS's, though - I can never test on IE myself without resorting to Broswercam etc. I've got a whole vocabulary of bugs like "3-pixel jog" that I've never even seen with my own eyes. Makes ya kinda paranoid after a while ... Wink )

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE 6, space around images?

Why does it fix your page?

Web browsers are not perfect. Your problem seems to stem from an aberration in the way IE renders the page when there are floated objects.

Also, given the complexity of CSS & HTML there is often more than one way to achieve the same page layout. The different methods will have different advantages. That doesn't necessary make one more right than another.

More specifically:
IE was placing the three pix jog in #mainCONTAINER to the right of leftnav. There are techniques to prevent IE rendering with this problem, I couldn't get them to work in this instance. So the only solution I could come up with was to try to shift #content 3px left.

Shifting #content 3px left isn't straight forward because of #leftnav. Although it looks like the left edge of #content is to the right of #leftnav its not. The left edge of #content is up against the leftedge of #mainCONTAINER. The browser knows not to render any content in the space occupied by the float element (#leftnav). So playing around with margins and padding will have no effect. The browser insists (correctly) on rendering everything to the right of the float:left element.

In order to shift #content 3px left, first I need to fix #content. Thats done by making it position:relative. Then we need to specify a margin to avoid #leftnav, hence margin-left:141px. But, that won't affect #crumbNAV or #orangeRULE as they are float:right. So remove float:right from those two. In actual fact, it wasn't necessary to float those two - they look intended to occupy whole width of #content anyhow.

Everything still displays ok in FF. And everything is setup to introduce a couple of special rules for IE. By messing around with #mainCONTAINER I know it needs to be 777px wide to have the two images placed horizontally adjacent. So thats the first rule. Then to remove the unsightly 3px gap, add another rule to shift #content 3px to the right of its normal position. Hence #content {left:-3px;}

---

Now you know all this, could the same design be accomplished without requiring hacks?

Probably. Your header and leftnav are fixed sizes. That means you could place leftNav, header & content absolutely. No floats, so no problem in IE.

Or, adjust the design slightly so it doesn't have to be pixel perfect. Give #mainCONTAINER a background colour so that although the gap is there it doesn't detract from the look. 3px gap, who cares.

dappy
dappy's picture
Offline
Regular
United States
Last seen: 14 years 5 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

IE 6, space around images?

Helen wrote:
Re. the missing bold font-weight, that's weird indeed. Can't recall hearing about that bug before - looks like your CSS syntax is correct, though. Could it be a setting in your WinIE itself, maybe sorta kinda?

This problem is on another page and CSS which is located here:

http://home.dejazzd.com/jdapkiewicz/CSSCREATOR/Generated.html

http://home.dejazzd.com/jdapkiewicz/CSSCREATOR/_master.css

I have so many declarations solely for IE that the CSS is ridiculous. But on Windows ONLY, the fonts on the left list don't seem to go bold. Perhaps its just the display? (96dpi windows vs 72dpi mac?) but on the mac everything is as it should be. It took me like 6 hours to get all that to work in FF/Safari/Netscape, then adjust for IE.

Since I don't totally know what I'm doing, I kinda throw in properties and see what happens, then go from there.

Thanks again for the help