-
March 15th, 2010, 08:59 AM
#16
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%;
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> </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> </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"> </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.
-
August 16th, 2020, 06:09 AM
#17
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;}
}
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|