|
CSS - Div Css Works In Ie But Not Firefox.
I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all.
Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. Similar Tutorialshi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('images/gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('images/gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:560px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col
{
float: left;
width: 70%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol
{
float: left;
width: 94%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol a {
text-decoration:none;
}
#rescol td {
text-align: center;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2
{
margin: 0;
}
hr.c {
border: none 0;
border-top: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
text-align: center;
height: 1px;
}
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone. Aaron <style type="text/css"> body { background-image: url('images/main_background.jpg'); background-color:#000000; background-repeat: no-repeat; margin: 0px; } .top_text { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFF00; font-weight:400; } .bold_grey{ font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } .small_text{ font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } form { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px; font-weight:300; } .select { font-size:9px; height:15px; } .input { font-size:9px; height:16px; width:160px; } .zip { width: 94px; height:16px; font-size:9px; } .Footer_links{ color:#CCCCCC; font-size:14px; font-weight:300; text-decoration:none; } </style> I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different. Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous. The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess! Thank you so much in advance, -lindsey http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css those are my two files, it seems to be working okay in IE6/win but not in firefox... anyone can maybe help me out? thanks it is much apprceiated. edit: also both files validate a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. Hey, Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly. Ive never encounterd this before, and have run out of ideas. What do you think? Website Here Cheers, Smitch Hello. I am going to change my site to using a CSS file for font color and display and such. I am pretty new at using CSS files with my web site, other that messing with it in modifying my blog skin. I created one I want to use at: http://rhodesfamily.org/style.css, but I can only get it to work with IE. Here is my test page: http://rhodesfamily.org/index_test.htm. It will not display in Firefox, which is my main browser . Your help would be greatly appreciated! Thanks, Carl Thanks for reading my question. Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox? The hover works in both, but the visited only works in IE. I don't have a url for this page yet, so I've put it under my band web page. www.pierced.ca/Kelly/index.htm Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work. Thanks again, Brad Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong? http://markspixel.com/smoothtobacco/bio.htm Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
.style1 {
margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>
I'm having a display problem with the following code in Firefox. It works fine in IE. Basically I want the layout to look as close as it does in IE from firefox (I think I'm using the W3C CSS correctly?)... Any suggestions? Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body
{
background-color: #6699CC;
}
#topBanner
{
overflow: hidden;
width:100%;
height:15%;
}
#contentTable
{
height: 84%;
width: 100%;
border:1px solid black;
}
#leftMenu
{
background-color: #6695FF;
width: 15%;
height: 100%;
display: block;
border: 8px outset #999999;
padding: 1px;
vertical-align: top;
}
#contentArea
{
background-color: #FFFFFF;
width: 85%;
height: 100%;
display: block;
vertical-align: top;
border: 2px solid #999999;
}
.menuChildShow
{
display: yes;
}
.menuChildHidden
{
display: none;
}
-->
</style>
<script type="text/javascript">
function toggleMenu1(objName) {
temp = document.getElementById(objName);
if(temp.className == "menuChildShow") {
temp.className = "menuChildHidden";
} else {
temp.className = "menuChildShow";
temp.style.color = "#00ffff";
}
}
</script>
</head>
<body>
<div id="topBanner">
<img src="" width="2048" height="75">
</div>
<table id="contentTable">
<tr>
<td id="leftMenu">
<div id="menuItem1" class="menuParent">
<a onclick="javascript:toggleMenu1('sub1Item1');">Item #1</a>
<div id="sub1Item1" class="menuChildHidden">
Item #1 Child 1<br />
Item #1 Child 2<br />
Item #1 Child 3<br />
Item #1 Child 4<br />
</div>
</div>
<div id="menuItem2" class="menuParent">
<a onclick="javascript:toggleMenu1('sub2Item1');">Item #2</a>
<div id="sub2Item1" class="menuChildHidden">
Item #2 Child 1<br />
Item #2 Child 2<br />
Item #2 Child 3<br />
Item #2 Child 4<br />
</div>
</div>
</td>
<td id="contentArea">
Content area
</td>
</tr>
</table>
</body>
</html>
Ok so I have a page, and The opacity only works in firefox, not IE. This is the code im using img{border:0; filter:alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;} img:hover{filter:alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95;} any ideas? I am having a problem displaying text under images in IE, it looks fine on FF though. In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE? Here is an example page product_info.php?products_id=209 And this is the stylesheet stylesheet.css Any help would be much appreciated. Thanks Peter PS. Looks like I am not allowed to post links yet, I can send them to you if you like? i have 10 div's with abolute positioning and the css is external the html is like this <div class="1"> <div class="2">......... it works in IE but in firefox the images get put all below eachother on the left...except if i put the css inline it works It displays fine in firefox, but not in IE. I haven't done anything personally with websites since php was first coming out, so css is completely new to me and Im using a (now modified) template instead of from scratch. So any help would be great. WARNING: Linked site is not work-safe Site is at 'razornow.comlu.com' css code is: Code:
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #000000;
margin: 0px;
padding: 10px;
}
html, #wrapper, h1 {
margin: 0px;
padding: 0px;
}
img { border: 0px; }
#wrapper {
margin: auto;
text-align: left;
width: 710px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
line-height: 1;
position: absolute;
top: 0px;
left: 0px;
}
h2 {
margin: 0px 0px 5px 0px;
padding: 0px;
}
h3 {
padding: 4px 0px 0px 0px;
}
.block {
display: block;
}
.clear {
clear: both;
height: 10px;
}
.left {
float: left;
margin: 5px 20px 0px 0px;
}
.right {
float: right;
margin: 0px 0px 0px 20px;
}
.readmore {
text-align: right;
}
/* page structure */
#wrapper {
background: url(images/body_t.gif) top no-repeat;
padding-top: 20px;
}
#body {
background: url(images/body_bg.gif) repeat-y;
padding-bottom: 10px;
}
#body p {
background: white;
}
#nav {
position: absolute;
top: 25px;
left: 253px;
width: 450px;
height:35px;
background: url(images/nav.gif) repeat-x;
}
#nav ul{
padding: 0px;
margin: 0px;
list-style-type: square;
list-style-position: inside;
}
#nav li{
padding: 7px 16px 0px 16px;
margin: 0px;
height:35px;
list-style-type: square;
list-style-position: inside;
float:left;
border-right: 1px solid #FFFFFF;
display:inline;
}
.lastchild{border-right: 0px none #FFFFFF !important;}
#nav a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
}
#nav a:hover{
color:#fcff85;
}
#current {
float: left;
width: 235px;
margin-left: 10px;
margin-top: -10px;
background: url(images/menu_bg.gif) repeat-y;
border-bottom: 1px solid #05256b;
}
* html #current {
margin-left: 5px;
}
#content {
float: right;
width: 450px;
padding-top: 40px;
margin-right: 8px;
}
* html #content {
margin-right: 4px;
}
#footer {
background: url(images/body_b.gif) no-repeat;
text-align: center;
padding-right: 10px;
padding-left: 480px;
padding-bottom: 30px;
}
#copyright {
position: relative;
top: -8px;
color: #989898;
}
/* current column */
#current .nav {
margin: 21px 6px 5px 5px;
}
#current ul {
border: 1px solid #8497c2;
margin: 0px;
padding: 0px;
}
* html #current ul {
padding: 3px 0px;
padd\ing: 0px;
}
#current li {
list-style: none;
border: 1px solid #4e698f;
background: #01285f url(images/harry.gif) left center no-repeat;
padding: 0px 0px 0px 20px;
margin: 3px;
}
#current li.readmore {
text-align: right;
background-image: none;
}
#current ul a {
color: #beddff;
text-decoration: none;
display: block;
padding: 3px 12px 3px 0px;
}
* html #current ul a {
width: 100%;
w\idth: auto;
}
#current ul a:hover {
color: white;
}
#current .readmore {
padding: 3px 4px 4px 20px;
}
* html #current .readmore {
padding: 0px 4px 1px 20px;
padd\ing: 3px 4px 4px 20px;
}
#current .readmore a {
text-decoration: underline;
display: inline;
}
#currenttitle {
position: absolute;
left: 15px;
top: 409px;
}
* html #currenttitle {
top: 411px;
}
/* page content */
#content h2 {
line-height: 1;
margin: 0px;
padding: 20px 0px 0px 0px;
}
#content h3 {
margin: 10px 0px;
padding: 0px;
text-transform: capitalize;
}
#content p {
margin: 10px 0px;
padding: 0px;
}
#content .contentbox {
border: 1px solid #e1e1e1;
border-top: none;
padding: 5px 20px 10px 20px;
}
* html #content .contentbox {
padding-bottom: 11px;
}
#content, #content a {
color: #868686;
}
#content a:hover {
color: #000;
}
the menu at the site I am building myself at: http://sphinxgaming.ath.cx/ Works perfectly in firefox, all links are missing on the menu in IE And the validator gives me some very strange errors (document type does not allow element "BODY", for example) http://validator.w3.org/check?uri=h...lidator%2F1.654 Any ideas? By the way, I have tried 3 different DOCTYPES, with no better results I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css Code:
<!--[if IE]>QU
<link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"
type="text/css">
<![endif]-->
Here is the menu system: Code: menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
'<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
'<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
'<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
'<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
'<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
'<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
'</li></ul></li></ul></div>';
(It rests inside of a javascript function) and here is the CSS: Code:
/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0; font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;}
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Any help with this is greatly appreciated. Thanks. Re-coding a site I designed to follow web-standards and having a small problem with a gap in ie. Page-template Page is working fine in firefox, but in internet explorer the "content" div is getting pushed down from the "framemain" div. I set padding and margin all to 0 and that didn't help. I could get around this if I abs position my nav, but I'd rather do it this way. Any thoughts or help appreciated. Check out this site (WIP)... the issue specifically is with the Screenshots table... Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect. Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page... I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images. What makes IE decide to expand the <div> tag automatically. Here's the code pertaining just to the screenshots section. Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks! the CSS: --------------------------------------------------------- .screenshots_table { width: 100%; border: 1px solid #000; backgroung-color: #061840; line-height: 15px; } #screenshots_table_overflow { overflow: auto; padding: 0px; display: block; } --------------------------------------------------------- the html: --------------------------------------------------------- /* --- START SCREENSHOTS CONTAINER --- */ // establish the number of screens in the directory $dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/"; $screen_count = count (glob ($dir_path . "screen*.jpg")); echo"<td colspan='5'>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; /* start screenshots details tab */ echo"<td>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; echo"<td><img border='0' width='38px' class='display_block'"; echo"src='images/tab_left.jpg'></td>"; echo"<td width='100%' background='images/tab_bg.jpg'></td>"; echo"<td><img border='0' class='display_block' width='70px'"; echo"src='images/tab_screenshots.jpg'></td>"; echo"</tr>"; echo"</table>"; echo"</td>"; /* end screenshots tab */ echo"</tr><tr>"; /* start screenshots */ echo"<td>"; echo"<div id='screenshots_table_overflow'>"; echo"<table width='100%' border='0' class='screenshots_table'"; echo" cellpadding='0' cellspacing='0'>"; echo"<tr>"; // iterate through loop and display linked screenshots as req'd for ($i = 1; $i < $screen_count + 1; $i++) { echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>"; echo "<a href='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox' class='horizontal'><img border='0' class='border' src='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/small" . $i . ".jpg' /></a>"; echo"</td>"; } echo"</tr>"; echo"</table>"; echo"</div>"; echo"</td>"; /* end screenshots */ echo"</tr></table>"; echo"</td>"; /* --- END SCREENSHOTS CONTAINER --- */ --------------------------------------------------------- Hi I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE. Here is the link: Look first in Firefox at my menu then look at it in IE. http://www.bcit.gimppro.co.uk/index.php Also is their some way to test my CSS code to make sure it works in all browser. PHP Code: #menu { top:5px; width: 8.87em; /* set width of menu */ background: #eee; width: 100%; } #menu ul { /* remove bullets and list indents */ list-style: none; margin: 0; padding: 0; } #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: relative; top: 0; left: 100%; /* to position them to the right of their containing block */ width: 100%; /* width is based on the containing block */ } /* style, color and size links and headings to suit */ #menu a, #menu h2 { font: bold 11px/16px arial; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li { /* make the list elements a containing block for the nested lists */ position: relative; } div#menu ul ul ul, div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} #menu ul { list-style: none; margin: 0; padding: 0; width: 8.87em; float: left; } div.container{ position:relative; top:0px; left:0px; width:995px; height:auto; } #login{ position:absolute; top:300px; left:745px; height: auto; width:240px; font: bold 11px/16px arial; } #content{ position:absolute; top:300px; left:0px; height: auto; width:695px; margin:0 .25em; padding: 5px 15px; font: bold 11px/16px arial; border: 1px solid black; } #content h1, h2 { font-weight: bolder; } #banner{ position:absolute; top:0px; left:0px; height: auto; width:1000px; } Hi there, I'm trying to display paragraph with a table embedded in there inline. I hope the table can behave like a big letter in the paragraph, with the line aligned in the center of the table. For example, if I want to make "1/2" to a vertical "1 <hr/> 2", I would put it in a table and change the "display" property as follows: Code: <p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. I HAVE <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table> PIZZA. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This works perfectly for me on IE, but on Firefox only the "inline" property works, and the "vertical-align" property doesn't (i.e., the table and the line text are aligned at the bottom still). Did I do something wrong? Or is this a Firefox bug? Thanks |
|||||||