|
CSS - Div Missing In Ff, Perfectly Working In Ie
I got the following, which is perfectly displayed in IE:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container { overflow: hide; }
#container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
</style>
</head>
<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>
But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why? Similar TutorialsAs a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> Hi everybody, I'm sure there is a very simple solution to this layout problem but I haven't been able to fix it. My design displays perfectly in Firefox but is out of place by 40px in IE. URL The CSS in question is certainly this div: Code: #sub-content ul li a {
...
margin-left: -40px;
position: relative;
}
I've tried various IE hacks, such as the ones mentioned on Centricle, e.g: Code: div>#sub-content ul li a {
margin-left:0px;
}
But to no avail. Would a CSS guru mind helping me out? The problem is fixed now Hello, In the last few days I made this website: http://www.gambiaguesthouse.nl/index.php?site=home I tested it with firefox and once a day i tested it with IE. Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE. This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly. When I put the "#all..." part back the width of the site isn't correct in IE. De W3C CSS checker gives no errors I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is Hope you guys can tell me what I did wrong with my CSS code. Code: body { font-family: verdana; background-color: #bbdaf9; margin: 0; padding: 0; }
#all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; }
#head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); }
#footer { position: absolute; top: -500px; }
#con { background-color: #f3f7fb; width: 100%; min-height: 620px; }
#add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px; }
#menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; }
#login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;}
#rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; }
a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; }
a:hover { color: #c40000; }
.whitetb { color: white; }
img { margin: 0; padding: 0; border-width: 0; }
li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; }
ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0; padding: 0; }
a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; }
a.menuitem:hover { background: #DCEFF8; color: #116086; }
And this is the HTML source code of my website: PHP Code: <html> <title>GambiaGuesthouse.nl</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="all"> <div id="head"></div> <div id="menu"> <ul> <li> <a class="menuitem" href="index.php?site=home" title="Home">Home</a> </li> <li> <a class="menuitem" href="index.php?site=links" title="Links">Links</a> </li> <li> <a class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li> <li> <a class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li> </ul> </div> <div id="rotating"> <img src="img/rotate1.jpg" id="rotate"></div> <div id="login"> <form target="index.php?site=login" method="POST"> Gebruiker:<br> <input type="text" name="gebruiker" size="27" /><br> Wachtwoord:<br> <input type="password" name="wachtwoord" size="27" /><br /> <input type="submit" value="Log In" /> </div> <div id="add"> add comes here </div> <div id="con"> <b>Gambia</b><br /><br /> Het is een prachtig land, waar je avontuurlijke dingen kan doen. Maar vooral lekker uitrusten op de prachtige stranden. <br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p> <p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia. <br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genieten. dankbaar zijn een groot goed is.</p> <p> Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p> <p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div> </body> </html> Hi, i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned. What I have is: Search: <input> <img> Search is <label>, input is a normal input text box, <img> is used instead of submit. The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned. Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx. I've been working on a layout for my site. It consists of a fixed top menu bar, a fixed left-side menu bar, a fixed right-side bar (possibly used for ads; not sure yet), and a scrollable middle content section. Think a modified Facebook layout. I've been testing with Firefox, and here's what I ended up with (remove the spaces; as a new user, I can't post images, either): htt p://dl.dropbox.com/u/11662651/Graphics/SiteStuff/LayoutGoo d.png That's perfect. It's exactly what I wanted. But then, once I finished it, I tried to test it in IE for compatibility. I almost cried. Almost every aspect of the layout was just completely messed up. Nothing remains fixed when I scroll. Although the menu bar's background color shows it in the right place, all its content shows up below the left-menu instead. In fact, ALL content besides the left-menu shows up below the left-menu instead of in its correct place. And as if that weren't enough, the bullet points on the left-side menu's list (a UL) show up aligned to the left, while the text is aligned to the right (it should be to the right). Besides fonts, not one thing in the layout is correct in IE. But it's all PERFECT in Firefox. I don't usually do this, but because of the scale of how many things are wrong, and because it's only messed up in IE, I'm going to post a download to the .HTML file and ask you to help me figure out what's going on here. So, here's the file (remove the spaces; I'm a new user so I can't post links): htt p:// dl.dropbox.com/u/11662651/Graphics/SiteStuff/index .html?dl=1 Please, please, please, at least get me on the right track to fixing this. And, in related news, I hate IE. Very much. -IMP Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz Hello, I want to make a shadow effect for my content panel. To do this I made 4 div inside a wrapper. The main content, the shadow top right, the shadow right and the shadow footer. In the code below I just used simple colors. The problem is that the div which should be on the right side is missing. What can be wrong? Here is my code: 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.main {
width: 400px;
}
.main .content {
background-color: #CCCCCC;
width:390px;
float:left;
}
.main .topcorner {
background-color: #006666;
margin: 0px;
padding: 0px;
float: left;
height: 10px;
width: 10px;
}
.main .right {
background-color: #FF9933;
margin: 0px;
padding: 0px;
float: left;
width: 10px;
}
.main .bottom {
background-color: #99FFCC;
clear: both;
height: 10px;
width: 400px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="content">Main content<br>with shadow border</div>
<div class="topcorner"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
For some reason on my site when I add a customer to my business directory using wordpress my sidbar moves under everything. I think im missing a div tag or something like that but can figure it out. Can anyone help me? I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help I have tried everything I could find to try and it still underlines the links .. I don't want it to in any browser... Here's the CSS: Code: <style type="text/css">
<?php { ?>
.toggler { background-image:url('modules/mod_news/img/<?php echo $backgr ?>'); background-size:24px; background-repeat:repeat-x; text-decoration:none; cursor:pointer; color:<?php echo $backtext?>; font-weight:bold; margin: 0; padding:3px; font-size:<?php echo $fontsize?>px; font-family:Arial, sans-serif;}
<?php } ?>
.toggler:hover { background-image:url('modules/mod_news/img/silvergradient.gif'); font-family:Tahoma; font-size:16px; font-color:black;} .element{ padding:0 5px; }
.image { margin:10px 20px; } .tool-tip { float: left; background: #ffffcc; border: 1px solid #D4D5AA; padding: 5px; max-width: 200px;}
.tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: bold; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(modules/mod_news/img/arrow.png) no-repeat;}
.tool-text { font-size: 100%; margin: 0;}
</style>
I have put the text-decoration: none; in every place I can think of and it just doesn't work. If I put blink that works ... what am I missing here? Thanks!! I'm having a big problem with IE5/Win... my navigation menu and footer divs (which also contains a few links) are both MIA in IE5! I'd say once every four or five page refreshes will load the page as it should be loaded. Checking the source reveals the correct code regardless of whether my navigation shows up or not. Has anyone ever heard of this problem? I don't want to give a URL or source code, but I will say that the setup of the page is pretty standard: <div id="header"> ... </div> <div id="container"> <div id="navigation"> ... </div> <div id="content"><div id="spacer"> ... </div></div> <div id="footer"> ... </div> </div> hey all, i'm kinda stumped on this one. Take a look at that page in FF and it's all good, but in IE, all the content on the left side of the content box is missing. Don't know what's causing it. here're the styles. [edit]it seems the form doesn't show up on the contact page in IE either.[/edit] Any help'd be appreciated. Hi everyone! I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break. I have no idea why. Anyone knows about it? Soren Steensen Hello All, I'm working on this site at the moment: http://www.whitecapgraphics.com/APP Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why? (No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.) CSS: Code:
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
}
a {
color:#450109;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#D6970C;
text-decoration:overline underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
width: 95%;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
}
#main #logo {
background-image:url(images/logo.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
}
div#navigation ul li {
background-color: #400000;
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
}
div#navigation ul li ul li {
width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
background-image: url(images/yapdropback.jpg);
display: block;
background-repeat: no-repeat;
min-height: 24px;
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-top: 60px;
background-image: url(images/featuresback.jpg);
background-repeat: no-repeat;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
}
#main #body #content {
padding-left: 200px; /*fix for IE - it's including from side of L Column*/
position: absolute;
top: 48px;
z-index:1;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
top: .4em;
line-height:2.2em;
display:block;
font-weight:bold;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .4em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
#content p {
padding: 2em;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
}
/* Aslett Clearing Method */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */
When I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there. I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful Code: .tuesday {
background-image: url('images/tu.jpg');
}
Code: <div class=tuesday> blah blah </div> Guys, In IE, when I hover over a folder menu, the text in its sub-menu is missing. The entire navbar works fine in both Firefox and Chrome. Any suggestions? HTML PART: Quote: <!-- Start of Navbar header --> <div id="header"> <div id="lgo"><a href="index.html"><strong>RIVER rafting</strong></a></div> <ul class="menu"> <li><a href="index.htm" id="m1" class="act">home</a></li> <li><a href="locations.htm" id="m2">Locations</a> <ul id="me2"> <li><a href="locations.htm">Hiranandani</a></li> </ul> </li> <li><a href="corporateevents.htm" id="m3">Corporate Events</a> <ul id="me3"> <li><a href="corporateevents.htm#activities">Activities</a></li> <li><a href="corporate-events/locations.htm">Outbound Locations</a></li> <li><a href="corporate-events/goals.htm">Goals</a></li> </ul></li> <!-- <li><a href="index-3.html" id="m4">news</a></li> --> <li><a href="equipmentsales.htm" id="m5">Equipment Sales</a> <ul id="me5"> <li><a href="equipment-sales/markers.htm">Paintball</a></li> <li><a href="equipment-sales/atvs.htm">ATVs</a></li> <li><a href="equipment-sales/zorbing.htm">Zorbing</a></li> </ul> </li> <li><a href="aboutus.htm" id="m6">About Us</a> <ul id="me6"> <li><a href="about-us/contactus.htm">Contact Us</a></li> <li><a href="aboutus.htm">About Headrush</a></li> <li><a href="about-us/media.htm">Media</a></li> <li><a href="about-us/corporateclients.htm">Corporate Clients</a></li> </ul></li> </ul> </div> <!-- End of Navbar --> The CSS IS: Code:
ul.menu {
position:absolute;
top:135px;
left:0;
width:327px;
height:300px;
}
ul.menu li:hover > ul {
visibility: visible;
}
ul.menu ul {
visibility: hidden;
position: absolute;
width: 80%;
height:80%;
top: 1px;
}
ul.menu ul li {
float: none;
background-position: 0px 46px;
font-size:0.4em;
line-height:31px;
padding:0 0 0 15px;
}
ul.menu ul li a:hover {
text-decoration:underline;
}
ul.menu li {
width:100%;
overflow:hidden;
height:50px;
}
ul.menu li a {
display:block;
font-size:4.0em;
line-height:57px;
text-transform:uppercase;
text-decoration:none;
letter-spacing:0px;
background:url(images/menu_bg.png) no-repeat top left;
color:#000;
padding:0 0 0 25px;
height:53px;
margin:-3px 0 0 0;
}
a#m1 {
width:327px;
background-position: 0 -103px;
}
ul#me1 {
top: 1px;
left: 40%;
}
a#m2 {
width:327px;
background-position: 0 -86px;
}
ul#me2 {
top: 45px;
left: 55%;
width:150px;
}
a#m3 {
width:327px;
background-position: 0 -6px;
}
ul#me3 {
left: 85%;
top: 13px;
width:180px;
}
a#m4 {
width:327px;
background-position: 0 -46px;
}
a#m5 {
width:327px;
background-position: 0 -6px;
}
ul#me5 {
left: 80%;
top: 50px;
width:130px;
}
a#m6 {
width:327px;
background-position: 0 -163px;
}
ul#me6 {
left: 55%;
top: 45px;
width:180px;
}
a:hover#m1, a.act#m1 {
width:327px;
background-position: -327px -103px;
}
a:hover#m2, a.act#m2 {
width:327px;
background-position: -327px -86px;
}
a:hover#m3, a.act#m3 {
width:327px;
background-position: -327px -6px;
}
a:hover#m4, a.act#m4 {
width:327px;
background-position: -327px -46px;
}
a:hover#m5, a.act#m5{
width:327px;
background-position: -327px -6px;
}
a:hover#m6, a.act#m6{
width:327px;
background-position: -327px -163px;
}
Thanks I have an extremely weird problem with the formatting on my web player on a website I am creating. Its not the player, but I can't seem to figure out whats going on precisionstudiollc(dotcom)/index_mub(dot)html . In Mozilla the text in the web player works renders fine, in ie 7, the text gets cut off or doesn't render correctly...Any ideas? Hi, I have a DIV container and inside there, I have another DIV used to contain images throughout the web site to float left, right - whatever. I set the background color to this container DIV (figure1) and my image went missing (in IE , Firefox displayed it correctly ). Does anyone have any ideas as to why or how I can fix this? Thanks. Code:
<div id="figure1">
<h2>Figure 1. The infectious path of rabies virus</h2>
<div class="imgspot" style="margin: 0 20px 0 0;"><img src="images/ani_raccoon_rabies_virus.gif" width="188" height="122" /></div>
<ol>
<li>Raccoon is bitten by a rabid animal.</li>
<li>Rabies virus enters the raccoon through infected saliva.</li>
<li>Rabies virus spreads through the nerves to the spinal cord and brain.</li>
<li>The virus incubates in raccon's body for apporximately 3-12 weeks. The raccoon has no signs of illness during this time.</li>
<li>When it reaches the brain, the virus multiplies rapidly, passes to the salivary glands, and the raccoon begins to show signs of the disease.</li>
<li>The infected animal usually dies within 7 days of becoming sick.</li>
</ol>
</div>
Not sure if this is really a CSS problem but... In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar). Anyone know what might cause this? Thanks, |
|||||||