CSS - Style Help - Cross-browser Support

I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ?

Hi-

I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards?

Thanks in advance-
S

i have a web site that i am redesigning and the redesign is @

http://cometosandiego.com/weekendvisit/index.php

it shows up GREAT in firefox

screwed in opera

and COMPLETLY out of wack in IE 6 and 7

what to do????

thanks

I am having problem making this cross browser friendly



Code:

/* Div Structure */

#heading { 
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}

#search { 
float: left;



}


#img {
float:left;
}

#text {
float:right;
}

#phone {

position: relative ;
float: right ;
top: 15px ;
right: 10px


}


#head {
margin: 5px ;
padding: 0; 
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;
}



#headnav {
float: right ;
margin: 100px 17px 5px 10px; 
padding: 0;
}

#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ; 
}

#mainpage { 
float: right; 
position:relative; 
width: 730px ; 
right:  -5px; 
left: -5px;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;

margin-top: 5px;



}

/* Side Bar */

	#sidebar h3 {
		color:black; 
		font-size: 11px;
		font-weight: normal;
		letter-spacing: 0.2em;
		margin: 5px;
		padding: 0px;
		text-transform: uppercase;
		border-bottom:dashed;
		border-bottom-color:black;
		border-width: 1px;
		}
		
	#sidebar ul, #sidebar ol {
		list-style: none;
		margin: 0;
		padding: 0;
	
		
		
		}
		
		
		
	
	
	#sidebar li {

		margin: 0;
		list-style:none;
		padding: 0;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}
		
	#sidebar a {
		color: #9999FF;
		text-decoration:none;
		}
		
	#sidebar a:hover {
	color: black;
	text-decoration:underline;

	}
		
	#sidebar div { 
		margin: 20px 0;
		padding: 0;
		}
/* Header Style */ 

	#head h1  {
	font-family:Verdana, Arial, Helvetica, sans-serif ;
	letter-spacing: 0.5em;
	font-size: 2em;
	color: black;
	
	}
	#head a { 
	color: black; 
	text-decoration: none;
	}
	
	
/* Head Nav */ 

	
	#headnav a  { 
	color: black; 
	text-decoration:none; 
	}
	#headnav a:hover { 
	text-decoration:underline;
	}
	
	#headnav p { 
	color:black; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.1em;
	
	}

/* Main Page */ 

	#mainpage img { 
	padding: 10px;
	}
	
	#mainpage h2 { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color:black; 
	letter-spacing: 0.5em;
	font-style: bold ;
	border-bottom: solid;
	border-bottom-color:#0066CC;
	border-bottom-width: 2px;
	
	}
	#mainpage p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	}
	
	#mainpage li { 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	} 
	
	#mainpage h3 { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	border-bottom: dotted; 
	border-bottom-color: black;
	border-bottom-width: 1px ;
	latter-spacing: 0.2 em; 
	font-size:18px;
	}
	
	#mainpage a {
	color: #910B2D;
	text-decoration:none;
	}
	
	#mainpage a:hover {
	color:silver;
	text-decoration:underline;
	}
	
	/* Phone */ 
	
	#phone p { 
	color: black ;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px ;

}

/* Heading's */ 

#heading h2 { 
color: white; 
}

Hi;

I don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now).

To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc.

** I know about ie7-js from Dean Edwards, but I don't know how well that works.

** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues.

** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect.

So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier.

Thanks

Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites.

Also, anyone know any good links for getting better at coding for cross browser CSS?

Thanks!

I'm designing a site with a combination of css and tables and I've run into some issues w/IE.

I've got some content in a nested table

<table id="content">
<tr>
<td>
Content...
</>
</>
</table>

and in my style sheet i have

#content{
padding-left:20px;
...
}

Firefox recognizes this property just fine and displays the table slightly indented, but IE seems to completely miss it. I have figured out a few workarounds, but they end up causing more problems and there are also other thigns that IE has been missing.. Does anyone know what might be causing this?

ALSO

i have a <div id=divider> inside a td w/css props as width:1px and height:100% and background-color:#000000.

again, firefox recognizes this and displays a black line that is the height of the td and 1 px wide, but IE displays a little midget line thats like 10px tall instead of the entire height of the cell. wtf?

Okay, my layout is css, and the problem is with my footer, and bottom links. In mozilla, they look the way i want them to, but for IE, they are positioned too low, and the bottom links are unreadable. Take a look - www.funny-guys.com

The Code:

