|
CSS - Almost There - Not Working In Fire Fox
Hi gang,
I am working on a website that is 95% complete - but I am running into one bug. The CSS code that allows the thumbnails to have an information balloon pop-up is not working on Fire Fox or Safari. I have tried everything to the best of my knowledge - but I believe it needs an expert at this point. Any suggestions you can provide would be greatly appreciated. The site is (URL address blocked: See forum rules) and the CSS file can be found at (URL address blocked: See forum rules) The clothing thumbnails on the homepage will give you an example of what is happening. Basically - the column that the thumbnail appears in expands beyond its 125 pixel constraint and blows everything to the right. How it looks in IE is how it should look in Fire Fox and Safari as well. Thanks for your time. Aloha, Ka'o Similar TutorialsThe top image on my site lines up perfectly with the buttons in firefox but is off by a pixle in internet explorer! please help! my site is on digitalplus.webs.com I am having a problem with firefox adusting the height of two of the divs that act as containers for the inner most colums. I have the outer most container (wrapper) and an inner container (contentbox) that will not expand to the height of the inner divs. See attachment Any suggestions Here is the CSS Code:
/* -------------------------- CSS Document :: NGIT NS LAYOUT -------------------- */
.wrapper {
border: 1px solid #000000;
background-color: #b94b12;
height:auto;
width: 800px;
margin-left:80px;
margin-right:auto;
left: auto;
top: auto;
}
img {
border: 0px;
}
body {
background-color: 999999;
margin-top: 10px;
}
.navbar {
background-color: #b94b12;
position: relative;
height:auto;
width: 20%;
float: left;
clear: right;
}
.leftcolumn {
background-color: #FFFFCC;
height:auto;
width: 260px;
float: left;
clear: right;
}
.rightcolumn {
background-color: #FFFFCC;
height:auto;
width: 244px;
float: left;
clear: right;
}
.fullcolumn {
background-color: #b94b12;
width: 100%;
}
.contBox {
height:auto;
width: 800px;
margin-left: auto;
padding-top: 12px;
padding-right: 14px;
padding-bottom: 16px;
padding-left: 16px;
}
.content {
background-color: #FFFFCC;
height:auto;
width: 90%;
padding-top: 12px;
padding-right: 14px;
padding-bottom: 16px;
padding-left: 16px;
}
I'm trying to make a simple style sheet that will work with firefox, I can get one to work in Internet Explorer but not in firefox. I have split up the stylesheet and tried to import it through php but when it came up, things like repeating-x or y factors didn't show up. I need some help and heres an example of my style rather simple. Code:
BODY
{
font-size: small;
margin: 5px;
color: black;
font-family: Courier New;
background-color: #f1f1f1;
}
.lcolumnt
{
background-position: right top;
background: white url(images/css_bg_lcoumn.gif) no-repeat;
font-size: small;
}
.lcum
{
background-position: right center;
background: white url(images/bg_lcoumn.gif) repeat-y;
}
TABLE
{
font-size: 11.5px;
COLOR: #000000;
font-family: Courier New;
}
INPUT
{
border-right: #a4a4a4 1px solid;
border-top: #a4a4a4 1px solid;
font-size: x-small;
border-left: #a4a4a4 1px solid;
color: #585858;
border-bottom: #a4a4a4 1px solid;
font-family: Courier New;
background-color: #f4f4f4;
}
.contentheader
{
background-position: left center;
background: url(images/main_content_header.gif) no-repeat;
}
.mctop
{
background-position: left top;
background: url(images/mc_bg_top.gif) repeat-y;
}
.mcbg
{
background-position: 0% 50%;
background: url(images/mc_main_bg.gif) repeat-y;
}
A:link
{
font-size: small;
COLOR: black;
font-family: 'Courier New';
text-decoration: none;
}
A:visited
{
font-size: small;
COLOR: gray;
font-family: 'Courier New';
text-decoration: none;
}
A:hover
{
font-weight: bold;
text-decoration: underline;
}
I am trying to make a site for a program I am working on and every time I program the curved box threw Fire Fox it looks good. But when IE looks at it and messes it up! Here is the site: www.bf2editor.org/Doom3Scripter Here is the CSS code: Code: alink {color: blue;}
ahover {color: red}
avisisted {color: blue}
body {background-color: black}
.curved-box
{
width: 400px;
margin: 10px;
background-color: #898989;
}
.curved-box b
{
background: #898989 url(bevel1.jpg) no-repeat left top;
color: white;
padding: 10px 20px 30px 343px;
}
.curved-box p
{
background: #898989 url(bevel2.jpg) no-repeat left bottom;
margin: 0px;
height: 20px;
padding: 1px 1px 1px 0px;
text-align: left;
}
.logo {margin-left: 6cm;}
Ok look i want to make a dedicate for me and 5 of my freind we are in the same block. and we want a private server for 5 of our friends. so what is the command to do the ak rapid fire. tyvm. http://www.hybridillusions.com/wordpress/ As you see, the top menu s having issues... One Firefox is displays fine, but on IE7, it is a mess! What could be wrong? here is the location of the CSS file. I'm willing to compensate with the sell of this design, for any help on this issue. thank you. (#top-menu CSS is controlling the parts that I'm havign issues with) For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right. I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing. Any ideas out there? I appreciate it. Tim Trice I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p. http://www.bf2editor.org/ I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc Code: a:link {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}
body {
background-color: 000000;
margin:0;
padding:0;
line-height: 1.5em;
}
hr {color: black}
.top{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}
.top2{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}
.top3{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}
div#news
{
background-color: E5E5E5;
width: 140px;
margin-top: 30;
margin-left: 22;
}
div#login
{
background-color: E5E5E5;
width: 140px;
margin-left: 22;
margin-top: 2;
}
div#about
{
background-color: #CCCCCC;
width: 797px;
height: 500;
margin-top: -2;
margin-left: 52;
}
div#who
{
background-color: E5E5E5;
width: 140px;
margin-left: 22;
margin-top: 2;
}
}
div#info
{
background-color: 898989;
width: 600px;
margin-top: 1cm;
margin-left: 4cm;
}
div#info h2 { background: url( bar.png ); color: #ffffff;
background-repeat: repeat-x;
}
div#p { }
/*Page Layout*/
#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Thanks for taking the time to read my question. I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page. In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event. If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean. It works fine in Fire Fox.... ya I know typical. Any suggestions? Brad Pierced is my band name. I don't have any other URL to post this under for people to view. http://www.pierced.ca/FeedProductionRecordsHelp.htm http://www.pierced.ca/FeedProductionRecordsHelp.css This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it. In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears. CSS Code:
a:link {
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
ul{
margin:10px;
padding: 10px;
list-style-type: none;
}
li
{
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
html Code:
<div id="projects">
<h1>Projects</h1>
<P>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul></p>
</div>
Hey guys, So I am new to doing PSD>>>XHTML (or html) & CSS. Basically..I am knew to coding I guess you could say as well. I have been watching this tutorial: net[dot]tutsplus[dot]com/videos/scree...-psd-to-xhtml/ And in it, he tells me about CSS and how to make the images appear. Basically, the images that I want to appear in my css, are not appearing. I have made sure all of the div id's are correct, and they are. My CSS can be found he tinypaste[dot]com/770074 ALL of the images, do not appear. Any help?? (PS- I know some of my things in my CSS are probably not the best practice, but I am not really looking for your criticism, but rather the solution to my problem) Thanks! ~ Joe Some of the styles or not working in my main.css file. Example: style for td is working but not for ul or li. Syntex is correct, cause I pulled the styles from another one of my sites. Is there something that can cause a partial reading of my main.css file? Ok, I have a design and it works how I want it to in firefox. http://www.eng.nene.ac.uk/~bf04thbu/ However, In IE there are two problems. 1. The graphical border doesnt go all the way around the content area. View it in firefox to see how it's supposed to look. 2. There is a small gap between the first #maintable and #maintable2. Does anyone know how to fix these? I've been trying for a while without success. It appears that the #maintable2 div is on top of the two side images in #maintable2. Thanks for any help. Hi guys, Why is this happening in IE8? It works in chrome/ff etc though. Links to site and css. Site Project: Final Fantasy CSS CSS Sorry if its too vague, let me know if you need more details. Hi there, I'm working with a template which is utilizing really bad transparent corner images in the master css file, and for sake of maintenace ive created my own custom.css and Im trying overwrite those background gif's with png's in my custom.css without any success - its coming up blank Any idea's where Im going wrong? FYI im using the !important hack which IE 6 and below supposedly ignore Code:
/* master.css */
.sidebar_container .CL_upperLeftCorner{
background-image: url('../images/top_left_gom.gif');
background-repeat: no-repeat;
background-position: top left;
float: left;
margin-right: -15px;
}
Code:
/* custom.css */
.sidebar_container .CL_upperLeftCorner{
background-image: url('../images/top_left_gom.png') !imprtant; /* ignored by IE */
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/top_left_gom.png,
sizingMethod='scale');
background-repeat: no-repeat;
background-position: top left;
float: left;
margin-right: -15px;
}
Hello, I have an odd problem. I do some websites as a hobbie so I'm no expert. I have created several sites using css with a linked stylesheet and never had a problem using: link rel="stylesheet" href="styles.css" type="text/css" Today I opened Homesite (old version 4.5) for the first time in a few months and began a new project. My problem is, I can't seem to get the stylesheet to work when linked. If I use it inline or in the head tag it works, just not linked. I'm using the same code I have always used. I even copied from other working pages to be sure I'm not missing something. I have also opened several other existing projects stored locally and they work fine. Just nothing I code now will work. I must be overlooking something simple. Thanks for any ideas! My CSS is causing my image to drop down and I want it in line with the number with the text to the right. If I take out the Span then it works but I need the span, can anyone see what is wrong with my code? Code: <div id=artContent> 1.<span class=img-shadow><img src='AR6.jpg'></span> </div> CSS: Code: #artContent {margin: 0px 0px 100px; padding: 0px; color: #000; background-color: #ccc;}
#artContent .info {color:#000000; font-size: 14px; font-family: Sylfaen;letter-spacing: 0.1em;}
#artContent .img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 0px 0 0 23px !important;
margin: 0px 0 0 23px;
}
#artContent .img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
The first image is what I am getting and the second is what I want. im trying to redo my layout in the "tabless" fasion since its the best thing to be doing now i beleive. this is how far i've gotten... http://72.232.208.44/new/newindex.html the navigational links are just barely off. this is becasue they are a unorded list. i adjsuted their list-style-type to be none but it stil shows up with a small smal blank spot where the bullet would go. CSS: Code:
A:link{color:#ADD8E6;text-decoration:underline;}
A:visited{color:#ADD8E6;text-decoration:underline;}
A:active{color:#ADD8E6;text-decoration:underline;}
A:hover{color:#ADD8E6;text-decoration:underline;}
#banner_container{
margin:auto;
text-align:center;
}
#banner{
border:thin none #000000;
border-spacing:0;
padding:0;
width:750px;
height:155px;
background-image:url("images/GFG-topBanner_01.jpg");
background-repeat: no-repeat;
//text-align:center;
margin:auto;
}
#banner_under{
border:thin none #000000;
border-spacing:0;
padding:0;
width:750px;
height:28px;
background-image:url("images/GFG-topBanner_02.jpg");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
margin:auto;
}
#navlist{
border:thin none #000000;
border-spacing:0;
padding: 0;
padding-left: 0;
padding-right:0;
margin: 0;
white-space: nowrap;
list-style-type:none;
list-style:none;
}
#navlist li
{
border:thin none #000000;
border-spacing:0;
padding: 0;
padding-left: 0;
padding-right:0;
margin: 0;
display: inline;
list-style-type: none;
list-style:none;
}
UL{list-style-type:none;}
TD{text-align: left; border:thin none #000000;padding:0;}
TR{border:thin none #000000;padding:0;}
BODY{background-color:#003333;margin:auto;}
textarea, select, checkbox, input, submit{background-color:#aeb0b0;border-color:#9d9c9c;}
.noborder{border:thin none #000000;}
HTML: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<SCRIPT SRC="javascript.js" type="text/javascript"></SCRIPT>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="banner_container">
<div id="banner">
</div>
<div id="banner_under">
<ul id="navlist">
<li><a href="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><img src="images/bHome.jpg" class="noborder" name="pic1" width="56" height="28" alt=""></a></li>
<li><a href="services.php" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')"><img src="images/bServices.jpg" class="noborder" name="pic2" width="78" height="28" alt=""></a></li>
<li><a href="contact.php" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')"><img src="images/bContact.jpg" class="noborder" name="pic3" width="73" height="28" alt=""></a></li>
<li><a href="controlpanel.php" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')"><img src="images/bControlPanel.jpg" class="noborder" name="pic4" width="113" height="28" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>
btw i know i can do hover stuff with css i am just trying to work on one thing at a time though Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<STYLE TYPE="text/css">
a:link {
color: #808080;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}
a:hover {
color: #A0A0A0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
}
a:active {
color: #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}
a:visited {
color: #808080;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}
version {
color: #939393;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:11px;
}
pagetitle {
color: #969696;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:16px;
text-transform:capitalize
font-weight:700
}
</STYLE>
</head>
Any help is welcome, I am not well versed in CSS. Well, not this CSS. None of the properties are workign in IE. it is frustrating. Code: .mainnav a:link, .mainnav a:visited { font-family: tahoma; color: #9b9999; font-size: 15px; line-height: 37px; font-weight: bold; margin: 2px 0 0 0px; text-decoration: none; }
.mainnav a:hover, .mainnav a:visited:hover { font-family: tahoma; color: brown; font-size: 15px; line-height: 37px; font-weight: bold; margin: 2px 0 0 0px; text-decoration: none; }
i wrote them for the mainnav class tags but the links arent effected? i'm using IE7 and targeting the IE7 users with those codes... What's wrong? I checked there is no duplicated implementation... |
|||||||