Cross Browser Display Issues

I really hate Internet Explorer. :mad: Every time I try to fix one problem, another one develops. Anyways, I've been trying to get a page to display correctly in all the different browsers but have been unsuccessful in my attempts.

Here is one of the issues: I have a page with a <div> element that surrounds the entire page with a px border. Within this element I have another <div> element that acts as the header, it is 137. Within this <div> element is another that is an inline style which has a 1px padding to separate the inside contents from the surrounding border. The problem I am having is that one of the images inside the most inner <div> element is not displaying properly in internet explorer and other browsers. The image itself is 135px tall but in IE it just spills touches the surrounding border while in other browsers it is separated from the border nicely by the 1px of padding that is an attribute of the <div> element which contains it. Confused? :confused: Here is the CSS code and the HTML code that deals with the problem area of the page:

/* Styles for divisions */

div.pageperimeter {background-color: white;
border-style: none solid none solid;
border-color: black;
border-width: 1px;
position: relative;
top: 0px; left: 100px;
width: 800px;
height: 1700px}

div.gbuttons {position: relative;
top: 3px; left: 15px;
width: 60px;
height: 9px;}
#spacingtest {letter-spacing: 5px;}

div.mltab {border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
top: 25px; left: 15px;
width: 770px;
height: 1000px;}

.htab {border-style: none none solid none;
border-color: black;
border-width: 1px;
width: 770px;
height: 137px;}
#trpt_pos {position: inherit;
right: 3px;}
#tnt_pos {position: inherit;
right: 3px;
bottom: 2px;}

<!--HTML CODE-->
<div class="pageperimeter">

<div class="gbuttons">
<span id="spacingtest">
<a href="index.php"><img id="home_icon" src="../web-data/Components/_content/globals/home_icon.png"></a>
<a href="../_layout/test_page2.html"><img id="envelope_icon" src="../web-data/Components/_content/globals/envelope_icon.png"></a>
<a href="../_layout/test_page3.html"><img id="question_mark_icon" src="../web-data/Components/_content/globals/question_mark_icon.png"></a>
</span>
</div>
<div class="mltab">
<div class="htab">
<style>
div.hitab {position: inherit;
padding: 1px;}
</style>
<div class="hitab">
<img src="../web-data/Components/_content/home/top_left_logo_tab.png">
</div>
</div>
</div>
</div>

Also, in case you want to see what the page looks like:

http://support.jumbographics.com/bbweb/web-content/index.php

Hope somebody can help me out. :o

Did you fix it? In IE6 that image is spaced out to 1px from the top of that div and 1px from the left. I saw that you have borders around your smaller images. That can be fixed by adding this to your CSS
a img {
border:0;
}
You'll need to add a clearing div after your banner image to get the header to encase it in Firefox.

That link doesn't work.

The link should work, I tested it and took the URL directly from the browser window...

Yeah the link works for me.

Not for me :(

I'll answer your pm here. In the future please ask your questions in the forum, unless it really has to be a private question. A clearing div is a div that has clear:both; set to it with a line-height of zero and font-size of like 0 or 1px
<div style="clear:both;line-height:0;font-size:0;>&nbsp;</div> It will go after the content of a div that has a floating element in it.

I tried both the suggestions of using clearing <div> and modifying the border attribute of the <a> element to equal 0, but the same problems still persist. Everything displays fine on Safari, Firefox and IE on a macintosh. IE on the PC as well as Mozilla are still presenting display issues.

The entire page is now up, if anyone wants to take a look and see if they can figure anything else out.

http://support.jumbographics.com/bbweb/web-content/index.php

I think that my positioning is off (I've tried using absolute, inherit as well as fixed positioning, but to no avail.) The thing I can't understand is why the page displays differently in the same version of IE on different browsers. Cross-browser compatibility issues, I guess.

Yeah your positioning is off. Honestly there is no need for as much absolute positioning you are using. You might want to go read up on CSS, particularly floats. www.htmldog.com www.w3schools.com/css You are abusing tables. A menu isn't meant to be made from a table. Use an ordered or unordered list instead. I don't have time to sift through all of your code. Change this
#tnt_pos {position: absolute;
top: 118px;
width: 689px;}
.hitab {position: inherit;
padding: 1px;
width: 770px;}
.trpt_pos {position: absolute;
top: 1px;
left: 80px;
width: 689px;}
to this
* html #tnt_pos {position:relative;
top:-4px;}
.hitab {position: relative;
padding: 1px;
width: 770px;}
.trpt_pos {position: absolute;
width: 689px;
top:1px;
left:80px;}

Sorry, first time CSS user.