|
CSS - Why Doesn't This Css Work In Firefox??
Hi,
link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John Similar TutorialsMy drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code. Code:
#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
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;}
Here is the HTML. Code:
<div id="menu">
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
<li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
<li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
<li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="History">History</a></li>
<li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
<li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
<ul>
<li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
<li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
</ul>
<li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
<li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
<li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
</ul>
</ul>
</div>
Thank you in advance Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php Thanks, -Sam Hi guys Look here www DOT clickemarketing DOT com The date, before each article, should show at right. This date uses the .createdate css class, which is this Code:
.createdate {
color: #A9A9A9;
vertical-align: top;
padding-bottom:2px;
float: right;
font-size: 11px;
}
I don't know why IE shows it at left... FF shows ok Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ? Thanks Hi guys, I've trying to achieve the following. I want to have a div element floating on the right 100px from the top and the rest of content is filled with text. PHP Code: <div>[image]</div><p>text 1</p><p>text 2</p> I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right) If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div Any ideas how to achieve this? Below is my full html code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style> </head> <body> <div class="content"> <div class="floatright offset"></div> <div class="floatright imgholder"><h1>image</h1></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> </div> </body> </html> Hi All, We develoepd an Application for a client. This application uses CSS for all text including drop-down menu text and input box text. My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small. On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems. Browser is not an issue as its the same for him on both Netscape and IE. Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them. Need urgent help on this one.. please.. anyone with ideas help me! thanks all. Peace. Aaron This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help Hi there, Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on. Site URL is here, and the issue that I am having is as follows: I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud. Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-( If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful! Regards, Lawrence My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL http://www.invalidheart.org/carrie/ it doesn't work in anything but my resolution... can anyone help me fix this? I've had a huge hard time with this layout making it fit right, i tried using all css and i couldn't get it to fit. any suggestions? I'm wondering why does the padding doesn't work for the <p> tag... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p.pFrontPageTitle
{
margin: 0px;
padding: 200px 0xp 200px 0px;
color: #000000;
font-weight: bold;
font-family: verdana;
font-size: 12pt;
font-style: normal;
background-color: #FF0000;
}
</style>
</head>
<body>
<p class="pFrontPageTitle">What Our Customers Say .....</p>
</body>
</html>
Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. Hi, **UPDATE: Problem Fixed...change the z-index of the parent menu element, thanks mizzory!*** Thank you for viewing this post and your help is greatly appreciated! The navagation menu works great in IE8 and Firefox, however in IE7, the drop-down hides behind the content div. I have tried assigning z-index to the divs, but with no luck. #wrap { margin:auto; width:1000px; background-color: #FFFFFF; background-repeat: repeat-y; min-height:100%; position:relative; } html, body { margin:0; padding:0; height:100%; } #content { min-height: 400px; padding-bottom:50px; /* Height of the footer */ position:relative; } #header { height: 200px; } #footer { position:absolute; bottom:0; width:100%; height:50px; /* Height of the footer */ font-size: 14px; font:Arial, Helvetica, sans-serif, bold; text-align:center; color:#FFFFFF; } /*horizontal menu specifications*/ #menu { background: #FFFFFF; float: left; height:40px; } #menu ul { list-style: none; margin: 0; padding: 0; width: 142.85px; float: left; } #menu a, #menu h2 { font: bold 13px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #FFFFFF; margin: 0; padding: 2px; text-align:center; } /* main menu header: set font colour and background colour */ #menu h2 { color: #FFFFFF; background: #0066CC; text-decoration:none; } /* main menu dropdown: set font colour, background colour, no underline for hyperlink */ #menu a { color: #000000; background: #CCCCCC; border-color: #000000; text-decoration: none; } /* main menu dropdown mouse hovering: set font colour, background colour*/ #menu a:hover { color: #E4001B; background: #FFFFFF; } /*position the pop out menu*/ #menu li { position: relative; } #menu ul ul { position: absolute; z-index: 500; } 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; } -S I'd like to create a table that'll scroll so I can control the on-screen size and have buttons visible below the rows, and so on. I found an example, that appears to have the CSS to make it work in IE (at least that's what the comment say), but although it looks fine in Firefox, I can't get it to work at all in IE 8. Can someone take a look and tell me if there's some simple change that needed, of if this just plain is NOT going to work in IE, or what? I put the whole thing in here, so if you grab it and dump it in an html file, it should run... 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>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com */
/* http://creativecommons.org/licenses/by-sa/2.0/ */
/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h2 {
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h3 {
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
}
/* end basic styling */
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
-->
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
</tbody>
</table>
</div>
<div><br /></div>
</body>
</html>
Hello. I am new to css and i made the following h1{ position:absolute; left:850px; top:300px; color:green; } I put this in a form that i wanted to be shown at the right bottom of my screen and in mozzila it worked fine, but i found out that in internet explorer it didn't and in general i coudn't view right anything that had specific positions. Is there a bug? Hi. I want to set my page's background colour through an external stylesheet. I have this: Code:
body {
background-color: #CAB284;
text-align: center;
}
But it doesn't affect my page. I'm using it in firefox. Every thing else in the stylesheet works correctly except this. When I enter this stuff in the actual body tag of the page using style="" it works though. I don't want to do it that way as it takes longer to change everything when I find a better background colour. Can anyone help? Thanks, Matthew 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 |
|||||||