#bottomlinks
{
margin:0px 0px 20px 0px;
padding:0px;
font-size:10px;
color:#999999;
text-align:center;

div#footer
{
margin: 0px 0px 12px 0px;
font-size:60%;
text-align:center;
padding:0;
}

Thanks

This template works perfectly in firefox (as I want it) but the background-images won't show and the margin/padding shows wrong. When I validate the CSS in firefox, it goes through, but when I do it in IE, it tells me that the id's are suppose to be used for block elements. I've done a search and read up on this over at w3schools but it was fruitless. I would like for it too look in IE the way it does in FF.

I think it has something to do with the header or some part of the id's, because that feels a bit odd coding from my part.

Please excuse the poorly formatted CSS, as the first part of it was made online where you had to use space to format it. Here is my source code:

css Code:
Original - css Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Omega Destiny</title> <style type="text/css"> body { background-color: #CCCCCC; color: #FFFFFF; } a:link { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:hover { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } a:visited { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:active { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } #wrapper { width:900px; margin:0px auto; text-align: center; } #header { height:100px; background-color: #CCCCCC; background-image: url(http://img476.imageshack.us/img476/1419/banner7sy.jpg); background-repeat: no-repeat; background-position: left; color: #FFFFFF; } #cornernav { text-align: center; float:right; width: 580px; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; height: 99px; } #cornernav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #cornernav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #sidenav { float: left; width: 18%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #sidenav a:link { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:hover { text-decoration: none; color: #104E8B; font-weight: bold; background-color: #E8E8E8; } #sidenav a:visited { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:active { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #sidenav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #content { float: right; text-align: left; width: 80%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #content p { margin-left: 10px; margin-right: 10px; } #content h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } /* .footer { text-align:center; float:right; font-size:12px; color: #000000; margin-bottom: 20px; width: 80%; background-color: #E8E8E8; } */ </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="cornernav"> <h2>Interent Service</h2> <p> This is a box designed to be a short and comprehensive. You can use it to give a statement for what the website is about, a quote or simply some random text. Anything goes, since you are the one that is going to use it. There is enough space for three full lines of text. Enjoy! </p> </div></div> <br /> <div id="sidenav"> <h2>Site Navigation</h1><br /> <p><a href="#">Home</a><br /> <a href="#">About</a><br /> <a href="#">Contact Us</a><br /> <a href="#">Portfolio</a><br /></p> </div> <div id="content"> <h2>Omega Destiny</h2> <p><a href="#">Welcome</a> to my website template called Omega Destiny. It is a big improvement from my previous design called "Arcane Flame" and is meant to have a very professional look with its gray theme. Omega Destiny is table-less and entirely based on divs.</p> </div> <!-- <div class="footer"> Design by "Moridin". Copyright 2006 All Rights Reserved. </div> --> </div> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <html>


 <head>


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


 <title>Omega Destiny</title>


  


 <style type="text/css">


  


 body


 {


     background-color: #CCCCCC;


                   color: #FFFFFF;


 }


 a:link


 {


     text-decoration:none;


                   color: #104E8B;


                   background-color: #E8E8E8;


 }


 a:hover


 {


     text-decoration: none;


                   color: #104E8B;


                   background-color: #E8E8E8;


 }


 a:visited


 {


     text-decoration:none;


                   color: #104E8B;


                   background-color: #E8E8E8;


 }


 a:active


 {


     text-decoration: none;


     color: #104E8B;


                   background-color: #E8E8E8;


 }


 #wrapper


 {


     width:900px;


     margin:0px auto;


             text-align: center;


 }


 #header 


 {


     height:100px;


     background-color: #CCCCCC;


     background-image: url(http://img476.imageshack.us/img476/1419/banner7sy.jpg);


                   background-repeat: no-repeat;


     background-position: left; 


                   color: #FFFFFF;


 }


 #cornernav


 {


     text-align: center;


                   float:right;


                   width: 580px;


                   background-color: #E8E8E8;


                   color: #000000;


                   border: 1px solid #000000;


                   height: 99px;


 }


 #cornernav h2


 {


                  background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg);


                  text-align: center;


     font-size:100%;


     height:1em;


     line-height:1.6em;


                   padding-bottom: 9px;


                   margin-top: 0px;


     position: relative;


                   bottom: -1px;


 }


  


  


  


 #cornernav p


 {


     margin-left: 10px;


     margin-right: 10px;


     margin-top: -10px;


 }


 #sidenav


 {


     float: left;


     width: 18%;


     background-color: #E8E8E8;


     color: #000000;


     border: 1px solid #000000;


 }


 #sidenav a:link


 {


     text-decoration: none;


     color: #000000;


     font-weight: bold;


     background-color: #E8E8E8;    


 }


 #sidenav a:hover


 {


     text-decoration: none;


     color: #104E8B;


     font-weight: bold;


     background-color: #E8E8E8;


 }


 #sidenav a:visited


 {


     text-decoration: none;


     color: #000000;


     font-weight: bold;


     background-color: #E8E8E8;


 }


 #sidenav a:active


 {


     text-decoration: none;


     color: #000000;


     font-weight: bold;


     background-color: #E8E8E8;


 }


  


 #sidenav h2


 {


     background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg);


                   text-align: center;


     font-size:100%;


     height:1em;


     line-height:1.6em;


                   padding-bottom: 9px;


                   margin-top: 0px;


                   position: relative;


                   bottom: -1px;


 }


 #sidenav p


 {


     margin-left: 10px;


     margin-right: 10px;


     margin-top: -10px;


 }


 #content


 {


     float: right;


     text-align: left;


     width: 80%;


     background-color: #E8E8E8;


     color: #000000;


     border: 1px solid #000000;      


 }


 #content p


 {


     margin-left: 10px;


     margin-right: 10px;


 }


 #content h2


 {


     background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg);


     text-align: center;


     font-size:100%;


     height:1em;


     line-height:1.6em;


                   padding-bottom: 9px;


                   margin-top: 0px;


     position: relative;


                   bottom: -1px;


 }


 /* .footer


 {


     text-align:center;


     float:right;


     font-size:12px; 


     color: #000000;


     margin-bottom: 20px;


     width: 80%;


     background-color: #E8E8E8;


 } */


 </style>


 </head>


  


  


 <body>


 <div id="wrapper">


  


 <div id="header">


 <div id="cornernav">


 <h2>Interent Service</h2>


 <p>


 This is a box designed to be a short and comprehensive. You can use it to give a statement for what the website is about, a quote or simply some random text. Anything goes, since you are the one that is going to use it. There is enough space for three full lines of text. Enjoy!


 </p>


 </div></div>


  


 <br />


 <div id="sidenav">


 <h2>Site Navigation</h1><br />


 <p><a href="#">Home</a><br />


 <a href="#">About</a><br />


 <a href="#">Contact Us</a><br />


 <a href="#">Portfolio</a><br /></p>


 </div>


  


 <div id="content">


 <h2>Omega Destiny</h2>


 <p><a href="#">Welcome</a> to my website template called Omega Destiny. It is a big improvement from my previous design called "Arcane Flame" and is meant to have a very professional look with its gray theme.


 Omega Destiny is table-less and entirely based on divs.</p>


 </div>


  


 <!--


 <div class="footer">


 Design by "Moridin". Copyright 2006 All Rights Reserved.


 </div> -->


 </div>


 </body>


 </html> 

