IE image gap and content "push" issues

[124151155]

Hi,
I'm working on a website which will hopefully be going live very soon. I've had most of the IE issues fixed there there are still a few that are lingering on.

The first is: the header image is made up of of two images (one in the css and one in the html) which sit together and appear as the header. In IE 7 and below there is a gap in between this images - this also happens in the footer but the gap is much smaller (1 or 2 pixels). Here's a picture of what's going on:

The site can be accessed at http://dev.trapdoor.cbdweb.net/.

The second is: In IE 6 only, the whole content of the home page (but not other pages...) gets pushed downwards. Here's a picture:

Not vital but i've also noticed that IE 7 and under are not displaying the link colours as I specified them in the css - they are displaying the default colours... they are define in my css as a:hover{colour:red} etc... Should I be more specific for ie? Like, p a:hover or body p a:hover? This one's not exactly a show stopper... as long as the site can be read.

Also, does anybody know of a good IE PNG hack? I've tried this one and had no luck (It made all the PNGs in the CSS invisible and did nothing to those in the HTML).

Any help is greatly appreciated The site can be accessed here.

Thanks,

Tim.

 

[aerta]

IE probs

Your big gap looks like the infamous IE double margin bug.

When you left float a container and give it left margin, IE6 will erroneously double the margin width. So if my container is 600 pixels with a 10px margin, IE6 will display the magin as 20px margin. The same is true for right float + right margin.

One solution that normally works is to use padding instead of margin to get your white space.

#container6 { background-color: #e3e4db; text-align: left; margin-top: 16px; margin-left: 40px; width: 611px; height: auto; float: left; margin-bottom: 20px; }

change to...

#container6 { background-color: #e3e4db; text-align: left; padding-top: 16px; padding-left: 40px; width: 611px; height: auto; float: left; padding-bottom: 20px; }

then

#container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; margin-right: 42px; width: 137px; height: auto; float: right; margin-left: 16px; }

#container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; padding-right: 42px; width: 137px; height: auto; float: right; padding-left: 16px; }

 

[Cabbit]

You could also try changing your container box to using CSS3 rounded corners, In IE9, Firefox, Safari, Chrome, Opera the box will have rounded corners, gradients, shadows, etc if you please.

<IE8 will see square corners.

 

[stndn]

When I tried to validate your webpage, and got some errors. Try to fix that and see if it helps.

Also, for the link color, you need to put the rule in an a and not a:hover, since the later will only work on hover state, and not by default.

For a:active and a:visited links, you don't need to explicitly specify inherit since they will inherit from the default a rule (specify above).


-stndn.


Edit: Btw, the Username and the Member number text got cut off in the textbox fields. See attachment. Browser is SeaMonkey 2.0.4, on OS X Leopard.

 

[124151155]

Your big gap looks like the infamous IE double margin bug.

When you left float a container and give it left margin, IE6 will erroneously double the margin width. So if my container is 600 pixels with a 10px margin, IE6 will display the magin as 20px margin. The same is true for right float + right margin.

One solution that normally works is to use padding instead of margin to get your white space.

#container6 { background-color: #e3e4db; text-align: left; margin-top: 16px; margin-left: 40px; width: 611px; height: auto; float: left; margin-bottom: 20px; }

change to...

#container6 { background-color: #e3e4db; text-align: left; padding-top: 16px; padding-left: 40px; width: 611px; height: auto; float: left; padding-bottom: 20px; }

then

#container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; margin-right: 42px; width: 137px; height: auto; float: right; margin-left: 16px; }

#container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; padding-right: 42px; width: 137px; height: auto; float: right; padding-left: 16px; }

Neither of the two images have any padding or margins... I tried adding margin:0px;padding:0px; to the image in the html but had no luck... ANy other ideas?

Thanks.

 

[angelwatt]

For #leftcontainer try using position: absolute rather than relative. I don't have time to try it out in IE6, but the fix will likely deal with messing with the position and/or float properties of the left/right containers.

 

[124151155]

When I tried to validate your webpage, and got some errors. Try to fix that and see if it helps.

Also, for the link color, you need to put the rule in an a and not a:hover, since the later will only work on hover state, and not by default.

For a:active and a:visited links, you don't need to explicitly specify inherit since they will inherit from the default a rule (specify above).


-stndn.


Edit: Btw, the Username and the Member number text got cut off in the textbox fields. See attachment. Browser is SeaMonkey 2.0.4, on OS X Leopard.

I'm not sure I really understand you... I want to change all the link states (link, hover, active, visted...) not just a standard link...

Thanks for pointing out the login box problem... That happened across all browsers. The login box was causing a lot of problems so I've switched to a different one. Thanks =)

Thanks.

 

[124151155]

For #leftcontainer try using position: absolute rather than relative. I don't have time to try it out in IE6, but the fix will likely deal with messing with the position and/or float properties of the left/right containers.

Ah, this works... Well, sort of. Doing this moves up the article to where it should be but it makes the content of the side menu disappear...

This is the template I used for the columns, btw. I thought that might help.
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

 

[7on]

Switch to a strict doctype (either html 4.01 or XHTML-preferred). Transitional just sends IE into quirks mode.

 

[124151155]

Thanks for the suggestion 7on...
Unfortunately changing the doctype to strict doesn't change anything visually, except the image gap problem then spreads to all other browsers too =/

Any other ideas?

 

[7on]

Thanks for the suggestion 7on...
Unfortunately changing the doctype to strict doesn't change anything visually, except the image gap problem then spreads to all other browsers too =/

Any other ideas?

Well it's not magic. It makes everything consistent, meaning once you fix that image gap it should fix in all browsers. Taking away that table would be a good start.

And IE6 doesn't work with @imports
<style media="screen" type="text/css">@import "/templates/nineteensixtyfive/css/template.css";</style>

try linking to that to see if that helps (and if you're @importing to serve something different to IE, change your doctype and you won't need to )

 

[stndn]

I'm not sure I really understand you... I want to change all the link states (link, hover, active, visted...) not just a standard link...
Thanks.

If you want to change all the link states, use this rule
a { color: #f00; }

If specific states, use the ones you had before
(can't seem to find it now. did you update your code?)

-stndn.