Cross-Browser support

pyrodude · August 16, 2007

So, I have this site in the infant stages, and I'm trying to get it to display nicely in a variety of browsers. So far I have tested it in Firefox, IE6 and IE7. Firefox is perfect, IE6 is manageable, and IE7 is quirky.

I'm using JavaScript to differentiate between browsers, and the code for the div won't seem to get the height to set correctly. This is probably a question for the Javascript forum, but maybe someone will see my supid mistake while they're checking out my other issue. Since CSS Position: fixed doesn't work in IE6, I want the div to fill the entire contents of the cell it's in.

In IE6, however, the DIV basically centers itself on the right border of the cell that is supposed to contain it. It has its width and height set correctly and it scrolls with the page, but it's too far to the right and actually covers some of the content page.

The source code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #000000;
}
body {
background-color: #0066CC;
font: 12px Arial, Helvetica, sans-serif;
background-image:url(bg.gif);
background-repeat:repeat;
overflow: auto;
}
div {
 background-color:#FFFFFF;
 padding:5px;
 border:2px solid #000000;
 overflow: auto;
}
a {
font-weight: bold;
font-size: 12px;
font-family: arial;
text-decoration: none;
}
a:visited {
color: #0099ff;
}
a:link, a:active {
color: #0000ff;
} 
a:hover {
font-size: 14px;
color: #8080ff;
} 
h4 {
color:#333333;
font-weight:bold;
}
#leftnav {
position: fixed;
}


-->
</style>
<script type="text/javascript">
function setDivDim() {
if (window.XMLHttpRequest) {
// IE 7, mozilla, safari, opera 9
document.getElementById('leftnav').style.width = "18%";
document.getElementById('leftnav').style.height = "57%";
} else {
// IE6, older browsers
document.getElementById('leftnav').style.width = "90%";
document.getElementById('leftnav').style.height = "100%";
}
}
</script>
</head>
<body onload="setDivDim();">
<table width="100%" border="0" align="center">
  <tr>
    <td width="5%"> </td>
    <td colspan="2" align="center"><div><img src="logo.gif" alt="logo" width="589" height="89" />
      <h3>Your neighborhood pharmacy!</h3></div></td>
    <td width="5%"> </td>
  </tr>
  <tr>
    <td width="5%"> </td>
    <td width="20%" height="100%" align="center" nowrap="nowrap" valign="top"><div id="leftnav"><h4>Site navigation:</h4>
	- <a href="#">link 1</a> -<br />
	- <a href="#">link 2</a> -<br /> </div></td>
    <td align="center"><div>
<b>This is a big main content div
<br /><br />
<br />
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />. 
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />. 
<p>Part way down</p>
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
      </div></td>
    <td width="5%"> </td>
  </tr>
  <tr>
    <td width="5%"> </td>
    <td colspan="2"><div><table width="100%"><tr><td align="left"><Insert<br />address<br />info ></td><td align="right"><Insert<br />other<br 

/>info></td></tr></table></div></td>
    <td width="5%"> </td>
  </tr>
</table>
</body>
</html>

Hope someone has some ideas!

ToonMariner · August 16, 2007

try using xhtml1.1 and drop the table layout.

you shoudl refrain from using ANY styling attributes. Put as much style as possible into an external style sheet and if need be use the style attribute of an element only when absolutely neccessary...

you will NEVER get sites to be identical on each browser but you can make em look 'very similar'...

Good luck.

pyrodude · August 16, 2007

The only reason the CSS is in that document is to make testing in the development stage a little simpler. When I have the styles the way I want them, I'll move them into a separate style sheet, don't worry.

dbrimlow · August 17, 2007

Before even looking at your main issue, first let me recommend you drop the jscript browser sniffers and use an IE conditional comment instead.

a Conditional comment is a great way to make IE behave. And it validates.

You first create your regular css that all real browsers use.

Then, you create another css that modifies ONLY those elements needed to make IE behave.

For the most part, standard css in your main css file will be fine in IE 6 and 7. It is just those few major width, height, positioning, etc elements that IE gets all willy-nilly with. So conceivably your ie-only.css file would just have a few lines.

Example from one of my sites:

My main css styles my navigation setting for all browsers as follows:

#navigation ul{
margin: 0;
padding: 0;
float: left;
line-height: 1.5em;
list-style-type: none;
}
#navigation li{
float: left; 
}
#navigation a:link, #navigation a:visited{
float: left;
display: block;
color: #000000;
background-color:#E4BD6A;	
margin:0 0.25em;
padding: 5px 8px;
margin-top: -6px;
border-bottom-width: 0;	
border-top:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-left:1px solid #FFFFFF
}
#navigation a:hover, #navigation a:active{
color: #243360;
background-color: #FFFFFF;	
border-top:1px solid #E4BD6A; border-right:1px solid #E4BD6A; border-left:1px solid #E4BD6A
}

Most of the commands work just fine in IE6/7 except for a few, so my ie-only.css modifies only those parts that are needed to make IE behave:

#navigation ul{
line-height: 1.2em;
}

#navigation a {
position: relative;
}

Here is how the conditional comment is used in a head tag (the "if lt ie 7" means to apply the css to all versions of IE from 7 and previous):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>blah blah</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css"  media="screen" href="master.css" />
<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="ie-only.css" />
<![endif]-->
</head>

Now, another thing, fix your css a tags. They will cause trouble as written.

a {
font-weight: bold;
font-size: 12px;
font-family: arial;
text-decoration: none;
}
a:visited {
color: #0099ff;
}
a:link, a:active {
color: #0000ff;
} 
a:hover {
font-size: 14px;
color: #8080ff;
}

ALWAYS! use the "LVHA" or "LoVe HAte" order:

a:link, a:visited

then

a:hover, a:active

This is a RULE! It will save you hours of debugging later when you can't figure out why your link colors are behaving strangely and not hovering.

Dave

dbrimlow · August 17, 2007

Okay. Now for your problem. Without really knowing what you are trying to do, I can guess (like a browser would).

First, lose the all those break tags for spacing. Instead, style the p tag in that div to offer the same look.

And what is "div"? You are using it as a "tag level element". Make it a class or ID element ... for example's sake, I'll make it a class.

Drop the overflow and add display:inline.

Now put this in an external css called IE6-only.css, and add a conditional comment to your head tag as follows:

<!--[if lt ie 6]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="IE6-only.css" />
<![endif]-->

IE6-only.css is exactly as follows, no more, no less:

.div {overflow:hidden;display:inline}
.div p {margin:20em 5px}

In your markup change:

"<td align="center"><div>"

to

"<td align="center"><div class="div">" or "<td style="text-align:center" class="div">"

Dave

Sign In

Cross-Browser support

Recommended Posts

pyrodude

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

pyrodude

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information