css display differently for different browsers

[dcparham]

Greetings - how can i write a stylesheet or sheets that will display my website the same in all 3 browsers IE, Firefox, and Safari??? Using Dreamweaver to build the pages, and .css sheets linked to the html page. What other info can I provide to help you answer this? Spending waaay too much time not making it work :{

[PeejAvery]

Simply put...you cannot fully do so. Every browser renders content differently to some extent. So long as you are implementing 100% compliant CSS2 code...Safari, Firefox, and Chrome will give you no problems. However, Microsoft has problems interpreting what is valid, modern-day CSS solutions. Most of that plays out into margin and padding conflicts.

Many sites create two separate stylesheets...1 for IE and 1 for all other browsers.

[bobo]

Many sites create two separate stylesheets...1 for IE and 1 for all other browsers.

just another proof of my comment made here
http://www.codeguru.com/forum/showthread.php?t=493729

[PeejAvery]

Please stay on topic...Jumping off only confuses the original poster. Thank you.

[bobo]

sorry peej, I though it wasn't off topic, but ok

It was my way of saying get rid of those div tags and move all the CSS into td tags... doing this, many problems for many people will disapear. CSS rocks, it the containers that is the problem.

I'll be more careful nex time

[dcparham]

for the record, thx for trying to help, Bobo; i gleaned something from the "off topic", something i've suspected for a long time: "table" is one letter away from "stable". yet i actually still have a tough time embracing that standards for web content display are like the Wild West, archaic and enough technology for the lack of rule enforcement creates Boothill Graveyards everywhere[sites that look crummy in different browsers].

before i bury myself, allow me to ask: [1]if you have say stylesheet #1 for IE, stylesheet #2 for another browser, to which do you link the HTML page? i don't mind having multiple stylesheets but do not know how to pin the right one to its browser type; also [2]why can't there be simple standards for [a]determining the browser type, then [b]using If-Then scripting to link the correct CSS to its respective browser type?

coding and software can get so deep and complex - why is thousand-year-old HTML still having style problems? we're contemplating going to Mars for crying out loud - ok temper tantrum restrained lest an emotional train wreck.

seriously guys thx *mucho!* for your help!!

[PeejAvery]

I'll answer these out of order...

[2]why can't there be simple standards for [a]determining the browser type, then [b]using If-Then scripting to link the correct CSS to its respective browser type?

There is...browser headers. Next question will explain.

[1]if you have say stylesheet #1 for IE, stylesheet #2 for another browser, to which do you link the HTML page? i don't mind having multiple stylesheets but do not know how to pin the right one to its browser type; also

Internet Explorer allows conditional comments in its CSS content. One of the options you can do is use JavaScript to dynamically output the CSS stylesheet to which you desire to link.

<script type="text/javascript">
var file;
if (navigator.appName == "Microsoft Internet Explorer") {file = "ie.css";}
else {file = "not_ie.css"}
document.write('<style type="text/css">@import url(' + file + '.css);</style>');
</script>

Remember that if you are writing 100% compliant >= CSS2.1 code, then only some minor margin and padding differences might appear!

why is thousand-year-old HTML still having style problems?

It isn't. The problem is "browser wars." Microsoft, Apple, Mozilla, and other companies think that they have the best implementation of a browser. Since there is not set standard on how to read (X)HTML/CSS, only a set standard of those languages...they will not always render exactly the same across browsers.

[bobo]

It isn't. The problem is "browser wars." Microsoft, Apple, Mozilla, and other companies think that they have the best implementation of a browser. Since there is not set standard on how to read (X)HTML/CSS, only a set standard of those languages...they will not always render exactly the same across browsers.

This is good and bad really, on one side you have business competition wich is good for various reasons, you can't really have a dictator telling you how to design your product because that wouldn't be very democratic, would it? But, on the other side it would be nice to have all browser meet a standard and all be compliant, it would be easier on all of us who deal with markup language.

This issue though is not present in tables because tables always existed from the very first browser that was created, so with very little diference ALL browser are compliant to them because they were always part of the picture. The thing that I like the least about CSS-P is that the elements are not aware of one another, you can easily have content overlap one another because of compliancy. In tables this is not an issue, the cells will push away before content go on top of them.

Many companies and people call themselves professional designers. Yet very few of them actually are. When you design for a client espacially in e-commerce a real professional will design the IDENTITY of the firm inside the Web design and make it look good. This is easier said than done. At this level of design you cannot have content move a few pixels here and a few pixels there, and if it's your goal not to have your design move around, you better use tables... because of browser compliancy they are much more stable and reliable for consistancy.
OR... like peej said write all that extra CSS in another file to achieve what tables do for you automagically... OH! I almost forgot to mention... the table layout as far as positioning won't care if the visitor has javascript console turned on or off... that is the danger with dynamic css file include.

[Xeel]

you better use tables... because of browser compliancy they are much more stable and reliable for consistancy...

Oh please...

Every xhtml coder has his own style. In my exp tables are more pain than divs if you know how to control the last ones. Yes, I agree, it's more job to position divs, especially when floating, relative/absolute position and z-index are involved. But compared to tables many strange things can be avoided this way as well. Tables are limited, <tr>, <td> and their attributes had css bugs in different browsers since the very beginning.

It's pointless to convert this thread to DIVs vs TABLEs layouts war. Both approaches have their good and bad sides. I'd say DIVs are more flexible and less bugged but also require more experience to work with, while tables are much easier to control and have their obvious layout limitations.

----------

About CSS issues.

1. The most common error of beginner designers - they do not reset the most basic values of the elements. Instead they just start writing styles of the needed components while every browser has its own default style values which are applied unless you reset them. It's a good practice to reset at least margin, padding and border to all basic elements you might use, including <html> and <body> elements.

2. The second one is tougher since it depends only and only on designer's experience. I'm talking about avoiding browser specific styles (until you know what you are doing of course) and known style "bugs" (the same goes for JavaScript btw).

[bobo]

well I have to agree with prety much everything you're saying, but I'm not 100% on this statement. (And yes I also don't want the war so this will be it for me on this subject)

I'd say DIVs are more flexible and less bugged but also require more experience to work with, while tables are much easier to control and have their obvious layout limitations.

div are more bugged because of a truth you said, table are simpler less dynamic therefor I'm thinking tables have almost no bugs if any.

About LAYOUT limitation, when I was at war... mind you pretty much all alone against the rest of the community on 2 other forums, I had challenged anyone to do me a 2 dimention layout that I couldn't reproduce. (I'm not a rookie at markup language). I was having alot of fun because I could see them throwing all kinds of stuff at me, I've been doing Web page for almost 15 years with all kinds of thechnologies, I could reproduce it in no time. After this went on for a while someone was brilliant enough to throw a curveball at me and said... "OH YA DO THIS!!!" and it was really simple... all he had done was put 5 squares across the page, and then said "When I shrink my browser window I want those squares to wrap. try doing this in a table. " He had to invent a rule though... I couldn't use a table with a single td tag. (wich would've worked). But because that was so brilliant due to the simplicity, and dispite his rule I gave him the credit. Beside that I haven't seen a layout in XHTML that I can't reproduce in tables.

You see these people just didn't get it. The layout as nothing to do with CSS at all. CSS couldn't care less if you call it up in a div tag or td tag. They are just containers. For as long as your laying out is in 2 dimentions there is nothing tables cant do that XHTML can. If I need more than what tables can give me, nothing stops me from jumping over the fence. Actually when I was heavy in learning XHTML I wish I would've known then what I know now, because I would've gave them a challenge that tables do automatically that would be mind boggling to your average XHTML user.
But I don't want to go there.

[Xeel]

I'd say in practice all this strongly depends on each particular task. There are cases more suitable for tables and there are for divs. It's been a while since I wrote a clean xhtml by hand: it's all about heavy ajax stuffed front-end frameworks these days.

Also I might add that neither I avoid "jumping over the fence", in my case from the opposite side. But as a follower of W3C standards I use tables only in cases I fill all cells with data which is not always text of course. So I am not against table based layouts but still I prefer to have the main page parts as divs.

[dcparham]

Look, i am impressed with all your depth of experience and knowledge and am glad i asked the question. at least i am not the only one spending hours on projects only to gnash my teeth watching different browsers display hard-earned coding differently. first, i decided to use tables since divs seem to splat all over the place for diff browsers and need something stable so my client does not naively but rightly exclaim, "my collegue just told me my webpage looks like junk on his computer!" however, in the interest of progress and practical ideas tell me this: how do i "reset" values so that using divs do not display differently [for diff browsers]? should i flatter you first by telling you all how omnicient you are before asking ---> what i can do to ensure some TD in a table with text that i apply shadowing to, doesn't drift way off the table borders in IE when it looks fine in FF and Safari? OR using divs, do i *reset* values by setting all margin and border values to 0, then assign them what i want to make it all work? *divs are so much simpler in concept - just define the W x H dimensions, and the xy spot for them to appear and VIOLA instant block on the page! - in A particular browser of course."

but i thought TABLES would be [s]TABLE but n-n-nOOO. my one table TD has the TITLE drifted in IE but fine in FF and Safari. client has a MAC so i am partially safe so far but the page must look right in all 3 browsers. she is a yesteryear opera star and she will be remiss if *one* of her fans insults her webpage. therefore, is If-Then scripting for different browsers then assigning different style sheets to their respective browsers, the IDEAL here?

if it is such a challenge, how do you guys handle questions from your clients regarding the differences?

[bobo]

hey dcparham

first I'd like to say a comment about XHTML vs Tables... Xeel is right, XHTML is the W3C standards, and if you gona use tables, thats fine but make sure you don't leave yourself behind, I made sure I kept up with the logic and implimentation of XHTML before making the decision to keep using tables.
To make a long story short... I find XHTML is more flixible than tables, but for layouts, tables have always met my goal, and they are simpler to use, I love simple... I don't believe complicating your life for no payout... and again like Xeel said...

I'd say in practice all this strongly depends on each particular task.

now with that said... unless I don't understand what I'm reading in your last post, I take it that your having problems in both senario? If so, I believe the problem may be how the code is written, rather than wich technology your using. I can speak for tables, if you open and close all your tags the way your supposed to, and specify the right width and alignment in the cells I don't see how tables can make your content move that much, I don't care what browser your using. As for XHTML, you will have to post your code because that is not so straight forward... and I'll let a real XHTML user help you

[Xeel]

how do i "reset" values so that using divs do not display differently [for diff browsers]?

Sorry for HTML/CSS theory outbreak here. Still I mentioned two key points that would solve your problem. By resetting values I meant something like this set in the first lines of your attached css:

html, body, iframe, fieldset, form, div, table, tr, th, td, br, h1, h2, h3, h4, img, ul, li, p, a {margin:0; padding:0; border:none;}
div {behavior:url(styles/iepngfix.htc);}
body {behavior:url(styles/csshover2.htc);}

1st line: I just set initial values for most of the elements I might use. Why margin, padding and border? Because these are the ones causing most of basic trouble in cross-browser web design. Later you can always override these values, but the advantage here is that if you don't you'll always know what the "default" ones are.

2nd line: This is an IE 5.5/6 hack adding support for PNG images transparency (not needed for IE7+) the script can be downloaded here: http://www.twinhelix.com/css/iepngfix/. Just place it in some dir and IE6 will automatically load it. Be careful with relative paths in CSS: as you can see the paths I set start from the web root and are not relative to the style file itself.

3rd line: Similar to the thing above but this one adds css ":hover" selector for IE 5.5/6 to any element instead of <a> only. In other words for ex. span:hover {color:#FF0;} now will work in the old IE as well, so you could forget about heavy and buggy onmouseover/onmouseout events. The css hack can be obtained here: http://www.xs4all.nl/~peterned/csshover.html

Of course if you plan to forget about IE6 you definitely should skip the last two lines because both are not recognized as valid CSS2 (still who cares about CSS validators these days...).

Also when doing a commercial job I would strongly recommend asking what browser compatibility is required (or in simple language - what browsers will the page be viewed with). I know this is the evil path but this way sometimes you can limit the browser compatibility list to 1-3 browsers which will save you a lot of time while leaving your client pretty happy (mostly applies for intranet web projects where you can just cry out: "IE/Firefox only!").

Hope this helps

[dcparham]

ok, i am downright humbled but motivated to really soak in all you're telling me. will do but not atm - gotta run, but just wondering if you can give a looksee, here's the finally *somewhat* stable home page prototype between ie/ff/safari - page owner may view her world from her Mac computer yett i don wan her opera[literally, not the browser]-going friends to scream about her screwy site from another browser, so i'm "triplicating" [just made that word up] my work at least on the home page to get her to see 3 different colors that by viewing 3 pages [note, the ending characters for the 3 pages are 3.1, 3.2, 3.3] - http://www.lifelightstudios.com//bre...zer_com/BB3.1/.

there are some aggravating lines i cannot rid the page of using text-decoration:none, so if you are inclined and have a moment please see the links, especially the first 3.1, try IE. also, since you might ask, and as you are very knowledgeable and helpful, i will post the code to make it easier. if the links do not publish due to forum policy, i apologize in advance. the code of the homepage, then the IE-only css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/BB_notIE.css" />

<!--[if IE]>
<title>BB3 IE</title>
<link rel="stylesheet" type="text/css" href="css/BB_IE.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="black"><center>

<div class="divMain"><!-- opening DIV that holds the whole page -->
<table class="tableMain" border="0"><!-- opening tableMain -->
<tr class="title"><td colspan="2"><div id="divTitle"><font color="white">Brenda Boozer - Mezzo Soprano</font></div></td></tr>

<tr class="mainSection"><!-- 2nd row of main table has menu, excerpts in TD1, and photo in TD2-->
	<td><!-- OPENING FIRST TD with table inside which is the column of MENU items + EXCERPTS -->
	<!--inside mainSection is a row with 2 TD cells. TD cell 1 has a table with 4 rows. TD cell 2 has a rowspan of 4-->
		<table class="tableContent" border="0">
			<tr><td>

<div class="menu">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.yahoo.com"><font class="menu">Biography</font></a><a href="http://www.yahoo.com"><img src="images/menuBar1a.gif" class="menuLink1"/></a><br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.yahoo.com"><font class="menu">Discography</font></a><a href="http://www.yahoo.com"><img src="images/menuBar1a.gif" class="menuLink2"/></a><br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.yahoo.com"><font class="menu">Media</font></a><a href="http://www.yahoo.com"><img src="images/menuBar1a.gif" class="menuLink3"/></a><br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.yahoo.com"><font class="menu">Photo Gallery</font></a><a href="http://www.yahoo.com"><img src="images/menuBar1a.gif" class="menuLink4"/></a><br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.yahoo.com"><font class="menu">Contact</font></a><a href="http://www.yahoo.com"><img src="images/menuBar1a.gif" class="menuLink5"/></a></div>
			</td></tr>
			
			<tr><td class="excerpt">
"The voice is huge and handsome<br />
through its large range; the<br />
appearance is correctly boyish;<br />
the ability to concentrate and act<br />
through a long evening (almost all of it<br />
on stage) is most impressive." - <font face="Arial Narrow" size="1pt" style="bold">OPERA MAGAZINE</font><br />
<hr class="hLine"/>
			</td></tr>
			
			<tr><td class="excerpt">
"She's gorgeous to see and equally<br />
stunning to hear with a dark<br />
rich mellow voice and a well-<br />
developed technique." - <font face="Arial Narrow" size="1pt" style="bold">HOUSTON CHRONICLE</font><br />
<hr class="hLine"/>
			</td></tr>
			
			<tr><td class="excerpt">
"Singing with a commanding sense of beauty and joy her vocal future<br />
would seem to be unlimited." - <font face="Arial Narrow" size="1pt" style="bold">SAN FRANCISCO CHRONICLE</font><br />
			</td></tr>
			
			<tr><td>
<center><img src="images/ornament1a.png" class="ornament1"/></center>
			</td></tr>
		</table>
		
	</td><!-- ENDING FIRST TD that holds the menu and excerpts-->

	<!-- OPENING SECOND TD cell has a rowspan of 4 so photo can fit-->
	<td><img class="mainPhoto" src="images/BBscan2c.jpg" /><!-- ENDING SECOND TD cell holding the photo -->
	</td>
</tr>
<tr><td id="footer" colspan="2">Brenda Boozer Enterprises &copy; &nbsp 2010</td></tr>
</table><!-- end mainTable -->
</div><!-- ENDING DIV that holds the whole page -->
</center>
</body>
</html>

its css:

/* CSS Document */
DIV.divMain
{
background-color:rgb(0,0,204);
}

TABLE.tableMain
{
background-color:rgb(0,0,204);
width:1000px;
height:800px;
/*border:solid 1px yellow;*/
cellpadding:0px;
cellspacing:0px;
}

TABLE.tableContent
{
background-color:rgb(0,0,204);
width:430px;
height:718px;
/*border:solid 1px white;*/
cellpadding:0px;
cellspacing:0px;
}

TR.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*/
}

#divTitle
{
border:none;
white-space:nowrap;
position:absolute;
top:5px;
left:40px;
filter:shadow;
}

TR.mainSection
{
background-color:rgb(0,0,204);
width:1000px;
height:700px;
}

TD.menu
{
border:none:
padding:px;
width:px;
height:px;
position:relative;
left:10px;
top:-20px;
z-index: 0;
background-color:rgb(0,0,204);

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%;
}

FONT.menu
{
padding:px;
width:px;
height:px;
/*position:relative;
left:10px;
top:-90px;*/
z-index: 0;
background-color:rgb(0,0,204);

font-family:Monotype Corsiva;
font-size:18pt;
color:rgb(255,255,255);
text-align:left;
letter-spacing: 3px;
font-weight: bold;
font-style:italics;
line-height:100%;

A:link { text-decoration: none; }    /*----- for normal, unvisited links, no underline;*/
A:active { text-decoration: none; }  /*--- active is for link appearance while you're clicking*/
A:visited { text-decoration: none; } /*---visited is for previously visited links*/
}

DIV.menu
{
A:link { text-decoration: none }    /*----- for normal, unvisited links, no underline;*/
A:active { text-decoration: none }  /*--- active is for link appearance while you're clicking*/
A:visited { text-decoration: none } /*---visited is for previously visited links*/
}

TD.excerpt
{
padding:px;
margin-left:px;
padding:5px;
width:px;
height:px;

z-index: 0;

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*/
}

IMG.mainPhoto
{
width:566px;
height:718px;
/*position:relative;
top:-14px;
left:432px;*/
z-index: 1;
}

IMG.ornament1
{
filter:shadow;
text-shadow: 5px 5px 5px black; /*for Safari and Firefox*/
/*position:relative;
left:-25px;
top:40px;*/
}

HR.hLine
{
text-align:center;
color:white;
width:150px;
position:relative;
top:28px;
}

IMG.menuLink1
{
border:none;
height:22px;
position:absolute;
left:70px;
top: 111px;
}

IMG.menuLink2
{
border:none;
height:22px;
position:absolute;
left:70px;
top: 136px;
}

IMG.menuLink3
{
border:none;
height:22px;
position:absolute;
left:70px;
top: 162px;
}

IMG.menuLink4
{
border:none;
height:22px;
position:absolute;
left:70px;
top: 188px;
}

IMG.menuLink5
{
border:none;
height:22px;
position:absolute;
left:70px;
top: 214px;
}

#footer
{
width:1000px;
height:20px;
background-color=rgb(255,255,255);
border:solid 1px white;
padding:0px;
text-align:center;
}

again, i will scrutinize what you gave me - it is more than i know at this point so i have to spend time with it. a bit slow these days responding with catching up at work, just had shoulder surgery, etc. peace to you my helpful forum friend.