|
CSS - Browser Compatibility Issue
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
*/
Similar TutorialsHello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan 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. 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>
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?! 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 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. Is 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. 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 quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html? my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility? Hello, I have my CSS nav bar working perfectly in FF but in IE it is moved over too far to the right. I have no idea what is causing the difference but have tried a lot of stuff with no luck. I am pretty new to CSS so it could be a minor thing...thought you guys might be able to help! You can see the nav bar at stratastones.net http://www.sphinxgaming.com/OpportunIT/?page=home In any browser except IE6 the footer floats just above the bottom of the page, but in IE6 it goes WAY down. Here is the CSS code: Code: html { height: 80%; }
body
{
min-height: 80%;
height: 80%;
}
A:link {text-decoration: bold}
A:visited {text-decoration: bold}
A:active {text-decoration: bold}
A:hover {
text-decoration: bold;
color:#307D7E;
}
#container
{
width:80%;
height:100%;
margin:0 auto;
text-align:center;
font:helvetica;
display:block;
}
#header
{
width:auto;
display:block;
font-weight:bold
}
#body
{
width:auto;
font:14px "Helvetica";
text-align:left;
min-height: 124%;
display:block;
background-color:#BDEDFF;
}
ul#navbar {
background:url(images/navbg.png) repeat-x left top;
margin:0;
border-bottom:1px solid #00CCFF;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Helvetica";
text-decoration:none;
color:#151B8D;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#151B54;
}
ul#navbar li a#current {
border-bottom:1px solid #00DDFF;
border-top:1px solid #00DDFF;
color:#151B54;
font:bold 16px "Helvetica";
}
#titlebar
{
width:auto;
background-color:#BDEDFF;
padding-bottom: 5px;
text-align:left;
font:bold 19px "Helvetica";
display:block;
}
#footer
{
width:auto;
display:block;
background-color:#AFC7C7;
}
Hello, I'm having issues with my top navigation on my upcoming website. For some reason it isn't displaying correctly in IE7, but in IE8+ and Firefox it's working just fine.. URL is.. http://itelligentconsulting.com/itelligent/ Any ideas? Thanks. Good day, I am currently designing a new website. It is located he ...www.topfloridavacations.com... in IE, it looks okay, im not at all close to done visuals on it, but i mean, the general idea is working, and thats how it should look for IE. However, I was checking it out with Firefox before, and wow, completely distorted. I dont' even know whrere to begin. I can't understand why it's so messed since IE is normally the trouble maker. The css is located at ...www.topfloridavacations.com/scripts/css-mainStyle.css... Guys, dont even know where to start on this one, and guess I'm blindly keeping my fingers crossed that it's some easy, 1 step solution. Thanks for any advice that can be given. I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he http://bit.ly/42iVkG and the menu script I used is he http://bit.ly/4pvcXj Thank you. Here are a couple of questions, all are in reference to THIS LAYOUT 1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this? 2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this? 3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing. Thanks in advanced! I got it figured out. Can delete this thread! Hi! I'm relatively new at designing websites...I'm a designer...trying to jump into web. I usually use the Dreamweaver templates...and go from there. This site I've built doesn't show up at all in IE. Where'd I go wrong? Thanks for any help. I've checked out several hacks and things, but without know why it's not showing up I don't really know where to go to look for answers. Hi there! I have noticed when I go to my site in firefox, and i'm guessing it probably happens in other browsers too- the 3rd post (the title and the information saying 'bicycles for girls') drops down outside the div it should be in and messes up the bottom layout of the page. The weird thing is.. If you hit refresh it automatically fixes itself. Now this has happened quite a few times when I have looked at it. Is this any kind of recognised css bug? Any feedback would be greatly appreciated, hellosam . co . uk / portfolio Sorry, have had to put spaces in the above address so it allowed me to post! Cheers, Sam |
|||||||