SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Houston
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE vs NS 7.0 Error in my CSS page - check it out >>

    I can't seem to get this stuff to work in Netscape 7.0. Can yall please take a look at this demo page and offer advice?

    Thanks so much in advance!

    http://www.twinturboz.net/~furious/test.htm

    The page look right in IE but not in Netscape.
    Last edited by Furious; Mar 9, 2004 at 14:17.

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

    You need to give the widetop and bottom styles some heights for mozilla to show the repeating bg image.

    The #wide style also needs a clear:both.

    There were also a couple of unnessesary nestings messing mozilla/netscape up and a border specified in the style that was incomplete.

    Here's the resulting changes (change the urls back to relative as I just changed them to see your images). (I guessed at the height of the images but you should nake them exact)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Template</title>
    <style type=text/css>
    BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 86%; BACKGROUND: #f5f5f5; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: justify
    }
    .wrapper {
    WIDTH: 100%; 
    }
    .outer {
    PADDING-LEFT: 130px; 
    BORDER-LEFT-COLOR: #1d4188; 
    BORDER-RIGHT-WIDTH: 50px; 
    BORDER-RIGHT-COLOR: #f5f5f5;
    BACKGROUND-COLOR: #fefefe; 
    BACKGROUND-IMAGE: url(http://www.twinturboz.net/~furious/images/menu_bg1a.gif); 
    BACKGROUND-REPEAT: repeat-y
    }
    .wide {
    WIDTH: 100%; BACKGROUND-COLOR: #f5f5f5;clear:both
    }
    .wideBottom {
    height:65px;WIDTH: 100%; BACKGROUND:url(http://www.twinturboz.net/~furious/i...ttomCenter.gif); BACKGROUND-REPEAT: repeat-x left top;
    }
    .wideTop {
    height:30px;WIDTH: 100%; BACKGROUND: url(http://www.twinturboz.net/~furious/i...rderCenter.gif); BACKGROUND-REPEAT: repeat-x left:top;
    	}
    .center {
    WIDTH: 100%; 
    }
    .clear {
    CLEAR: both; 
    }
    TD.tabselected {
    BACKGROUND-COLOR: #1d4188
    }
    TD.tab {
    BACKGROUND-COLOR: #3468ce
    }
    .tabLink {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffdb4d; FONT-FAMILY: "verdana,arial,helvetica"
    }
    P.footer {
    FONT-SIZE: 12px; TEXT-ALIGN: right
    }
    .tabLabel {
    FONT-SIZE: 11px; COLOR: #ffdb4d; FONT-FAMILY: "verdana,arial,helvetica"
    }
    div>p {margin-top:0}
    p.last {margin-bottom:0}
    </style>
    </head>
    <body>
    <div class="wrapper"> 
    <div class="wide"><img src="http://www.twinturboz.net/~furious/images/logotest.gif" align="left"><img src="http://www.twinturboz.net/~furious/images/fourPic.gif" align="right"></div>
    <div class="wide"> 
    	<table id="Table3" cellSpacing="0" cellPadding="0" border="0">
    	 <tr> 
    		<td width="75">&nbsp;</td>
    		<td><img id="ctlTab_beginTab" src="http://www.twinturboz.net/~furious/i...ab_lft_sel.gif" border="0" /></td>
    		<td id="ctlTab_home_cell" nowrap class="tabselected"> <span id="ctlTab_home_label" class="tabLabel">Home</span> 
    		</td>
    		<td><img id="ctlTab_home_prod" src="http://www.twinturboz.net/~furious/i...mid_rt_sel.gif" border="0" /></td>
    		<td id="ctlTab_prod_cell" nowrap class="tab"> <a id="ctlTab_prod_link" class="tabLink" href="products.aspx">Products</a></td>
    		<td><img id="ctlTab_endTab" src="http://www.twinturboz.net/~furious/images/tab_rt.gif" border="0" /></td>
    	 </tr>
    	</table>
    </div>
    <div class="wideTop"><img src="http://www.twinturboz.net/~furious/i...borderLeft.gif" align="left"><img src="http://www.twinturboz.net/~furious/i...orderRight.gif" align="right"></div>
    <div class="outer"> 
    	<div class="center"> 
    	 <p>Content Here.</p>
    	 <p>d</p>
    	 <p>d</p>
    	 <p>d</p>
    	 <p class="last">d</p>
    	</div>
    </div>
    <div class="wideBottom"><img src="http://www.twinturboz.net/~furious/i...bottomLeft.gif" align="left"><img src="http://www.twinturboz.net/~furious/i...ottomRight.gif" align="right"></div>
    <div class="wide"> 
    	<p class="footer"> 2003 All rights reserved.</p>
    </div>
    </div>
    </body>
    </html>
    This looks more or less the same in mozilla/netscape and ie6.

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Houston
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent - I can't thank you enough!

    Now if only we could standarize this stuff and make everyone upgrade to a newer browser....

    - Matt


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
  •