Any and all help and comments is appreciated.

Best Regards,
Moridin

On this site http://www.freewaytransmissions.com I am having issues with the spacing on the navigation. The nav is an ul and I used inline css for spacing the links apart, but as you see in Chrome they are spaced correctly, but in IE they are not aligned correctly. If someone can shed some light I'd appreciate it. Thanks. Tom

Okay, I'm about 6 steps into an effort to redo a section of my site... And while I swear I started out using a DIV/CSS based layout that worked in ALL browsers suddenly that is no longer the case.

What I'm trying for is a navigation bar that stays fixed to the left... to the right of it are esentially 4 stacked areas:
1) the top header should stay glued to the top.
2) a middle content area that should flex reletive to the things around it
3) the second-from the bottom thing stays glued to the bottom, but has a bottom margin to place it above the footer.
4) the bottom footer should stay glued to the bottom.

It works in all of my Mac browsers (Safari, Firefox, IE) as well as Firefox for windows. But IE 6.x for Windows insists on displaying all of the right-side elements way down the page... below the end of the left navigation. I simply can not force it to float/wrap to the right.

Here is what I've got: http://digipix.jeffntom.com/TEMPLATE_UI-5.php

Ignore the whiz-bang JavaScript stuff displaying the images, etc... and help me figure out what's up with my DIV/CSS?

Here is the Div structu
html4strict Code:
Original - html4strict Code <div id="leftnav"> ...leftnav stuff... </div> <div id="rightbody"> <div id="header"> 1) Right-Top: ...header area... </div> <div id="content"> 2) Right-Middle: ...large image area... </div> <div id="thumbnails"> 3) Right-Lower: ....image thumbnail area... </div> <div id="footer"> 4) Right-Bottom: ...footer area... </div> </div>

  

     <div id="leftnav">        


              ...leftnav stuff...


     </div>


     <div id="rightbody">


         <div id="header">            


              1) Right-Top: ...header area...


         </div>


         <div id="content">            


             2) Right-Middle: ...large image area...  


         </div>


         <div id="thumbnails">


              3) Right-Lower: ....image thumbnail area...


         </div>


         <div id="footer">


             4) Right-Bottom: ...footer area...


         </div>        


     </div> 

