Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    Somewhere out West
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser Display Issues

    I really hate Internet Explorer. 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? 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/bbw...tent/index.php

    Hope somebody can help me out.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    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.

  • #3
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That link doesn't work.

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    Somewhere out West
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The link should work, I tested it and took the URL directly from the browser window...

  • #5
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Yeah the link works for me.
    OracleGuy

  • #6
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not for me

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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.

  • #8
    New Coder
    Join Date
    Jul 2005
    Location
    Somewhere out West
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/bbw...tent/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.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    #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
    Code:
    * html #tnt_pos	     {position:relative;
    					  top:-4px;}
    .hitab				 {position: relative;
    					  padding: 1px;
    					  width: 770px;}
    .trpt_pos			 {position: absolute;
    					  width: 689px;
    					  top:1px;
    					  left:80px;}

  • #10
    New Coder
    Join Date
    Jul 2005
    Location
    Somewhere out West
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, first time CSS user.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •