SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member 662C [Robert]'s Avatar
    Join Date
    Dec 2003
    Location
    Glasgow, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy [WinXP] IE6/Avant working, FireFox 0.9 failing the 1st time but fine after a refresh

    Hi folks,

    A small browser issue here, seemingly with CSS. I've attached a couple of screen dumps [here] so you can see what's happening.

    The 1 showing just a white rectangle with curved corners, some text and an image is how the page should display and does in IE/Avant and in FireFox 0.9.3 after a refresh, the other is how the page displays in FireFox 0.9.3 on 1st view or after a hard refresh (ctrl+F5), it seemed to work in 0.8.

    Below is the code which is involved in that part of the page.

    The stylesheet (please ignore the table attribute, a lot of people refuse to believe the trick of adding font-size: 100% to it works but it really saves me adding another class for td)
    HTML Code:
    <style type="text/css">
    <!--
    body {margin: 0px; background-color: #3B3B3B; font-family: tahoma, verdana, arial, helvetica; font-size: 8pt; color: #888888;}
    table {font-size: 100%;}
    .main_table {width: 100%; height: 100%;}
    .content_table {width: 770px; height: 100%; background-image: url(files/gfx/content_table_bg.gif); background-repeat: repeat-y;}
    .header_cell {height: 115px; background-image: url(files/gfx/header_bg.gif); background-repeat: repeat-x;}
    .content_cell {background-color: #C6C6C6; background-image: url(files/gfx/content_bg.gif); background-repeat: repeat-x;}
    .left_menu_top_01 {width: 100%; height: 100%; background-color: #B3B3B3; background-image: url(files/gfx/left_menu_top_01.gif); background-position: 0px 0px; background-repeat: repeat-x;}
    .left_menu_top_02 {width: 100%; height: 100%; background-color: #B3B3B3; background-image: url(files/gfx/left_menu_top_02.gif); background-position: 0px 0px; background-repeat: no-repeat;}
    .left_menu_btm {width: 100%; height: 100%; background-image: url(files/gfx/left_menu_btm.gif); background-position: 0px 100%; background-repeat: repeat-x;}
    .content_top {width: 100%; height: 100%; background-color: #FFFFFF; background-image: url(files/gfx/content_top.gif); background-position: 0px 0px; background-repeat: no-repeat;}
    .content_btm {width: 100%; height: 100%; background-image: url(files/gfx/content_btm.gif); background-position: 0px 100%; background-repeat: repeat-x;}
    .footer_cell {height: 100%; background-image: url(files/gfx/footer_bg.gif); background-repeat: repeat-x; text-align: center;}
    .footer_navigation {margin-top: 10px; font-size: 10px; color: #EF5EB5;}
    a.footer_navigation_link:link, a.footer_navigation_link:visited {color: #CCCCCC; text-decoration: none;}
    a.footer_navigation_link:hover, a.footer_navigation_link:active {color: #000000; text-decoration: none;}
    .footer_copyright {margin-top: 4px; font-size: 10px; color: #919191;}
    a.footer_copyright_link:link, a.footer_copyright_link:visited {color: #919191; text-decoration: none;}
    a.footer_copyright_link:hover, a.footer_copyright_link:active {color: #333333; text-decoration: none;}
    .image_right_top {margin-bottom: 12px; margin-left: 12px; margin-right: -2px; float: right;}
    // -->
    </style>
    The HTML segment
    HTML Code:
    	<tr>
    	 <td>
    	 <div class="content_top"><div class="content_btm">
    	 <table width="501" cellpadding="13" cellspacing="0" border="0">
    	 <tr>
    	 <td><img class="image_right_top" src="files/gfx/content/company/logo_button.jpg" border="0" />Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old<br /><br />
    	 Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old Blah blah yeah yeah yeah same old same old </td>
    	 </tr>
    	 </table></div></div></td>
    	</tr>
    If anybody can help with this issue it would be greatly appreciated


    Cheers,
    Robert

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It will be hard to troubleshoot that code without a link to the page to see whats happening.

    I notice you are setting a table to 100% and usually mozilla doesn't like it unless you also specifiy html,body at 100% as well.
    Code:
    html,body {height:100%}
    (The above code usually needs to be hidden from ie mac.)

    I don't think its anything to do with your problem though

    Paul


Bookmarks

Posting Permissions

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