Divs Give me Different Layout in Ie and CSS – Can Anyone Help??

I am just finishing a web site where I want two columns with coloured boxes in order to align underneath both:

3rd left box 184px height ——–1st right field 184px height

15 px space ————————10 px space

Following left box ————————2nd correct box

I’ve used CSS and also Divs (rather than tables) but cannot understand why the item aligns properly with IE but around Firefox and Chrome the 2nd left hand proverbial box appears 10px as well as so below the next right hand common box.

This site is http: //www. specialistangliansecurity. co. uk/ and the particular relevant code is definitely:
3rd left box:

Code:
#menuitems
situation: relative;
top: 0px;
vertical-align: prime;
width: 319px;
peak: 184px;
padding: 0px;
margin: 0px;
border: 0px;
background-image: url('.. /security-images/navigation-bk. jpg');
background-repeat: no-repeat;
overflow: hidden;

1st perfect box:

Code:
#gallerysection
situation: relative;
z-index: 50;
height: 184px;
thicker: 621px;
padding: 0px;
margin: 0px;
border: 0px;



. gallerycontainer
situation: relative;
top: 0px;
vertical-align: prime;
height: 184px;
thicker: 621px;
padding: 0px;
margin: 0px;
border: 0px;
z-index: 50;
background-image: url('.. /security-images/security-imagesbk. jpg');
background-repeat: no-repeat;

2nd remaining box:

Code:
#companies
situation: relative;
top: 10px;
vertical-align: prime;
width: 319px;
peak: 448px;
padding: 0px;
margin: 0px;
border: 0px;
background-image: url('.. /security-images/company-bk. jpg');
background-repeat: no-repeat;

2nd perfect box:

Code:
#maincontentwithbox
situation: relative;
top: 10px;
vertical-align: prime;
width: 621px;
underlay: 0px;
margin: 0px;
line: 0px;
background-color: #DDDDDD;

I had all these problems BEFORE POST added the menu items in the first left box in order that cannot be the key reason why. Would really value if anyone may give me some pointers in respect of what’s going inappropriate. I’ve spent hrs checking and rechecking the following!!

Actually, the matter exists in IE8 also. I’m guessing you’re contemplating it in IE7.

Your issue is you’re using comparative positioning on elements that don’t have to have it. For example, #menuitems itself does not need it, nor does #companies. If you need to move an thing 10 pixels along, use margins and/or extra padding as appropriate. Like that:

#companies
margin: 10px 0 0 0;

Let that happen, take the relative away from it and #menuitems, eliminate the < /style> tag with the bottom of a person’s CSS file itself, and you’ll most likely be okay.

Cheers The Game1264 for such as helpful reply : I’d never have got to that finish! learn something everyday in this website. Will try it and post backside.

That’s why we gather help, dude… so that the remaining portion of the world can see the things we can’t discover ourselves.

Very little probs.

Your suggestions cured most of the problems – to the rest I’m fearful I cheated and created some other ie style linen. Many thanks once more.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *