|
CSS - Help Me With This Charity Website? - Displaying <li> Items Problem
My friend has been working with a charity, and apparently their website is outdated.
I have decided to attempt giving them a new look but already find myself having some CSS issues. In FireFox things are looking good so far, but not in IE. I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this? Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL: http:// thomasjadams.co.uk / charity Similar Tutorials..never mind! Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. 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" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Is there a problem in my code? Thanks, Ehud. I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7. When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.) I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated. I'v attached screen shots of the correct and incorrect layouts. I have 2 css formatting files: setup and text Here's SETUP.CSS: /* NON-HEADER */ *{padding:0; margin:0;} body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/ .page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;} .page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;} .main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;} .main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} /* --- For alternative headers START PASTE here --- */ /* HEADER */ .header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;} .header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;} .header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;} /*******************/ /* HEADER SECTION */ /*******************/ .sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); } .sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .sitename h1 {font-size: ;} .sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;} .sitename a {text-decoration:none; color:rgb(125,125,125);} .sitename a:hover {text-decoration:none; color:rgb(50,50,50);} .nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;} .nav0 ul {float:right; padding:0 20px 0 0;} .nav0 li {display:inline; list-style:none;} .nav0 li a {padding:0 0 0 3px;} .nav0 a:hover {text-decoration:none;} .nav0 a img {height:14px; border:none;} .nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;} .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;} .nav1 li {display:inline; list-style:none;} .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;} .nav1 a:hover {text-decoration:none; color:rgb(145,145,145);} .sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;} .sitemessage h1 {width:400px; text-align:right; font-size:230%;} .sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;} .sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;} .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);} .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);} /*Drop-down menu*/ .nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/ .nav2 ul {list-style-type:none;} .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; } .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);} .nav2 ul li ul {display:none; border:none;} /*Non-IE6 hovering*/ .nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ /*IE6 hovering*/ .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;} .nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ .header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;} .header-top .searchform form fieldset {float:right; border:none;} .header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; } .header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;} .header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);} /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;} .column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} /********************/ /* FOOTER SECTION */ /********************/ .footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;} .footer p.credits {font-weight:normal;} .footer a {text-decoration:underline; color:rgb(125,125,125);} .footer a:hover {text-decoration:none; color:rgb(0,0,0);} .footer a:visited {color:rgb(0,0,0);} /******************/ /* CLEAR FLOATS */ /******************/ .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);} Here's TEXT.CSS: /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;} .main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;} .main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;} .main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;} .main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;} .main-content h1.side {clear:none;} .main-content h2.side {clear:none;} .main-content h3.side {clear:none;} .main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;} .main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;} .main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;} .main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;} .main-content p.center {text-align:center;} .main-content p.right {text-align:right; margin-right: 10px} .main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;} .main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;} .main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);} .main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;} .main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;} .main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;} p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;} .main-content ul {list-style:none; margin:0.5em 0 1.0em 0;} .main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;} .main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;} .main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;} .contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);} .contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);} .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;} .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;} .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} .loginform {width:160px; margin:-10px 20px 0 20px;} .loginform p {clear:both; margin:0; padding:0;} .loginform fieldset {width:160px; border:none;} .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;} .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;} .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;} .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} /********************/ /* COMMON CLASSES */ /********************/ .main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);} .main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);} .main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);} .main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;} .main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;} .main a:hover {color:rgb(42,90,138); text-decoration:underline;} .main a:visited {color:rgb(42,90,138);} .main a img {border:solid 1px rgb(150,150,150);} .main a:hover img {border:solid 1px rgb(220,220,220);} Hi, I'm having a problem with some padding showing up oin both IE and Firefox with list items on my navbar. Please see: http://81.17.252.110/~wallis1/new/ I want the nav items to come to the edges of the <ul> tag (want to make the white borders on the navigation items come to the edge) but there is this padding there for some unknown reason between the <ul> and the <li> items. Please can you help as I'm tearing my hair out now, Thanks in advance, I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk If you click on Home Page or Multimedia the drop-down menu is behind the video clip. Very annoying. Any help appreciated! We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done. Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one? Simply put, instead of this way: 1 2 3 4 5 6 7 8 9 We want it this way: 6 7 8 9 1 2 3 4 5 As you understand this will look much better and not screw with our design;-) Anybody? Hi. i have a table with all my content inside and im trying to change the background color of the area outside of the table in my css file im using: body { background-color:#000000; } in dreamweaver it displays the area as black but when i upload the css file and try to view the page it shows it as white. i've checked it in IE And firefox.. what am i doing wrong? I have recently changed my web site from being totally formatted using tables to being CSS based. I am not an expert at CSS so I have probably got some pretty bad code, so I cower somewhat in asking for help. Please don't be upset with me. I have a problem with my web site displaying on IE 5.2 on a Mac OS X (10.3.6). I have no assess to this but a user has sent me a screen capture, and it doesn't seem to even be recognising the CSS. It displays okay on IE6 for Windows. My web site is at: http://www.elviscostello.info/ Your help would be greatly appreciated. Thanks a lot, JohnE Ok I managed to fix my problem with firefox... Now I am having a MAJOR problem with IE7. I am creating a shopping page, and none of my lists are displaying correctly in IE7 I have spent hours and hour and hour and hours looking for hacks and fixes and I can not find any reason why. I have a shopping menu to the left side of my main content... and it displays off to the side, very very beautifully, in EVERY browser except IE 7... even thought it displays in the right spot in IE6!!! In IE 7, the shopping menu displays INSIDE the main content, not to the LEFT of the Main, like it does in EVERY other browser I NEED to get this off to my client VERY soon, and I am out of ideas of what is causing this. I DONT want to have to redesign my entire page just to accommodate one stupid browser, because i LOVE how it looks fits my clients japanese site... Here is my CSS #shopping-bracket{ width: 950px; min-height: 200px; margin:0 auto; } #shoppinglist { width:100px; height: 600px; float: left; position: fixed; visibility: visible; top:60px;} #shoppinglist li { float: right; list-style: none; background-image: url(images/shoppingmenu-bgsmall.gif); width: 100px; min-height: 10px; } #main {background-color: #ffffff; margin: 0px auto; top: 81px; width: 732px; min-height:600px; } my page is here http : // www pinktanpopodesigns com / babyconcept3 / shopping . html please please please, I really need to get this fixed... thank you for your help Hi , I am really stuck in this css . i have tried a lot but cant get it working right in i.e6 . It is working fine with firefox but not i.e 6 .I am already using a javascript which makes css works for i.e 6 . i have attach the image where it shows the difference . Here is my css code . Code:
#nav, #nav ul{
margin:0 0 0 18px;
top:auto;
padding:0px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2em;
font-weight:bold;
font-family:"times new roman";
letter-spacing:-1px;
font-size:17px;
}
#nav li ul{
font-size:15px;
font-weight:normal;
background-color:#000000;
width:auto;
height:auto;
top:auto;
margin:0;
letter-spacing:0px;
border:0 none black;
}
#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#FFB208;
cursor:pointer;
}
#nav li{
float:left;
position:relative;
margin:0 0 0 12px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:33px;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
vertical-align:text-top;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0 0 0 10px;
float:left;
right:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Javascript code:- Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
}
);
}
$(document).ready(function(){
mainmenu();
});
Is there anything more i need to do in my css file? Regards, Umair Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/ I want example this (for how): what do i do? CSS: Code: .show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
/*margin: 0 0 0 0;
top: 0;
bottom: 0;*/
}
HTML: Code: <ul>
<li>
<div class="show_tooltip">
put returns between paragraphs
</div>
<a href="#">about</a>
</li>
<br>
<li>
<div class="show_tooltip">
for linebreak add 2 spaces at end
</div>
<a href="#">how</a>
</li>
</ul>
jQuery: Code: $("li a").mouseenter(function(){
$(this).prev().fadeIn();
}).mousemove(function(e) {
$('.tooltip').css('bottom', e.pageY - 10);
$('.tooltip').css('right', e.pageX + 10);
}).mouseout(function(){
$(this).prev().fadeOut();
})
My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? www.oakdalehosecompany.org or oakdalehosecompany.org is my website Its perfect when you view it with firefox at 1024x768 res, but when you view it with internet explorer at 800x600 res it looks horrible. is there anyway to fix this like a program or something. bear with my this is my fire site i ever made so i dont know much. thanks for any that help This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points? I have a floated CSS Horizontal Drop Down Menu, it's centered in my page just fine in firefox, but in IE it's skewed way off to the right side. (Also having problems with the dropdown's not appearing in IE :S) If anyone can help me with IE fixes on either of these problems that would be great. Thank you! I've tried the popular tricks to figure this out, but don't seem to have the touch. In IE, the list item is 2px taller than in FF. page: URL Removed CSS: Code: .mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}
HTML on page (it's quite heavy) Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 |
|||||||