|
CSS - Lightbox 2.04 Not Working
I'm pretty sure I'm missing something fairly obvious here, but for the life of me I can't find it. Could someone please point out why Lightbox won't work for me and I get new page loads instead?
http://mercurial.pri.ee/scy/pics.html Similar TutorialsPlease look at this page - Example Page On the above page you will see a link that reads "Click Here" Doing so opens a lightbox. In Chrome & FF their is a small "X" graphic appearing in the top right corner to close the lightbox, but that same graphic does not appear in IE for some reason. Can someone shed some light as to why? Tom I'm posting this in CSS because I think it can be solved with a CSS change, but any other ideas are welcome. See: www [dot] bluesheepstudios [dot] com [slash] ChrisCo [slash] logos.html CSS is at: www [dot] bluesheepstudios [dot] com [slash] ChrisCo [slash] stylesheet.css (sorry, can't post links) It displays properly in FF, but in IE6 and 7 the "portfolio" and "before and after" box headings are not displaying. I'm using lightbox.js to display full size images when a user clicks on a thumbnail image in the right column. The problem is caused by the thumbnail image/links and/or the lightbox.js. When I remove the links, the box headings display as they should. Any ideas what would cause this and how to fix? Thanks. I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked... I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left. What am I doing wrong? Any help appreciated. Hello, here is the code i'm using for my lightbox. it works perfectly in Firefox but in IE it doesn't center and the background is solid black instead of a transparent black with 75% opacity. any ideas how to fix it? Code:
<!-- Lightbox - Begin -->
<div id="admsg" style="background:black;-moz-opacity:0.75;filter:alpha(opacity=75%);position:absolute;margin:0px;z-index:1000;left:0;top:0;display:none"></div>
<div id="admsg2" style="width:600px;height:400px;position:absolute;z-index:1001;margin:0 auto;top:90px;left:0; right:0;margin-left:auto;margin-right:auto;border:solid 5px;background:white;text-align:center;display:none;padding:10px">
<!-- Message & Advertisement Here -->
<center><img src="/images/roller.gif"></center><br><h3>Please wait while your file is being uploaded...</h3><i>Depending on your connection this may take up to a few minutes.</i><br/><br/><br>
</div>
<!-- Lightbox - End -->
and when the submit button is pressed i call a JS function which does the following: Code:
document.getElementsByTagName("body")[0].style.overflow="hidden";
document.getElementById("admsg").style.display="block";
document.getElementById("admsg").style.width = screen.width;
document.getElementById("admsg").style.height = screen.height;
document.getElementById("admsg").style.width = document.body.scrollWidth;
document.getElementById("admsg").style.height = document.body.scrollHeight;
document.getElementById("admsg2").style.display="block";
Hi Im am stuck with a couple of things on my website, I am completly new to HTML and CSS and need some help please 1st problem is pages are desplaying fine in every browser I have tried barr IE 6 any ideas what would be wrong, its seems to be aligning to the left (just the text not the heading banner or menu) 2nd problem I have is I am trying to use a lightbox (lightview) which works fine on the local computer but once uploaded to my test site it stops working cant post URL so code as follows: HTML 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>
<title>Quay Cargo Services</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="Quay Cargo Services" />
<meta name="keywords" content="Quay Cargo Services, Shipping Belfast, Hapag Lloyd Belfast" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/andy.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
</head>
<body>
<div id="header-wrap">
<div id="header-photo"> <img alt="header photo" src="images/banner.jpg" width="890" height="195" />
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="european.html">European Trailers</a></li>
<li><a href="hapaglloyd.html">Hapag Lloyd</a></li>
<li><a href="qcnews.html">QCS in the community</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="faq.htm">FAQ</a></li>
<li id="current"><a href="contacts.html">Contacts</a></li>
</ul>
</div>
</div>
<!-- header ends here -->
<!-- content starts -->
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<div class="centerwrap"> <br />
<h1> Meet the Team</h1>
<br /><br /><br />
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<table align="center">
<tr>
<th>
<a href="contacts/andycontact.htm" rel="iframe" title=' :: :: width: 530, height: 330' class='lightview'>
<img src="images/andy.jpg" width="100" height="148" border="0"/>
<br />Andy - Hapag Lloyd Operations </th>
<th><a href="contacts/arroncontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/arron.jpg" width="100" height="148" border="0"></a><br />Arron - Hapag Lloyd Operations </th>
<th><a href="contacts/carolinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/caroline.jpg" width="100" height="148" border="0"></a><br />Caroline - Hapag Lloyd Operations </th>
<th><a href="contacts/catherinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/catherine.jpg" width="100" height="148" border="0"></a><br />Catherine - Hapag Lloyd Rates </th>
<th><a href="contacts/charlenecontact.htm" rel="iframe" title=' :: :: width: 580, height: 350' class='lightview'><img src="images/charlene.jpg" width="100" height="148" border="0"></a><br />Charlene - Accounts / Admin </th>
<th><a href="contacts/dianecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/diane.jpg" width="100" height="148" border="0"></a><br />Diane - Hapag Lloyd Operations </th>
<th><a href="contacts/garycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gary.jpg" width="100" height="148" border="0"></a><br />Gary - European Sales </th>
</tr>
</table><br /><br />
<table align="center">
<tr>
<th><a href="contacts/gillycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gilly.jpg" width="100" height="148" border="0"></a><br />Gillian - European Operations </th>
<th><a href="contacts/jacquicontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/jacqui.jpg" width="100" height="148" border="0"></a><br />Jacqui - Hapag Lloyd Sales </th>
<th><a href="contacts/lynseycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/lynsey.jpg" width="100" height="148" border="0"></a><br />Lynsey - Accounts / Admin </th>
<th><a href="contacts/patriciacontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/patricia.jpg" width="100" height="148" border="0"></a><br />Patricia - Admin </th>
<th><a href="contacts/tommycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/tommy.jpg" width="100" height="148" border="0"></a><br />Tommy - European Operations </th>
<th><a href="contacts/wendycontact.htm" rel="iframe" title=' :: ::width: 560, height: 320' class='lightview'><img src="images/wendy.jpg" width="100" height="148" border="0"></a><br />Wendy - Hapag Lloyd Customer Services </th>
</tr>
</table>
</div><br /><br /><br />
<font face="impact" size="+2"><CENTER>Quay Cargo Services<br /><br />Victoria House<br /><br />28 Westbank Road<br /><br />Belfast<br /><br />BT3 9JL</CENTER></font><br />
</div>
</div><br />
</div><br /><br />
<!-- contents end here -->
<!-- footer starts here -->
<div id="footer-bottom">
<img src="images/localpeopleblue.jpg" width="463" height="100"/>
<br />
<a href="http://www.bifa.org/content/Home.aspx"> <img src="images/bifa.gif" width="80" height="50"/></a>
<a href ="http://www.rha.uk.net"> <img src="images/rha_logo.jpg" width="80" height="50"/> </a>
</br></br>
<p class="bottom-right" >
<font color="#999999">Quay Cargo Services: Telephone: +44 (0)28 90 371195 | Fax: +44 (0)28 90 371195 | Email: <A title="Contact Quay Cargo by E-Mail" href="mailto:info@quaycargo.co.uk ">
<font color="#999999">info@quaycargo.co.uk </A></font></font>
</p>
</div>
<!-- footer ends here -->
</body>
</html>
CSS Code: * { margin: 0; padding: 0; outline: 0 }
body {
font: 11px/165% "Georgia", Geneva, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin: 0; padding: 0 0 50px 0;
text-align: center;
background: #2f25dc url(images/bg.jpg) repeat-x;
}
/* Images */
img {
background: #2F25DE;
border: 0px solid #dcdcdc;
}
code {
margin: 5px 0;
padding: 15px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Georgia', 'courier new', monospace ;
border: 1px solid #EBEBEB;
background: #000000;
}
/* ------------------------------------------
LAYOUT
------------------------------------------- */
h1 {font-family: Georgia, sans-serif; font-size: 25px; text-align: center;}
p {font-family: Tahoma, sans-serif; font-weight: bold; color: black; font-size: 18px; }
p1 {font-family: Georgia, sans-serif; color: white; font-size: 50px; }
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
#header-wrap {
position: relative;
background: #fff url(images/wrap-bg.jpg) no-repeat;
margin: 0 auto;
width: 940px;
height: 285px;
text-align: left;
}
#header-photo {
position: absolute;
top: 90px; left: 24px;
padding: 0;
height:195px;
width: 890px;
clear: both;
}
#header-photo img {
border: none;
margin: 0; padding: 0;
}
/* Navigation */
#nav {
position: absolute;
margin: 0; padding: 0;
width: 880px;
left: 25px; top: 0px;
}
#nav ul {
float: left;
list-style: none;
width: 880px;
height: 40px;
margin: 0; padding: 0;
display: inline;
}
#nav ul li {
display: inline;
margin: 0; padding: 0;
}
#nav ul li a {
float: left;
margin: 0; padding: 18px 11px 0 11px;
font: bold 14px/35px 'Georgia', Tahoma, Helvetica, Arial, Geneva, Sans-serif;
text-decoration: none;
color: #999999;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #080091;
background: none;
border: none;
}
#nav ul li#current a {
color: #999999;
background: #d5d3d6 url(images/nav-current.jpg) repeat-x;
}
#header-wrap h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: normal 62px Georgia, 'Verdana', Times, serif;
letter-spacing: -1.5px;
color: #000000;
text-decoration: none;
top: 135px; left: 48px;
}
#header-wrap h1#logo-text a:hover {
background: none;
border: none;
}
#header-wrap p#intro {
position: absolute;
margin: 0; padding: 0;
font-family: Georgia, 'Verdana', Times, serif;
font-weight: normal;
font-size: 18px;
line-height: 1.6em;
font-style: italic;
text-transform: none;
color: #000000;
top: 205px; left: 60px;
}
#content-outer {
background: #fff;
width: 100%;
}
#content-wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}
#content {
float: left;
width: 100%;
background: #fff url(images/content-bg.jpg) no-repeat;
}
.innerwrap {
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:100px;
margin-left:10px;
}
.textright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
.textmid {
display: block;
margin-left: auto;
margin-right: auto
}.textleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgcentre {
display: block;
margin-left: auto;
margin-right: auto
}
.centerwrap {
text-align: center;
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
/* footer */
#footer-bottom {
clear: both;
border-bottom: 1px solid #111;
width: 880px;
margin: 0 auto;
}
/* clearing - required */
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
any help would be much appriciated Thanks Andy Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML. On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image. I'd prefer that over a block of say 20 thumbnails to call upon. However, I'm totally stumped of how to do this. Why does this css style work only in firefox and not IE : Code:
.showhide {font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #EA6D67;cursor: pointer; onMouseOver:text-decoration: underline;}
Everything in the style works apart from the last section: {onMouseOver:text-decoration: underline;} Any ideas? Cheers 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? 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. i have been trying my hand at css recently and done this page with some css in it but some how it does not seem to be working.my main problem is the fact the two divs one holding the navigation table and the other holding the texttable are not able to use the css properties in terms of font size and font alignment.i looks like that i have made some serious or stupid error here.i would appreciate any help with this.thanks.the code of the page is given below. <html> <head> <title> WORKING CSS WITH DIVS.................. </title> </head> <style type="text/css"> div.banner { POSITION:ABSOLUTE; TOP:0; LEFT:0;RIGHT:0; WIDTH:750; HEIGHT:100; OVERFLOW:AUTO; BORDER-LEFT: 5PX SOLID #454545; BORDER-TOP: 5PX SOLID #454545; BORDER-BOTTOM:5PX SOLID #454545; BORDER-RIGHT: 5PX SOLID #454545; FONT-FAMILY:ARIAL; FONT-SIZE:48PX; TEXT-ALIGN:LEFT;COLOR:WHITE; BACKGROUND-COLOR:BLACK; } div.navigationtable { FONT-FAMILY:TAHOMA; FONT-SIZE:10PX;TEXT-ALIGN:LEFT; } div.navigationtable { POSITION:ABSOLUTE; TOP:150; LEFT:10; WIDTH:150; HEIGHT:200; } div.texttable { FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:10PX; TEXT-ALIGN:JUSTIFY; } div.texttable { POSITION:ABSOLUTE; TOP:150; LEFT:190; WIDTH:560; } </style> <body bgcolor="#ffffff"> <div class="banner"> Hello.com </div> <div class="navigationtable"> <table border=1 cellpadding=0 cellspacing=0 width=150> <tr> <td><a href="http://www.yahoo.com">Yahoo</a></td> </tr> <tr> <td><a href="http://www.rediff.com">Rediff</a></td> </tr> <tr> <td><a href="http://www.bbc.co.uk">BBC</a></td> </tr> <tr> <td><a href="http://www.ebay.com">EBay</a></td> </tr> <tr> <td><a href="http://www.w3schools.com">W3Schools</a> </td> </tr> <tr> <td><a href="http://www.cricket.org">Cricket</a></td> </tr> </table> </div> <div class="texttable"> <table border=1 cellpadding=0 cellspacing=0 width=560> <tr> <td> Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia. He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various stages had even seemed slightly better with white, but it was Anand who seized the chances he got. Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5 points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off- colour Vladimir Kramnik. If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw. Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia. He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various stages had even seemed slightly better with white, but it was Anand who seized the chances he got. Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5 points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off- colour Vladimir Kramnik. If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw. </td> </tr> </table> </div> </body> </html> 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 Hi all for some reason my css just won't work: http://www.milztech.net/area51/ Css: Code:
body
{
font-family: verdana, geneva;
font-size: 52px;
background-color: #CCCCCC;
}
Any ideas?? Hi guys. I have finished designing a website and everything looks good except for one thing. I have a form and I have positioned the fields using the margin-top css property. It looks great on FF but there's too much space between fields on IE and it looks bad. Here's the URL: http://www.theoutsourcingcompany.com/problem/test.html Try it with FF and then with IE and see for yourself. The CSS is he http://www.theoutsourcingcompany.com/problem/css/style.css Would someone please help me and let me know what the problem is? For those who want the code, here it is. First the HTML: 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>
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Hi</title>
<style type="text/css">
<!--
.style1 {font-size: 10px}
-->
</style>
<style type="text/css">
<!--
body {
background-color: #97c7da;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<body>
<div class="divheader">
</div>
<div class="divmiddle"> <font class="Title"><font class="GreyBlue"><br />
</font></font>
<p align="left" style="word-spacing: 0; margin-top: 0"><br />
</p>
<div class="regdiv">
<form id="ebook-form2" name="contact-form" method="post" action="contact.php">
<input name="email" type="text" class="textfieldsa" id="email" size="25" />
<input name="firstname" type="text" class="textfields5" id="firstname" size="25" />
<input name="lastname" type="text" class="textfields5" id="lastname" size="25" />
<input name="middleinitial" type="text" class="textfields5" id="middleinitial" size="25" />
<input name="dob" type="text" class="textfields5" id="dob" size="25" />
<input name="countryofbirth" type="text" class="textfields5" id="countryofbirth" size="25" />
<input name="cityofbirth" type="text" class="textfields5" id="cityofbirth" size="25" />
<input name="countryofcitizenship" type="text" class="textfields5" id="countryofcitizenship" size="25" />
<input name="foreignaddress" type="text" class="textfieldsb" id="foreignaddress" size="25" />
<input name="foreigncity" type="text" class="textfields5" id="foreigncity" size="25" />
<input name="foreignstate" type="text" class="textfields5" id="foreignstate" size="25" />
<input name="foreignzip" type="text" class="textfields5" id="foreignzip" size="25" />
<input name="foreigncountry" type="text" class="textfields5" id="foreigncountry" size="25" />
<input type="image" src="images/contactbutton.jpg" alt="Send Your Message" width="164" height="52" class="textfieldsc" />
</form>
</div>
<p align="left" style="word-spacing: 0"><br />
</p>
<p align="left" class="Text"> </p>
</div>
<div class="divfooter">
<div align="center"></div>
</div>
</body>
</html>
And here's the CSS: .contactdiv { background-image: url(../images/contactform.jpg); background-repeat: no-repeat; height: 500px; width: 500px; margin: auto; } .textfields2 { font-size: 16px; margin-left: 230px; margin-top: 75px; } .textfields3 { font-size: 16px; margin-left: 230px; margin-top: 4px; } .textfields4 { font-size: 16px; margin-left: 30px; margin-top: 12px; } .buttoncontact { font-size: 12px; margin-left: 152px; margin-top: 17px; } .Title { FONT-SIZE: 20pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;} .SubTitle { FONT-SIZE: 16pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;} .BlueLight { COLOR: #0099FF; font-family: Geneva, Arial, Helvetica, sans-serif; } .Blue { COLOR: #0099FF; } .GreyBlue { COLOR: #0099FF; font-family: Geneva, Arial, Helvetica, sans-serif; } .FormTextBox { BACKGROUND-COLOR: #FFFFFF; FONT-FAMILY: Trebuchet MS, Verdana, Arial; FONT-SIZE: 12px; COLOR: #9AC3D5; FONT-WEIGHT: bold;} A.Menu:link { FONT-SIZE: 12px; FONT-FAMILY: "Trebuchet MS", Verdana, Arial; COLOR: #0000FF; TEXT-DECORATION: underline; } A.Menu:visited { FONT-SIZE: 12px; FONT-FAMILY: "Trebuchet MS", Verdana, Arial; COLOR: #0000FF; TEXT-DECORATION: underline; } A.Menu:hover { FONT-SIZE: 12px; FONT-FAMILY: Trebuchet MS, Verdana, Arial; TEXT-DECORATION: underline; COLOR: #4034B4;} #sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px Trebuchet MS;} #sddm li a { display: block; margin: 0 0px 0 0; padding: 4px 10px; width: 90px; background: #1A70AB;color: #FFF;text-align: center;text-decoration: none} #sddm li a:hover{background:#9CD0DD;} #sddm div{position: absolute;visibility: hidden;margin: 0;padding: 0;background: #BDD9E1;border: 1px solid #5970B2;} #sddm div a{position: relative; display: block; margin: 0;padding: 5px 10px;width: auto; white-space: nowrap;text-align: left;text-decoration: none;background: #CAE9F2;color: #1F0573;font: 11px Trebuchet MS;} #sddm div a:hover{background: #507F90;color: #FFF;} .centro { text-align: center; } .divheader { background-image: url(../images/newheader.jpg); background-repeat: no-repeat; height: 155px; width: 697px; margin: auto; } .divmiddle { background-image: url(../images/newmiddle.jpg); background-repeat: repeat-y; width: 697px; margin-top: -11px; margin-right: auto; margin-bottom: auto; margin-left: auto; } .divfooter { background-image: url(../images/newfooter.jpg); background-repeat: no-repeat; height: 74px; width: 697px; margin-top: -12px; margin-right: auto; margin-bottom: auto; margin-left: auto; } p { text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } .padding { padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 15px; } .paddingleft { padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 0px; } h1 { padding: 20px; text-align: justify; } ::selection { background: #000066; color: white; } ::-moz-selection { background: #000066; color: white; } .textfields5 { font-size: 16px; margin-left: 250px; margin-top: 4px; } .textfields6 { font-size: 16px; margin-left: 230px; margin-top: 4px; } .footertext { font-size: 10px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; } .posheader { margin-left: 8px; margin-top: -10px; } .photopad { padding-right: 10px; text-align: center; } .floatr { float: right; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .regdiv { background-image: url(../images/regform.jpg); background-repeat: no-repeat; height: 636px; width: 500px; margin: auto; } .textfieldsa { font-size: 16px; margin-left: 250px; margin-top: 98px; } .textfieldsb { font-size: 16px; margin-left: 250px; margin-top: 67px; } .textfieldsc { font-size: 16px; margin-left: 170px; margin-top: 18px; } .textfieldsd { font-size: 16px; margin-left: 230px; margin-top: 4px; } .ebookformindex { background-image: url(../images/brochure.jpg); height: 308px; width: 500px; background-repeat: no-repeat; margin: auto; } .textfieldsdname { font-size: 16px; margin-left: 90px; margin-top: 190px; } .textfieldsdemail { font-size: 16px; margin-left: 90px; margin-top: 3px; } .textfieldsdbutton { font-size: 16px; margin-left: 300px; margin-top: -60px; } .tableprices { text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; } h2 { text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; padding-top: 10px; padding-right: 20px; padding-bottom: -30px; padding-left: 20px; font-weight: normal; margin-bottom: -20px; } Thank you so much for your help, this is driving me nuts. style.css body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } ul#tabs { list-style: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; } ul#tabs li { display: inline; } ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; } ul#tabs li a:hover { background-color: #f1f0ee; } ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; } div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; } div.tabContent.hide { display: none; } ---------------------------------------------- <html> <head><title>tab2</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <ul id="tabs"> <li><a href="#about">About JavaScript tabs</a></li> <li><a href="#advantages">Advantages of tabs</a></li> <li><a href="#usage">Using tabs</a></li> </ul> </body> </htlm> i haven't created any div tag but it should at list work on the ul tag. whats wrong???? Hello, Simple page trying to get the black line to be at the very top of the page. It works in all browsers (for me) except IE. http://www.gypsydev.us/css/ Any idea what else I need to do? Thanks, GuruGeek 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! i have been trying my hand at css recently and done this page with some css in it but some how it does not seem to be working.my main problem is the fact the two divs one holding the navigation table and the other holding the texttable are not able to use the css properties in terms of font size and font alignment.i looks like that i have made some serious or stupid error here.i would appreciate any help with this.thanks.the code of the page is given below. <html> <head> <title> WORKING CSS WITH DIVS.................. </title> </head> <style type="text/css"> div.banner { POSITION:ABSOLUTE; TOP:0; LEFT:0;RIGHT:0; WIDTH:750; HEIGHT:100; OVERFLOW:AUTO; BORDER-LEFT: 5PX SOLID #454545; BORDER-TOP: 5PX SOLID #454545; BORDER-BOTTOM:5PX SOLID #454545; BORDER-RIGHT: 5PX SOLID #454545; FONT-FAMILY:ARIAL; FONT-SIZE:48PX; TEXT-ALIGN:LEFT;COLOR:WHITE; BACKGROUND-COLOR:BLACK; } div.navigationtable { FONT-FAMILY:TAHOMA; FONT-SIZE:10PX;TEXT-ALIGN:LEFT; } div.navigationtable { POSITION:ABSOLUTE; TOP:150; LEFT:10; WIDTH:150; HEIGHT:200; } div.texttable { FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:10PX; TEXT-ALIGN:JUSTIFY; } div.texttable { POSITION:ABSOLUTE; TOP:150; LEFT:190; WIDTH:560; } </style> <body bgcolor="#ffffff"> <div class="banner"> Hello.com </div> <div class="navigationtable"> <table border=1 cellpadding=0 cellspacing=0 width=150> <tr> <td><a href="http://www.yahoo.com">Yahoo</a></td> </tr> <tr> <td><a href="http://www.rediff.com">Rediff</a></td> </tr> <tr> <td><a href="http://www.bbc.co.uk">BBC</a></td> </tr> <tr> <td><a href="http://www.ebay.com">EBay</a></td> </tr> <tr> <td><a href="http://www.w3schools.com">W3Schools</a></td> </tr> <tr> <td><a href="http://www.cricket.org">Cricket</a></td> </tr> </table> </div> <div class="texttable"> <table border=1 cellpadding=0 cellspacing=0 width=560> <tr> <td> Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia. He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various stages had even seemed slightly better with white, but it was Anand who seized the chances he got. Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5 points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off- colour Vladimir Kramnik. If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw. Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia. He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various stages had even seemed slightly better with white, but it was Anand who seized the chances he got. Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5 points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off- colour Vladimir Kramnik. If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw. </td> </tr> </table> </div> </body> </html> Hey, it's me again, I was wondering if there is a way to make any header tag (in my case, it's H3) so that the text appears as normal? Essentially, make it so that nothing changes with the text. eg- 'Hello <H3>everybody</H3>' would appear just the same as 'Hello everybody.' I've tried multiple things using CSS, but can't seem to make it work. |
|||||||