CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17

Thread: css display differently for different browsers

  1. #16
    Join Date
    Jun 2004
    Posts
    142

    Re: css display differently for different browsers

    hey DC

    here is a none W3C standard layout (tables) that will be compliant in any browser. The movement will be next to nothing. (some things you just can't help).

    Notes:

    You will need to crop your menuBar1a.gif image and keep only the blue arrow part, you should finish with a gif of width="22" height="32"

    There are a few nested tables, it might make you a bit dizzy at first, but that's the real way of using tables, after a bit you get used to it, and it's not a big deal. (I'm sure this could be said for XHTML too). This is the trick to have it consistant through all browsers.

    after you crop your menuBar1a.gif image in the "images" folder, you should be able to save the code below as a html file, and save it in the same folder as your other html pages, then you should be able to view a consistant layout in any browser.

    links and page titles are not defined...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <style type="text/css">
    .title
    {
    	background-color:rgb(0,0,204);
    	width:1000px;
    	height:60px;
    
    	font-family:Monotype Corsiva;
    	font-size:56pt;
    	color:rgb(255,255,255);
    	text-align:center;
    	letter-spacing: 3px;
    	font-weight: normal;
    	/*font-style:italics;*/
    	line-height:90px;
    	z-index: 2;
    	filter:shadow;
    	text-shadow: 5px 5px 5px black; /*for Safari and Firefox*/
    }
    
    .footer
    {
    	width:1000px;
    	height:20px;
    background-color=rgb(255,255,255);
    	border:solid 1px white;
    	padding:0px;
    	text-align:center;
    }
    .menu
    {
    	font-family: Monotype Corsiva;
    	font-size: 14pt;
    	color: rgb(255,255,255);
    	text-align: left;
    	letter-spacing: 3px;
    	font-weight: bold;
    	font-style: italics;
    	line-height: 100&#37;;
    	text-decoration: none;
    }
    
    .menu:hover
    {
    	text-decoration: underline;
    }
    
    .content
    {
    font-family:Monotype Corsiva;
    font-size:12pt;
    color:rgb(255,255,255);
    text-align:left;
    letter-spacing: 3px;
    font-weight: bold;
    font-style:italics;
    line-height:100%;
    /*filter:shadow;
    text-shadow: 5px 5px 5px black; /*for Safari and Firefox*/
    }
    
    </style>
    	<title>Untitled</title>
    </head>
    
    <body bgcolor="#000000">
    
    <table align="center" width="99%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    	<td width="99%" align="center" valign="top" bgcolor="#0000cc">
    	        <!-- nested table that devides the 2 columns -->
    			<table width="1000" cellspacing="2" cellpadding="2" border="0">
    		<tr>
    			<td colspan="2" class="title">Brenda Boozer - Mezzo Soprano</td>
    		</tr>
    		<tr>
    			<td width="425" valign="top">
    			        <!-- nested table that generates the left part of the column -->
    					<table width="421" cellspacing="2" cellpadding="2" border="0">
    				<tr>
    					<td>
    					<!-- need another nested table of 2 columns for the bullets and links -->
    						<table width="421" border="0" cellspacing="2" cellpadding="0">
    						<tr>
    							<td width="30"><img src="images/menuBar1a.gif" alt="" width="22" height="32" border="0"></td>
    							<td width="391"><a href="#" class="menu">Biography</a></td>
    						</tr>
    						<tr>
    							<td><img src="images/menuBar1a.gif" alt="" width="22" height="32" border="0"></td>
    							<td><a href="#" class="menu">Discography</a></td>
    						</tr>
    						<tr>
    							<td><img src="images/menuBar1a.gif" alt="" width="22" height="32" border="0"></td>
    							<td><a href="#" class="menu">Media</a></td>
    						</tr>
    						<tr>
    							<td><img src="images/menuBar1a.gif" alt="" width="22" height="32" border="0"></td>
    							<td><a href="#" class="menu">Photo Gallery</a></td>
    						</tr>
    						<tr>
    							<td><img src="images/menuBar1a.gif" alt="" width="22" height="32" border="0"></td>
    							<td><a href="#" class="menu">Contact</a></td>
    						</tr>
    						</table>
    
    					</td>
    				</tr>
    				<tr>
    					<td>
    					<p>&nbsp;</p>
    					<p class="content">"The voice is huge and handsome	through its large range; the appearance is correctly boyish; the ability to concentrate and act through a long evening (almost all of it on stage) is most impressive." - OPERA MAGAZINE</p>
    					<p><hr width="150" size="3" color="#FFFFFF"></p>
    					<p class="content">"She's gorgeous to see and equally stunning to hear with a dark rich mellow voice and a well-developed technique." - HOUSTON CHRONICLE</p>
    					<p><hr width="150" size="3" color="#FFFFFF"></p>
    					<p class="content">"Singing with a commanding sense of beauty and joy her vocal future	would seem to be unlimited." - SAN FRANCISCO CHRONICLE</p>
                        <p>&nbsp;</p>
                        <p align="center"><img src="images/ornament1a.png" alt="" width="280" height="57" border="0"></p>
    					</td>
    				</tr>
    				</table>
    		
    			
    			</td>
    			<td width="575">
    			<img src="images/BBscan2c.jpg" alt="" width="566" height="732" border="0">
    			</td>
    		</tr>
    		<tr>
    			<td colspan="2" bgcolor="#FFFFFF" class="footer">&nbsp;</td>
    		</tr>
    		</table>
    
    	
    	</td>
    </tr>
    </table>
    
    
    </body>
    </html>
    it's a pretty basic layout, so if your lucky... maybe someone will show you a XHTML layout of the same value... but don't hold your breath... I'm with a school board and with the march break I have time on my hands...
    Last edited by bobo; March 15th, 2010 at 09:49 AM.

  2. #17
    Join Date
    Sep 2015
    Location
    South East England, UK
    Posts
    4

    Post Re: css display differently for different browsers

    The above Javascript code works, but only if they have Javascript enabled.
    You could add the following to always load the not_ie.css file if Javascript disabled.

    Code:
    <NOSCRIPT>
    <LINK REL="stylesheet" HREF="not_ie.css">
    </NOSCRIPT>
    Or replace the Javascript with the following Internet Explorer code to check if it's IE or not.
    The following works without Javascript but not with IE 11.

    Code:
    <!-- Load with IE up to version 10 -->
    <!--[if IE]>
    <LINK REL="stylesheet" HREF="ie.css">
    <![endif]-->
    
    <!-- Load with non IE browser or IE 11 -->
    <!--[if !IE]><!-->
    <LINK REL="stylesheet" HREF="not_ie.css">
    <!--<![endif]-->
    Or use the following CSS code.
    This works without Javascript and on a number of browsers.

    Code:
    /* Style for other browsers not listed below */
    .Style_01 {COLOR:#7F7F7F;}
    .Style_02 {COLOR:#7F7F7F;}
    
    /* Style for Chromium/Opera */
    @media screen and (-webkit-min-device-pixel-ratio:0){
    .Style_01 {COLOR:red;}
    .Style_02 {COLOR:#FF0000;}
    }
    
    /* Style for Mozilla Firefox */
    @-moz-document url-prefix(){
    .Style_01 {COLOR:green;}
    .Style_02 {COLOR:#00FF00;}
    }
    
    /* Style only for Internet Explorer */ 
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    .Style_01 {COLOR:blue;}
    .Style_02 {COLOR:#0000FF;}
    }

Page 2 of 2 FirstFirst 12

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)