Now please don't flame me here but I have really tried to fix this ... in Firefox all is well but in IE6 a variety of things go pear shaped. As most people use IE ...

On a subdomain I have an image as a banner. Underneath it is a div with text etc. Both have the same "background" colour. In publishing an Ooops! page I discovered there was a (white) space between the image(s) and the div beneath but when I got rid of that I realised the image(s) and the div don't quite line up. I can tinker with the code to get the same step on both sides but I can't get rid of it. The page that I've been trying to fix it on is at http://coaching.phoenixchange.com/ It validates but that's a cold comfort. The rest of the subdomain has the same fault plus others that I've fixed in the Oops! page but not generally (yet).

10 answers

danwellman 5600
3
points

Most people using IE is debateable and certainly depends on your target audience. I get like 5-10% of IE users on my site, but then my target is web developers...

This may be due to a bug in IE6 (there are enough of them) and not because you are doing something 'wrong'. Unfortunately, it just tends to screw things up for no good reason ;)

If you set the widths of the first

and the second to 723px it will line eveything up nicely. The widths appear to be set in CSS so it should be fine to use a conditional comment to correct the problem just in IE, use

<!--[if lt IE 7]> <style type="text/css"> .fix6 { width:723px; </style> <![endif]-->

in the head, and then just add the class name to the two elements and you should be good to go :)

Answered about 8 years ago by danwellman
2
points

I have noticed that in IE Images tend to have a little bit of space beneath them. Probably because that act like an inline-block element. Setting the images to "display"block" fixes that. Give that a try. That should make things easier w/ working w/ those images.

Answered about 8 years ago by Efficient Pixel
Liam 53
1
point

You could get around it by putting them both in a container div and setting the background color to the same as the image/text area?

Cheating and not really solving it but at least it'll be the same colour?

Answered about 8 years ago by Liam
danwellman 5600
1
point

ignore that "< br>" in the code, being added automatically...

Answered about 8 years ago by danwellman
1
point

display: block; on the <img> in question should do it.

Answered about 8 years ago by Nate Kennedy
0
points

Thanks for all the great answers :) but being a bit slow may I ask for some more info?

  • @ Dan - what's the reason for the extra 3px .. (the widths are not set in the CSS at the moment anyway)? and why doesn't the width of the first image need to be changed as well? What's different to everything being 720 as at present .... ? I'm confused. Won't that just throw everything in FF? So many questions.
  • Wow, conditional CSS (I have yet to really use selectors!) hadn't heard of that but found a great explanation here: http://www.positioniseverything.net/articles/cc-plus.html and it looks sweet!! Thanks! Now I just need to find what command to change to get IE to make everything line up.
  • I can't use a container div (I don't think I can?) 1. IE seems to be putting a margin around images (I had to convert PNGs on the root domain to JPGs to get around that!?!) and 2. part of the image is white and with a margin to the "top" of the page, so all these would also end up blue or am I misunderstanding?
  • I got rid of the white space (on the pages I've been tinkering with) by using a negative top margin! And inserting a < br > What a mess LoL "Display"block" -- seems to be the way to do this. Another great tip to be learned. Thanks :)
Answered about 8 years ago by robin greaves
0
points

I tried Display Block in various places. There was no change in IE but in FF the IMGs were pushed to the LHS of the screen. The gap between the second image and the div below remained in IE and FF.

I got rid of the gap in IE by using a negative value of 3px for margin-top. But I also need to add a < br > at the top of the div below the images for the gap to go in FF.

I sorted out the width problem in IE by "accident". At some point I'd put three "p"s at the front of the text in the div below the images just to confirm that the file I was looking at was the one actually being changed. It read "pppThe page you ..." When I deleted them the width of the div reverted to 720px!!!!!

So, it's sorted, sort of, but if anyone can explain all this, and how to do it "properly" without having to resort to negative values and unwanted page breaks I'd be very grateful...

Thanks one and all for your input

Answered about 8 years ago by robin greaves
0
points

I couldn't get display block to do anything in IE and in FF it pushed the IMGs to the LHS of the screen.

I got rid of the white space above the div below the IMGs: in IE by using a -3px margin-top and in FF by insrting a < br >
The width discrepancy in IE vanished when I edited the text in the div below the IMGs. I'd put three "p"s at the front of a paragraph. It began "pppThe page you are looking for ...". All I did was delete the "p"s and the display reverted to 720px!!!!!!!

If anyone can explain this I'd be very grateful.

Thanks for all your imput.

sincerely robin

Answered about 8 years ago by robin greaves
0
points

I couldn't get display block to do anything in IE and in FF it pushed the IMGs to the LHS of the screen.

I got rid of the white space above the div below the IMGs: in IE by using a -3px margin-top and in FF by insrting a < br >
The width discrepancy in IE vanished when I edited the text in the div below the IMGs. I'd put three "p"s at the front of a paragraph. It began "pppThe page you are looking for ...". All I did was delete the "p"s and the display reverted to 720px!!!!!!!

If anyone can explain this I'd be very grateful.

Thanks for all your imput.

sincerely robin

Answered about 8 years ago by robin greaves
0
points

In IE the div is actually 723px wide and not the 720px you desire. Quick fix is to add overflow: hidden to the div, but this doesn't really address the problem. Something inside is making it too wide.

Answered about 8 years ago by Daniel Ryan