|
CSS - Cross Browser Compatibility - Tips Required
Hi,
I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox. Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't. My question is would I be better developing separate CSS files for each browser type and use a script to determine which one? If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful. Regards Paul Similar TutorialsIs there any way to center a <div> block itself, not the text in it? Using this code:
Code: #block{
padding:2px;
margin-left:auto;
margin-right:auto;
width: 480px;
}
(which I am currently using) centers it in Firefox, but not IE. Also the code which adds a rollover effect to the links in the menu works in Firefox but not IE. Code: #menu li:hover{
background-color:#369;
}
The site's current URL is here, because my webhost's disk is full, and they are having problems with PHP scripts not working. PHP Code: #searchBox { float:right; margin:0em; padding:0em; margin-right:0.2em; clear:right; background-image:url(/images/site/backgrounds/searchBox.jpg); /*border:black solid 1px;*/ } #searchBox input { margin:0em; padding:0em; background-color:#d2c5a2; } .submit { background-color:#6F5F42;; color:#483e2b; font-size:smaller; font-weight:bold; margin:0em; padding:0em; } and html PHP Code: <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;"> <label>What are you shopping for?</label><input type="text" name="search" size="14"/> <input class="submit" type="submit" name="submit" value="Search" /> </fieldset> </form> </div> i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!! also is there anyway to make sure that the font sizes are same/similar in both IE and FF? http://www.zahra-zahra.com/fullpage.html EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box.. http://warcraftpress.com/index.php (If it displays a whitepage, revisit the link again) Working on browser compatibility, and well, IE is a stubborn one, yes? For some reason, it places post areas below the right menu, as well as some spacing issues. I've checked in FireFox 3 (which I designed in), Safari, and Opera, but only IE does this issue. (IE7, I mean. I no longer care to support IE6) One other thing I see is the menu items's arrow graphic cuts off in other browsers, I'd say it has to do with the height and other specifications in the CSS, but I do make a mess to try and make something work :P The big arrow graphic (the normal) is at a height of 22, while the small (sub menu) one is 18. Both are in pixel measurements. Thanks a lot in advance for the help! You can find the stylesheet he http://warcraftpress.com/wp-content/themes/default/style.css Hi, I haven't worked with CSS since before the whole Firefox craze and I'm having some compatibility issues when it comes to getting my website to work properly in both IE, Firefox and Safari. I was able to achieve the perfect layout in IE but Firefox and Safari just throw it all out of whack. Are there way to ensure the same output (like linking to W3C or something) or perhaps I'm just doing something wrong. I've posted my code and you can see the difference I'm talking about in both browsers. 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=ISO-8859-1" />
<style type="text/css">
<!--
/* GRID PLACEMENT */
html, body {
height:100%;
text-align:center;
margin:0;
padding:0;
}
div {
display:block;
}
div#holder {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
}
div#links {
width:inherit;
}
div#page {
border:2px #4a86b2 solid;
width:inherit;
height:inherit;
padding:1px;
}
div#page div {
width:inherit;
}
div#header {
height:75px;
}
div#divider {
height:20px;
}
div#content {
height:80%;
}
div.left {
height:100%;
float:left;
width:180px;
border:1px white solid;
}
div.right {
height:100%;
float:right;
width:610px;
border:1px white solid;
}
div#footer {
height:20px;
border:1px white solid;
}
/* GRID COLORS */
div#header, div#footer {
background:#000066;
}
div#divider {
background:#6392e6;
}
div#content div.left {
background:#a5be00;
}
-->
</style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="divider">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="content">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
I've decided to make a thread to ask for help on my journey of recoding my design to CSS/XHTML tableless. I understand you all do this out of the goodness of your hearts, so I hope you don't take this as a "I demand assistance" thing. (original layout -> Here ) http://www.gaminghybrid.com/wii-style.html The current issue is the menu items. In FireFox 2, it looks perfect. The right proportions and everything. However, in IE7, between the menu header and the first menu item, there is some strange spacing. What could be causing this? For now, all my CSS is on the page, where I'll have it be in a CSS file once I've completed. Thanks in advance It's about time I moved away from the incorrect table layouts and help contribute to a better web. Ive been searching for about 2 days now for a CSS browser compatibility chart that includes Ffirefox and IE. Every time I think ive found a good one it turns out to be a dead link or theres no chart there. I keep finding links to the "Full CSS Property Compatibility Chart", supposed to be located he http://corecss.com/properties/full-chart.php but it just redirects you to a main page with no chart. Do any of you know any good charts that tell you what CSS tags work for firefox and IE? Well actually all I need is one that features firefox then I can compare it to one with internet explorer. Thanks in advance to anyone that can help. Hello all. I was hoping someone could answer what is hopefully a simple problem and provide and equally simple solution but anything will be appreciated! The problem: I have created a border in a stylesheet (already tested and no issues there) code: table.outset { border-width: 8px; border-style: outset; border-color: #c94066 #c94066 #A9A9A9 #A9A9A9; } called in the body of the code by: <table class="outset" ......> Now, this renders perfectly in IE (at least 7) but fails in Firefox and Safari. It appears that in FF and Safari these browsers completely disregard the chosen colors and outset style (FF and Safari give a border with four solid and separate colors). IE does a great job but I would like to make this compatible with the rest. Is this even possible (i.e. coding issue)? Or, does anyone have any other suggestions as to creating a 3D effect around a table in Dreamweaver CS3? I have searched for and used various codes offered on the web and nothing has worked as well as this simple outset property. Any suggestions?! Hi, I'm having a browser compatibility issue that I'm hoping someone can help me with. This image rollover code shows up fine in IE 7, but not in Firefox. Any simple solutions? Is this because I'm using a table? I'd much appreciate any help! I've included the HTML and CSS below: Thanks for any assistance! darleen HTML************ Code: <div id="menu"> <center> <table border="0"> <tr> <td><a href="exsum.html" class="sprite1"></a></td> <td><a href="need.html" class="sprite2"></a></td> <td><a href="progcon.html" class="sprite3"></a></td> <td><a href="progfac.html" class="sprite4"></a></td> <td><a href="budget.html" class="sprite5"></a></td> <td><a href="protim.html" class="sprite6"></a></td> </tr> </table> </center> </div><!--end menu div--> PART OF CSS***************** Code: /*
* START ROLLOVER MAIN PAGE
*/
<!-- 1red -->
a:link.sprite1, a:visited.sprite1{
background:url(images/red3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite1{
background-position:0px 0px;
}
<!-- end 1red -->
a{background:url(../Image/background.gif);}
a:hover{background-position:-50px 0px;}
<!-- 2orange -->
a:link.sprite2, a:visited.sprite2{
background:url(images/orange3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite2{
background-position:0px 0px;
}
<!-- end 2orange -->
<!-- 3yellow -->
a:link.sprite3, a:visited.sprite3{
background:url(images/yellow3.jpg) no-repeat top left;
background-position:-127px 0px;
width:124px;
height:500px;
display:block;
}
a:hover.sprite3{
background-position:0px 0px;
}
<!-- end 3yellow -->
<!-- 4green -->
a:link.sprite4, a:visited.sprite4{
background:url(images/green3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite4{
background-position:0px 0px;
}
<!-- end 4green -->
<!-- 5blue -->
a:link.sprite5, a:visited.sprite5{
background:url(images/blue3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite5{
background-position:0px 0px;
}
<!-- end 5blue -->
<!-- 6purple -->
a:link.sprite6, a:visited.sprite6{
background:url(images/purple3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite6{
background-position:0px 0px;
}
<!-- end 6purple -->
/*
* END ROLLOVER MAIN PAGE
*/
Hello, newbie he I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome! http://www.manplusrocks.com/MAVIN/template.html http://www.manplusrocks.com/MAVIN/css/mavin.css The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue... Any comments would be greatly appreciated, thanks! Hello, I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it?? I am also looking for someone to help me in the future for website design, recommendations appreciated. signature sound .com under "training" and "workshops" If there is anymore information needed to help me I will provide. extra info: I cleared floats within HTML and not within CSS. Here is some CSS for the training page: #song-logo { margin:35px 0px 0px 44px; } #discover-songlist1 { margin:0px 40px 0 50px; float:left; } #discover-info { float:left; width:500px; margin:-36px 0px 0px 130px; } #song-pictures { margin:-65px 48px 0px 0px; } #more-info { margin: -30px 0px 0px 45px } #record-logo { margin:55px 0px 0px 44px; } #discover-recordlist2 { margin:0 143px 0 50px; float:left; } #discover-every { width:500px; float:left; margin:-36px 0px 0px 62px; } #record-pictures { margin:-65px 55px 0px 0px; } #more-info2 { margin: -30px 0px 0px 45px } #discover-list3 { width:460px; float:left; margin:50px 0 0 50px; } 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;
}
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! 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 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 creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. 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 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 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. 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! Im not a newbie to CSS but I am still a bit new to hand coding and div positioning. heres the link - http://members.cox.net/tekjock/test/ the body section I want it to be bottom 5px Left 5px right 5px I can get it to look good in firefox but IE it looks like crap. I have tried the above and it does not work. Any suggestions Thanks |
|||||||