IE5.5 div "padding"

HTML & CSS
1

Hi all,
When you click on one of the black images in this page the div is shown:
http://tinyurl.com/285yetp

However when you click on one of the images in IE5.5 then there is a space under the black images before the image, lilke this:
http://tinyurl.com/2a9cngc

How can I get rid of this “padding” in IE5.5? Thanks

2

The gap is there in ie6 and 7 as well and is because of the default top margin on the form element.

Remove it like so.


form{margin:0}

You still have issues with the widths of the elements so check your dimensions all add up and remove the whitespace in the html between images or you will get big gaps.

3

Why are you bothering with IE 5.5 - even Microsoft declared that to be dead years ago and no one uses it.

4

Thanks Paul I added that form css which sorts out IE5.5 perfectly!

In IE6 I get padding around the black images:
http://tinyurl.com/285yetp

This is the padding I want to get rid of:
http://tinyurl.com/286y94m

It seems like the step1_content padding and margin are being ignored?

.step1_content which is 486px

.step1_image {
border:1px solid white;
cursor:pointer;
display:inline-block;
margin:0;
}

all of the images are all 100px X 140px;
The total width of the images is 400px, they all have a border so that will be 8px width so the total width of the content inside the class is 408px.

IHow can I fix this and get rid of the padding? Thanks

5

That table is making this ten times harder than it needs to be. You will need to add a height to the second td because IE will distribute the top and bottom heights otherwise.


    <TD width="7">&nbsp;</TD>
    <TD [B]height="244"[/B] vAlign="top"><DIV class="step1_content"

Then you need to float the table for IE and set a width on step_main.


.step1_main table {float:left}
.step1_main{width:100&#37;;overflow:hidden}

Then you need to remove the whitespace as I already told you to do and put the images in a proper block container.


<div><IMG class="step1_image" onClick="step1_set(1)" alt="" src="http://www.copywritecolombia.com/vc1_files/1.png"><IMG class="step1_image" onClick="step1_set(2)" alt="" src="http://www.copywritecolombia.com/vc1_files/2.png"><IMG class="step1_image" onClick="step1_set(3)" alt="" src="http://www.copywritecolombia.com/vc1_files/3.png"><IMG class="step1_image" onClick="step1_set(4)" alt="" src="http://www.copywritecolombia.com/vc1_files/4.png"></div>

That will fix all those issues.

6

Thanks Paul that is awesome! I am trying to position the button http://tinyurl.com/2d5pqcy I was thinking about absolute positioning? What is the best way to do this-maybe using table aligns to control the button?

7

Assuming nothing is going to overlap you could do this.


[B].step1_main {position:relative;}[/B]

Then change the existing button rule to this new one.


[B].step1_submit {[/B]
  [B]  position:absolute;
    bottom:10px;
    right:20px;
    background:  url(http://www.tusoat.com//admin/projects/soat/media/step1/bg_button.png);
    border: gray 2px solid;
    padding:0 0 4px;
    margin:0 12px 0 0;
    width: 120px;
    font-family: verdana;
    height: 30px;
    color: yellow;
    font-size: 14pt;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}[/B]
8

Perfect!! Thanks Paul really appreciated Thread closed!