Here is the CSS:
css Code:
Original - css Code #leftnav { margin: 0; padding: 0; position: fixed; top:0px; width: 200px; bottom: 1px; // this locks the div to the browser bottom (minus 1px) float: left; background:#cccccc; valign: bottom; } /* this is a container that holds everything except the left navitation */ #rightbody { /* width: 100%; */ } #header { position: fixed; top: 0px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #content { margin-top: 60px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #thumbnails { position: fixed; bottom: 51px; margin-left: 210px; margin-right: 10px; background: #ffffff; } #footer { position: fixed; bottom: 0px; margin-left: 200px; margin-right: 10px; background: #ffffff; }

  

  


 #leftnav {


     margin: 0;


     padding: 0;


     position: fixed;


     top:0px;


     width: 200px;


     bottom: 1px; // this locks the div to the browser bottom (minus 1px)


     float: left;


     background:#cccccc;


     valign: bottom;


 }    


  


 /* this is a container that holds everything except the left navitation */


 #rightbody {


     /* width: 100%; */


 }


  


     #header {


         position: fixed;


         top: 0px;


         margin-left: 212px;


         margin-right: 0px;


         background: #ffffff;


     }


     #content {


         margin-top: 60px;


         margin-left: 212px;


         margin-right: 0px;


         background: #ffffff;


     }


     #thumbnails {


         position: fixed;


         bottom: 51px;


         margin-left: 210px;


         margin-right: 10px;


         background: #ffffff;            


     }


     #footer {


         position: fixed;


         bottom: 0px;


         margin-left: 200px;


         margin-right: 10px;


         background: #ffffff;        


     }         

I was wondering if anyone knows of downloadable software for cross-browser testing (other than downloading all browsers manually). I know there are several websites that offer these features, but I'd like downloadable software as well.

It would be even better if it offered some emulators for mobile device browsers as well....

Anyways, just wondering if anyone knows of anything good other than the online web service ones.

Hi,

I have a template that works perfectly in Internet Explorer, but doesn't work well in all the other browsers.

Here is the template: http://www.gmaptools.com/redemo/format.html

(The scrollbar located on the right of the page doesn't contain to 100% height in the other browsers)

The entire page must stay at 100% height and 100% width, and work in the other browsers the same way it works in Internet Explorer.

Does anyone know why it isn't working in the other browsers?

I need it to work in:
1. Internet Explorer (Windows)
2. FireFox (Windows & Mac)
3. Opera (Windows)
4. Safari (Mac)

I really appreciate any assistance you can give me.

Thanks in advance,

What do you use for Cross Browser Testing? I just came across BrowserCam ($25 per year) at fundable.org. Do you recommend it?

thank you.

Dr. Mk.

How does one make a header like this cross browser compatible? It works in most browsers but I noticed in IE8 it renders the header weird. Here is the CSS:
Code:

.header { position: relative; padding-bottom: 0; z-index: 20; }
#banner-top { float: right; line-height: 0; margin: 20px 20px 20px 0px; }
.logo { float: left; margin: 0 50px 0 20px; }
.logo.image { line-height: 0px; }
.logo .plain-text { font-size: 20px; line-height: 30px; font-weight: bold; }
.logo #tagline { font-size: 11px; font-style: italic; }

#search-bar { float:left;
              margin-top:25px;
              z-index:500;}

#search-bar #home_search { 
display: block;
    height: 40px;
    margin: 0;
    padding: 4px;
    position: relative;
    width: 595px;}

#search-bar #home_search_input { background: none repeat scroll 0 0 transparent;
    border: 1px solid #C6C6C6;
    color: #666666;
    display: inline-block;
    font-size: 12px;
    height: 40px;
    line-height: 14px;
    padding: 0 10px;
    width: 480px; }




#search-bar #home_search_submit {
	border: 1px solid #dc5653;	
    background: #fe5d62; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fe8781) to(#fe5d62)); /*old webkit*/
    background: -webkit-linear-gradient(#fe8781, #fe5d62); /*new webkit*/
    background: -moz-linear-gradient(#fe8781, #fe5d62); /*gecko*/
    background: -ms-linear-gradient(#fe8781, #fe5d62); /*IE10*/
    background: -o-linear-gradient(#fe8781, #fe5d62); /*opera 11.10+*/
    background: linear-gradient(#fe8781, #fe5d62); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#fe8781, #fe5d62); /*PIE*/

 repeat scroll 0 0 transparent;
    border: 0 none !important;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    height: 43px;
    padding: 0 10px;
    margin-left: 6px;
    width: 80px;}

Does anybody know how to tweek this code to render the same in all browsers? Freaking IE8!