|
CSS - Paypal Code Ignoring <li>
Hello All!
I started making a website and I have run into a problem with some code. I am trying to put the paypal donation code on my site with an image, unfortunately the paypal code is ignoring the css and the image is not displaying with a border around it. :P My site: www.looniefrugal.com The image is on the far right column under the RSS image. Note how the RSS has a border and the Coffee image does not. Here is the code for that column Code: <div id="tertCol"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
<div id="elseWhere">
<h3>Before you go</h3>
<p>I dare you to... </p>
<ul id="imgLinks">
<li><a href="http://feeds2.feedburner.com/LoonieFrugal" title="Subscribe to LoonieFrugal.com"><img src="<?php bloginfo('template_directory'); ?>/images/guide/rss.gif" alt="Subscribe - RSS" /></a></li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="elina_1985@hotmail.com">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="item_name" value="Loonie Frugal">
<input type="hidden" name="item_number" value="Coffee">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="bn" value="PP-DonationsBF:coffee.gif:NonHosted">
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/guide/coffee.gif" name="submit" alt="Coffee Time!">
</form>
</li>
</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->
And here is the Style code Code: ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:69px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}
Thanks for any help with this. I am new to code :P Similar TutorialsFor the life of me, I can't figure out what is causing this problem. One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... Hello. I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however. Anyway, on to the issue I'm having. I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE. The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either. Here's the style definition: Code: .newsTypeSection{
width:48%;
float:left;
margin-right:1%;
margin-left:1%;
display: inline;
}
the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it. Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE. URL The bottom is what shows up in IE8, and probably other version of IE as well. Can anyone help me with this? It's beyond frustrating. Please let me know if you need more information. I can't link to the page because it's not public at the moment. this never happens in IE, only FF sometimes when i visit my site the letter links in the menu are messed up. like the padding is ignored on only 1 of the letters when they ALL use the exact same code. heres what i'm talking about: what it should look like: what it sometimes looks like: as you can see, the padding on 1 letter is ignored. sometimes this alternates between different letters, but its always only 1 letter that this happens to. here is my css code: Code:
#menubarbg {
background: url(images/menu_bar_bg.gif) repeat-x;
}
#menuletter a {
background: url(images/menu_letter_bg_noh.gif) repeat-x;
font-weight: bold;
display: block;
text-align: center;
color: #ffffff;
text-decoration: none;
line-height: 20px;
cursor: pointer;
}
#menuletter a div {
background: url(images/menu_letter_l_noh.gif) left top no-repeat;
}
#menuletter a div div {
background: url(images/menu_letter_r_noh.gif) right top no-repeat;
padding: 0px 6px 0px 6px;
height: 20px;
}
#menuletter a:hover {
background: url(images/menu_letter_bg_h.gif) repeat-x;
color: #000000;
}
#menuletter a:hover div {
background: url(images/menu_letter_l_h.gif) left top no-repeat;
}
#menuletter a:hover div div {
background: url(images/menu_letter_r_h.gif) right top no-repeat;
}
here is the html code: Code: <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="menuletter"><a href="guitar-tabs/1.html"><div><div>#</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/a.html"><div><div>A</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/b.html"><div><div>B</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/c.html"><div><div>C</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/d.html"><div><div>D</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/e.html"><div><div>E</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/f.html"><div><div>F</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/g.html"><div><div>G</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/h.html"><div><div>H</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/i.html"><div><div>I</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/j.html"><div><div>J</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/k.html"><div><div>K</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/l.html"><div><div>L</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/m.html"><div><div>M</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/n.html"><div><div>N</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/o.html"><div><div>O</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/p.html"><div><div>P</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/q.html"><div><div>Q</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/r.html"><div><div>R</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/s.html"><div><div>S</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/t.html"><div><div>T</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/u.html"><div><div>U</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/v.html"><div><div>V</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/w.html"><div><div>W</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/x.html"><div><div>X</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/y.html"><div><div>Y</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/z.html"><div><div>Z</div></div></a></td> </tr> </table> the reason it uses a table is so it displays properly on all browsers. help.... Please look at this page in IE7 and FF http://ameritech.tmhdesign.com/x.asp The margin-top for the footer div and the h3 margin for this element are ignored... Code:
div#hp_service{
background:transparent url(../images/hp_service_div_bg.jpg) no-repeat;
width:436px;
height:330px;
margin-left:14px;
}
div#hp_service h3{
margin:10px 0 0 10px !important;
font-weight:normal;
}
PS. After making this post I modified the div in question to have the h3 position absolute, and I added a div called .ser, but in FF the layout is all messed up, in IE it is fine. I put a bg color of blue on the div.ser and I see the height is messed up. Why don't the p element expand the height of the parent div? I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment) I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem. Any feedback is greatly appreciated! Here is the relevant CSS: Code: body, html
{
min-width: 700px;
background: url(/_test/images/nav-filler.gif) repeat-y;
height: 100%;
font: 1.2em Verdana;
line-height: .8em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p, a, div
{
font-size: 76%;
padding: 0 10 0 0;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#header
{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 200;
/*border: 1px solid #0F2B5B;*/
}
#header-right
{
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100%;
background: url(/_test/images/header-filler.gif) repeat-x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#content
{
position: absolute;
top: 154;
left: 163;
z-index: 300;
margin: 0 0 0 0;
padding: 0 10 0 0;
}
#left-nav
{
position: absolute;
top: 154;
left: 0;
right: 163;
margin: 3 0 0 0;
padding: 0 0 0 0;
max-width: 163;
display: block;
}
#nav-links
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 133;
}
#left-nav a
{
color: #000000;
font: 69% Verdana;
background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
padding: 0 17 4 29;
width: 155;
text-decoration: none;
display: block;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#left-nav a:hover
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}
#left-nav a:active
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}
#left-navContent
{
color: #000000;
font: 66% Verdana;
width: 163;
background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
margin: 0 0 0 0;
padding: 0 30 4 29;
text-decoration: none;
}
.nav-itemBottom
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.nav-header
{
color: #0F2B5B;
font: bold 80% Verdana;
margin: 00 20 0 0;
padding: 7 0 6 32;
width: 163;
text-decoration: none;
display: block;
}
#nav-headerType1
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}
#nav-headerType2
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}
#nav-headerType3
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}
#nav-headerType4
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}
#nav-headerType5
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}
Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. Hi, I'm trying to create horizontal navigation with drop-down menus using strictly CSS. I've followed the tutorial located at: http://www.htmldog.com/articles/suckerfish/dropdowns/ but instead of having text for the main navigation, I'm using a transparent PNG and having text for strictly the drop-down section. To create the background of the navigation, I'm simply changing the background: property since the PNG images are transparent. My problem is that the navigation isn't lining up correctly. It's irratic. Each PNG has absolutely no white space in front of or after it, so it's not that. It simply isn't lining up how it should. I wanted it to be right next to each other and I could simply adjust the width inbetween each one with the margin: property, but I can't get it working. The page can be found he http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/css/xcage.css Could someone take a look at the source and CSS and try to tell me what I'm doing wrong? If it comes down to it, I'll even pay someone $10 via PayPal to fix the problem and create working code for me - in CSS. Thanks. Greetings everyone! I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon. My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css? Thanks in advance! - Dehumanizer i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!! what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity? how do i input filters? how do i input tablelayout(like CSS or HTML)? where do i insert tags for the scrollbar, which also has not worked for me? Code:
<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300;
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>
<body>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
<area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
<area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
<area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
<tr>
<th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
<td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
</tr>
<tr>
<th height="211" scope="row"> </th>
</tr>
<tr>
<th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
<tr>
<th width="198" height="18" scope="row">New Events!!! </th>
</tr>
<tr>
<th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
</p></th>
</tr>
</table></th>
</tr>
<tr>
<th height="32" scope="row"> </th>
<td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br>
<b>Last Updated:</b> January 25, 2006
</td>
</tr>
</table>
<p><br>
<br>
</p>
</body>
</html>
this is also an attached code. btw i am working w/ dreamweaver. Code:
<style type="text/css">
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
</style>
this is the last one Code:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
I often see css code with "greater than" sign like this: html>body #centercontent { margin-left: 201px; margin-right:201px; } what does this mean? What is the difference with body #centercontent { margin-left: 201px; margin-right:201px; } Thanks for the enlightment. Hi guys I've a website, pure css, tableless It looks good in Firefox, Opera, etc. etc. It looks VERY bad in IE Look: Firefox http://img465.imageshack.us/img465/4333/shot14jr.png Internet "Explorer" http://img378.imageshack.us/img378/8224/shot22cv.png Website files for download here... http://rapidshare.de/files/11673865/website.zip.html Does any1 know how to fix css or web to look good in IE also ? Thanks a lot in advance For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong? here is the code: Code: css
*
{
margin: 0px;
padding: 0px;
}
html
{
width: 100%;
height: 100%;
}
body
{
height: 100%;
width: 100%;
background-color: /*#E0F8F7 */#989B9F;
margin: 0px;
padding: 0px;
}
#login_box
{
background: url( '../images/login2.png' ) no-repeat center center;
position: fixed;
width: 319px;
height: 417px;
top: 50%;
left: 50%;
margin-top: -209px;
margin-left: -160px;
}
#input_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 230px;
margin-left: 55px;
}
#lock
{
border: none;
position: fixed;
background: url( '../images/lock.png' ) no-repeat;
width: 10px;
height: 13px;
margin-top: 287px;
margin-left: 270px;
}
#forgot
{
position: fixed;
margin-top: 362px;
margin-left: 50px;
}
#login_box h1
{
color: #EDF2F7;
font-size: 10px;
text-align: left;
font-family: arial, sans-serif;
}
.input
{
width: 200px;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
border: solid 1px #85b1de;
background: url( '../images/gr.png' ) repeat-x #EDF2F7;
background-position: top;
padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
border: solid 1px #31677B;
}
#login_box p
{
font-weight: bold;
color: #478FAB;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
}
#button_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 360px;
margin-left: 190px;
}
.button
{
border: none;
width: 103px;
height: 38px;
text-indent: -1000em;
cursor: pointer;
background: url( '../images/login_button.png' ) no-repeat center center;
}
in Internet Explorer: Incorrect in Firefox, Opera, Chrome... ( Any code compliant browser ) Correct ....Any help please? hi... what does this css code mean.. body table table table table#plv table td{color:#fff} ? and how would the html code look like? is this for tables with no class tags attach to it.. I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code: /******************************** Main Navigation ****** * Global topmenu navigation, degrades gracefully to css * if Javascript is disabled. Else applies fade effect. */ #navcontainer { height:50px; float: right; width:1014px; position:relative } /* Menu Body */ ul#navigation { height:35px; list-style:none; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; float: left; } /* Float LI Elements - horizontal display */ ul#specialnav li { float:left; display: block; } /************ SPECIAL NAV ************************/ #specialnav { height:50px; width:185px; position:relative; } /* Link - common attributes */ #specialnav a { background:url('specialnav.png') no-repeat scroll top left; display:block; height:35px; width:185px; position:relative; z-index:10; line-height:2.5em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#fff; font-size:14px; text-align:center; text-decoration:none; padding-left: 0px; padding-right: 0px; } /* Specify width and background position attributes */ #specialnav li.isactive a { background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link (on hover) - common attributes */ #specialnav li.highlight a:hover { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; height:35px; width:185px; line-height:2.5em; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link - common attributes */ #specialnav li.highlight a:active, #specialnav li.highlight a:focus, #specialnav li a:active, #specialnav li a:focus { background:url('specialnav.png') no-repeat scroll 0 -70px; display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* fade effects start here */ /* Span (on hover) - common attributes */ #specialnav a span.animate { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; position:absolute; line-height:2.5em; top:0; left:0; height:100%; width:100%; z-index:10; cursorointer; } /* Shift background position on hover */ ul#navigation li a span { background-position:0px -35px; } /* Shift background position on hover for the class: "isactive" */ ul#navigation li.isactive a span { background-position:0px -35px; } span.trans {display:none;} I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page. So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file. Thanks in advanced! Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference Can anyone help me to transform this table in css code ? <table width="1000" border="1" bordercolor="#FFCCFF"> <tr> <th width="500"> <img src="111.jpg" </th> <th width="500"> <center> <font face="Tahoma" size="60" color="#330033"> 111 </font> </center> </th> </tr> </table> Have some problem with my css. Would appreciate some comments on how to do this: Here is the code: with explanation of what's not working: It's a small "complete" htm file..... Code:
<html>
<head>
<style>
.outer {
display: block;
background-color: #bbb;
border: 0;
padding: 0;
text-align: center;
font-family: Arial,sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a {
display: block;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a:hover {
text-decoration: underline; color: #fff;
}
.outer a:hover .text-top {
text-decoration: none; color: #000;
}
</style>
</head>
<body style="background-color:#888;">
<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>
I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>
NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr>
<td>
<div class="outer">
<a href="#">
<div class="text-top">
<br>Top text<br><br>
</div>
<div class="text-img">
<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
</div>
<div class="text-bot">
<br>Bottom text<br><br>
</div>
</a>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
|
|||||||