CSS - Cross Browser Css Problem

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

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

Ok, so I've having some problems getting a webpage I'm designing looking good (I'm better at the "behind the scenes" coding, not so much the visual part). Anyway, I'm having some problems in Firefox and even more in IE, so here goes. In Firefox I want it to extend all the way to the bottom of the page, I tried adding "min-height:100%" to the container's styles, but that doesn't work. Can I not use a percent for the min-height? If I directly declare the height to be 100%, then the body can expand outside of the container rather than the container expanding with it. I also want to make sure that the body is always completely filling the container. The page in question is he
http://www.magicsoftinc.com/michigans_edition/
My styles are below and you can view the page source or use Firebug to see the elements I'm talking about

Code:

a:link {
	color:black;
	text-decoration:underline;
}
a:active {
	color:black;
	text-decoration:none;
}
a:hover {
	color:black;
	text-decoration:none;
}
a:visited {
	color:black;
	text-decoration:underline;
}
body {
	background-color:#BBCCFF;
	font-family:Calibri, Arial, Helvetica, sans-serif;
	margin-bottom:0;
	margin-top:0;
}
div {
	border:0px solid #FF0000;
	border-top-width:0;
}
img {
	border-width:0;
}

.even{
	background-color:#FFCCBB;
}
.odd {
	background-color:#BBCCFF;
}
.preload{
	display:none;
	left:-9001px;
	position:absolute;
	top:-9001px;
}

#background {
	height:100%;
	left:0;
	margin:0;
	overflow:hidden;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-9001;
}
#backgroundLeft{
	position:fixed;
	top:0;
	left:0;
	height:100%;
}
#backgroundRight{
	position:fixed;
	top:0;
	right:0;
	height:100%;
}
#body {
	background-color:#FFFFFF;
	color:#000000;
	min-height:250px;
}
#container {
	border:1px solid black;
	border-bottom-width:0;
	border-top-width:0;
	height:100%;
	margin:0 auto 0 auto;
	min-height:100%;
	min-width:760px;
	width:95%;
}
#diggThis {
	background-color:transparent;
	margin-left:-27px;
	z-index:-9001;
}
#footer {
	background-color:#FFFFFF;
	text-align:center;
	font-size:small;
}
#header {
	background-color:#000000;
	height:271px;
}
#leftMenu {
	background-color:#BBCCFF;
	float:left;
	margin-right:4px;
	padding:4px;
	width:260px;
}
#main {
	min-width:500px;
	padding:4px;
}
#main .title {
	font-size:xx-large;
	font-weight:bold;
}
#menu {
	background-image:url("images/menuGradient.png");
	background-repeat:repeat-x;
	border-top:1px solid #7E7E7E;
	border-bottom:1px solid #4E4E4E;
	color:#FFFFFF;
	font-weight:900;
	height:35px;
	position:relative;
	top:-35px;
}
#menu a:link {
	color:white;
	text-decoration:underline;
}
#menu a:active {
	color:white;
	text-decoration:none;
}
#menu a:hover {
	color:white;
	text-decoration:none;
}
#menu a:visited {
	color:white;
	text-decoration:underline;
}
#menu .button {
	background-image:url("images/menuButtonUp_blue.png");
	background-position:center;
	background-repeat:no-repeat;
	color:#FFFFFF;
	font-weight:600;
	height:35px;
	overflow:hidden;
	padding:0;
	text-align:center;
	width:106px;
}
#menu table {
	padding:0;
	text-align:center;
	width:100%;
}
#menu tr {
	padding:0;
}
#userPanel {
	position:absolute;
	right:3%;
	top:136px;
	width:200px;
	height:100px;
	background-color:#BBCCFF;
}

Hi there, I am reposting this question after removing the extraneous items from the site. Basically, I can get things to line up in either IE or FF, but not both, I have managed to solve this with past sites, but can't seem to figure this one out! Currently I have it set so it is correctly displayed in IE:

http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm

Please, please help me to figure out how to do fixes for this issue, I have been searching online but can't seem to figure it out and am very frustrated!
Thanks so much and here is my CSS:

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #999999;
text-align: center;

}
#title{
margin-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: relative;
float: left;
clear: left;

}
#rightBox {
border-right: 2px solid #666666;
width:625px;
padding: 0px;
border-top: 2px solid #666666;
border-bottom: 2px solid #666666;
border-left: 2px solid #666666;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
background: #ffffff;

}
.mainPic {
margin-top: -475px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 30px;
position:relative;
float: left;
clear: left;
z-index: 100;
}

img.pic{
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;

}
PS: i know I don't need to have all my margin positions shown (ie: may eventually become margin: 0px), however I have kept it like this until I figure out what my problems are.

Hi All
Can anyone please tell me where am I going wrong in code below it fairly straight forward, Style switcher works fine. The problem is When I'm using Firefox background image doesn't show but there no problem in IE. why????
Thanks
Zed
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="styleSheetSwitcher.js"></script>
</head>

<body><center>
<div id="main">Hello
<div id="centerbox">world</div>
</div></center></body>
</html>

css code
Code:

#main {
		position: relative; 
		background-image:url(images/Driving_bkg3.gif);
		background-repeat: no-repeat;
		height: 100%;
		left: 5%;
}
    

    #centerbox {
        margin: -20% 3% 0 40%;
        padding: 0%;
        width: 41%;
        height: auto;
        background-color:#C9F;
        }

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?

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!

I know there are a lot of articles lying around about this problem, but im having trouble with css layout for a site im working on,

in IE6.0 the site displays as it should do.

in Opera 7.23 + 7.11 the site displays with the main text sitting on the logo for the page,

in firefox it displays as it does in opera.

I am using includes for the full page with no html in the index.php page, i have tried this without includes bur get the same problems as before.

the site addy is:

http://www.kptspanishproperties.org.uk

any help wpuld be great, also im not using tables just using css for all the layout needed

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

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.

I have the following site:

www.artsenvacature.nl

I've heard the site doesn't look nice on MAC OS (I've got a PC) and some tiny details fail on FireFox. It only looks perfect in IE 6.0.

Is anybody interested in making the CSS compatible? I'm very well willing to pay for it.

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 all,

I'm relatively new to pure CSS (as opposed to hacking tables together) and I'm experiencing a cross-browser inconsistency that I'm hoping I can get help with.

I've created a table using DIVS as follows (I've given just one line as an example):

Code:

<div id='dashed_box'>

<div class='divleft'>Company Name:</div><div class='divright'><input type='text' name='company_name' size='32' class='boxes'></div>

<div class='spacer'>&nbsp;</div>
</div>

And the CSS is this:
Code:

#dashed_box
{
  border: 1px dashed #333333; 
  margin:5 auto;
  padding:5 auto;
  width: 600px;
}
.divleft {
  font-family: verdana;
  font-size: 12px;
  line-height: 20px;
  float: left;
  text-align: right;
  color: #000;
  width: 49%;
  }

.divright {
  font-family: verdana;
  font-size: 10px;
  float: right;
  text-align: left;
  font-weight: bold;
  color: #000;
  width: 49%;
  }
 
div.spacer {
  clear: both;
  }

..In IE7 the box is laid out perfectly, as I wanted it to:




..but in FireFox 5.0, it is laid out as follows, which I don't want:



Can anyone point out what I might be doing wrong?
Or might it be a case of defining HTTP_USER_AGENT and specifying CSS depending on browser?

All help appreciated.
Woolyg.

Hi

I have created a site which looks good in internet explorer.

But being a bit of a newb i never thot to check it in other browsers till now, and it just doesn't take my layout at all in opera or firefox

is there anything i can do to get around this?

cheers boyindie