|
CSS - Ie / Mozila Compatibility Issue(s)
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. 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 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. 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
*/
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 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. Hi, First I am a newbie for css and JS. I got a free code from web and developed the following site, http://www.rit.edu/~801www/BackupReliability/ The css and javascipt that I am using is not working properly in Mozilla. Could some one show me please how to fix it???? If you could see most of the text is over flowing in the scrolling area?? Can someone please give me some ideas. Thanks a million in advance. WOOW hi friends... I am designing a site http://cvtechnoforum.com/ problem is that when I am using IE then every control are at their appropriate place but for mozila (new version..I have downloaded last day),it is not showing the my banner(logo) image appropriatly. please check it in new mozila browser....even in the old mozila,it is showing correctly but for new mozila banner image width is reduced to almost its half length while image is 1400 wide. please help me.... thanks for any help in advance Tabindex=-1 work in IE but not in Netscape or mozila browser I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on? I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value". However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag? I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible. Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css"> </head><body> <div id="header"><a href="index.html"> Deminyx</a></div> <div id="side"> <table> <tbody> <tr> <td><a href="service.html">The Service</a></td> </tr> <tr> <td><a href="cost.html">The Cost</a></td> </tr> <tr> <td><a href="ease.html">The Ease</a></td> </tr> </tbody> </table> </div> <div id="content">This is my content, I wont waste your time.</div> </body></html> and the CSS Code:
body {
background-color:#666;
}
#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}
a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}
a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}
table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}
#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}
A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites? Is css the best way to design an html site now a days? Sorry im a newbie in this, Im going to start learning soon. Thanks !!! Hi all, Compatibility with different browsers, link one and link looks good in ie but gets overlap in Firefox and too far apart in Opera. Does anyone know how to make this menu compatible with a least these tree browsers. Any help is greatly appreciated thanks. Code:
<style type="text/css">
ul { list-style-type: none; margin: 1.0em 0 0 30px; padding: 0; position: relative; overflow: visible; height: auto; }
ul li { height: 1.6em; width: 230px; }
ul li a, ul li a:visited { width: 200px; display: block; color: black; text-decoration: none; background: yellow; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px;}
ul li a:hover { display: block; background: green; color: black; }
ul li a.currentpage, ul li a.currentpage:visited { background: red; color: black; padding: 3px;}
</style>
<ul>
<li><a href="menu3.html" class="currentpage">Main page </a></li>
<li><a href="page2.html">Dummy page 2</a></li>
</ul>
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. I have been working a rounded content box approach. The layout rendered beautifully in Firefox, yet IE threw a wrench into my layout. The approach has to be re-thought and aligned for compatibility with IE. The HTML and CSS code validates on the server. The situation may relate to the Box Model Hack, but I have little familiarity with the various workarounds and hack techniques. My questions relate to improving my current approach and incorporating any hacks if necessary. The layout no longer renders properly in Firefox since adding the width property to the following classes. div.ArticleHeader div.ArticleHeader div div.ArticleFooter div.ArticleFooter div My round content approach began from the following article: http://www.redmelon.net/tstme/4corners/ My idea involved an approach, which could incorporate numerous content box graphics; just like using tables. The content box could be square with one corner angle or rounded corner; outlined, embossed, etc. The redmelon approach uses a div wrapper containing the divs for the top, content, and bottom. My approach removed this div wrapper, which may be the first indicator. Let me simplify my questions. Would you recommend adding a wrapper around the content box beside the ID (navigation) wrapper? What Box Model hack would you recommend for my layout? How does the width property affect my content boxes? If I comment out the width, the layout renders in Firefox; IE still fails to render it. The #navigation container has a fix width; yet the #maincontent container has a min-width and max-width. Tricky! Why does the graphic, in div.ArticleFooter, extend the full width of #Navigation container? The class has a margin of 20px. The parent container also has a margin of 20 px? IE renders the whole layout as a mess. Once these content boxes address the box model, then I could continue addressing other IE issues like the fieldset, pre, and floats. Some people have mentioned other approaches, but I prefer fixing this approach before move on to a better method. It helps me to learn the idiosyncrasies behind CSS and browser implementation. In addition, it helps me when aligning the other CSS style with IE. Please give suggestions and lead me in the right direction. http://neville.f2o.org/Template_Sample.html Alright. I've got a simple layout - so far just a header in an HTML document with a linked to CSS document. The two interact with one another fine, that's not my problem. My problem lies between Internet Explorer and.. every other browser. As usual. Anyways, here's my header in Internet explorer: and in FireFox: The IE document is more or less what I need the FF to look like. I made some changes to the initially correct documents in FF to work with IE and screwed FF up, and I really have no idea how to sustain both. Now the HTML document: html Code: Original - html Code <head> <style type="text/css"> @import url(style/style.css); </style> </head> <body> <div align="center"> <div id="header"> <form> <input type="text" value="user" id="user"> <input type="password" value="pass" id="user"> <input type="submit" value="Submit" id="submit"> </form> </div> <div id="nav"> <ul> <li class = "active"><a href="index.php">home</a></li> <li><a href="/services">services</a></li> <li><a href="/pricing">pricing</a></li> <li><a href="/jobs">jobs</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> </div> </body> <head> <style type="text/css"> @import url(style/style.css); </style> </head> <body> <div align="center"> <div id="header"> <form> <input type="text" value="user" id="user"> <input type="password" value="pass" id="user"> <input type="submit" value="Submit" id="submit"> </form> </div> <div id="nav"> <ul> <li class = "active"><a href="index.php">home</a></li> <li><a href="/services">services</a></li> <li><a href="/pricing">pricing</a></li> <li><a href="/jobs">jobs</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> </div> </body> annnd the CSS: css Code: Original - css Code /* CSS Document */ body{ font-family:Verdana, sans-serif; text-align:center; margin:0px; } #header{ width:770px; height:69px; background: url(head.png) no-repeat top center; text-align:right; vertical-align:top; padding: 14px 40px 0 0; border-left:url(borderleft.gif); } img { vertical-align: bottom; display: block; } input{ height:18px; padding: 0px; width:70px; } #submit{ font-size:10px; font-weight:bold; } #nav { width:770px; background-color:#d2e3a6; height:24px; padding:0px; font-size:11px; } #nav ul { float: left; width: 770px; background-color:#dse3a6; margin: 0; padding: 0 0 0px 20px; list-style: none; } #nav ul li { float: left; margin: 0; padding: 0; } #nav ul li a { display: block; float: left; margin: 0 0 0 0; padding: 6px 10px 9px 10px; font-weight: bold; text-decoration: none; color: #555; } #nav ul li a:hover { background: #d9d9d9; } #nav ul li.active a, #nav ul li.active a:hover { margin-top: 0; padding-bottom: 10px; background: url(hover.gif) repeat-x bottom right; }
I'd be very appreciative if anybody could point out what's causing this problem. If you need any further information I'd be glad to provide it - note that the header image is blanked out on purpose. Thanks! 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>
|
|||||||