|
CSS - Css Not Aligning In Ie6 And Lightbox Not Opening Online
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 Similar TutorialsI'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 Please 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 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";
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. 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. 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. We have a page which contains an iFrame. The page which contains the iFrame opens up half way down and not at the top. is there a way in css to open up the page at the top? This is the code which calls the iFrame: Code: <iframe src="Page1.aspx#myAnchor" width="975" height="180"> If I remove the #myAnchor from the url - it does work ok. But we want the anchor tag there to open up the iFrame window at that point. (Its the parent page which we need to open up at the top). thanks. Hello, hope to ask in the right place. Do You know of anything similar to this: h t t p : / / w w w . b r o w s e r p o o l . c o m sorry, but no other way to post the link. Or any desktop alternative (for the windows user) Hello, I am displaying a poll using CSS and lists: http://www.27lamps.com/Beta/Poll/Poll.html At the moment I have two problems: 1. I am not able to set a padding between each Bar and the border which I am using background-image to define it. 2. The percentage labels is not centered in vertical Could someone, please, help me out? Any improvements are welcome. Thanks, Miguel Hi, I am working on an online store for the company that I work for and they have me using online shopping cart software to generate the site. It is nice to have the software handle all the back-end work for me but the process of writing html and css is such a pain that I write my code in DW and cut and paste it into the online software. The software gave me one css page to call my own that is automatically referenced on each page. Here's my site: http://www.nova-dataonline.com So, with that said, here's my problem. As you can see, the graphics that I have placed in the center of the page overlap the bottom runner of the software-generated page. I have tried to get the main part of the page to expand with whatever content I have placed there since these are not the only images that will go on this page. But since I am not super experienced, I have been stumped. Part of the problem is that I have limited access to my source html and css. This is the css that I wrote to layout the four images that you see: PHP Code: #container{ position:absolute; top:105px; left:185px; width:580px; z-index:0; height: 384px; } #top_left{ background-image: url(images/message/top_left.jpg); background-repeat: no-repeat; width:374px; height:150px; position:absolute; left:5px; top:25px; display:block; z-index:0; } #top_left_text{ text-align:left; vertical-align:middle; color:#FFFFFF; position:relative; left:0px; top:0px; width:auto; height:auto; padding:10px; z-index:1; } #top_right{ position:absolute; left:384px; top:25px; width:191px; height:150px; z-index:0; } #bottom_left{ position:absolute; left:5px; top:185px; width:191px; height:150px; z-index:0; } #bottom_right{ background-image: url(images/message/bottom_right.jpg); background-repeat: no-repeat; position:absolute; right:5px; top:185px; width:374px; height:150px; z-index:0; } #bottom_right_text{ text-align:left; vertical-align:middle; color:#FFFFFF; position:relative; left:0px; top:0px; width:auto; height:auto; padding:10px; z-index:0; } .header{ color:#FFFFFF; font-size:medium; } and here's the markup: PHP Code: <div id="container"> <div id="top_left"> <div id="top_left_text"> <span class="header">Linksys 54Mbps Wireless Router</span><br /><br />Wireless-G is the upcoming 54Mbps wireless networking standard that's almost five times faster than the widely deployed Wireless-B (802.11b) products. Since they share the same 2.4GHz radio band, Wireless-G devices can also interoperate with 11Mbps Wireless-B equipment. Since both standards are built in, you can migrate to the new screaming fast Wireless-G standard as your needs grow. </div> </div> <div id="top_right"><img src="images/message/linksys_WRT54G.jpg" alt="Linksys WRT54" width="189" height="150"></div> <div id="bottom_left"><img src="images/message/netgear_WG311.jpg" alt="Netgear WG311" width="189" height="150"></div> <div id="bottom_right"> <div id="bottom_right_text"> <span class="header">Netgear 54Mbps Wireless PCI Adapter</span><br /><br />At 54 Mbps, this wireless 2.4 GHz 802.11b/g PCI card is much faster than existing 11 Mbps wireless networks and will supercharge the delivery of media-rich content to your desktop PC as never before. It easily handles huge digital video and MP3 files, firing them through your network at blazing speeds. </div> </div> </div> I am rather lost and would like to find a way to make this work. The kicker is that I cannot edit the main stylesheet for the page! Any help would be awesome! I got this snippet from the Whateverhover website ...
Code: li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }
I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox. Here's how I've used it: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
* { font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav { border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links { vertical-align: top; width: 155px }
ul,li,a { margin: 0; padding: 0; border: 0 }
ul { width: 155px; background-color: #E2E2EF; list-style: none }
li { position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder { }
li.folder ul { position: absolute; left: 150px; /* IE */ top: 0px }
li.folder>ul { left: 145px /* others */ }
a { }
a.submenu { }
li>a { width: auto } /* others */
li a.submenu { }
/* regular hovers */
a:hover { color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover { background-color: #000080 }
/* hovers with specificity */
li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }</style>
</head>
<body>
<table class="nav">
<tr>
<td class="links">
<!-- Start Navigation Menues -->
<table>
<tr>
<td nowrap>
<ul>
<li class="folder">
<a class="submenu" href="#">Kitchenware ></a>
<ul>
<li class="folder">
<a href="#" class="submenu">Cutlery ></a>
<ul>
<li><a class="submenu" href="#">Cased Sets</a> </li>
<li><a class="submenu" href="#">Poultry Shears</a> </li>
<li><a class="submenu" href="#">Scissors</a> </li>
<li><a class="submenu" href="#">Sets</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor? I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly. I've checked that the files are exactly the same, so I do really don't know what the problem is. Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html And what it looks like locally: http://www.forma3.com/fs/jmf/local.png Hi guys, I've used a Dynamic Drive CSS script to create a drop down menu for my website... everything was working fine but now I've noticed that the script is now opening all links within the menus in a new browser window. I need to make sure all links open in the same window... other links within the pages that aren't part of the menu are working fine and not opening new windows... I'm not sure what I did to make this happen but I'm pretty sure this wasn't happening before. Any help would be greatly appreciated!! Thanks! Hi, I've been stuck on this for the last few days and was wondering if you could help me. I'm not even sure if using javascript is the best option to do this, but if you could help me anyway that would be great. My dilemma is I'm designing a website which has several links in the left hand navigation bar. But at the moment, the links open in a new window. I don't want that. I want them to open in the main area of the parent window. Normally if i'd used frames, opening the links within that same page wouldn't have been a problem because I could just use the target attribute. But I didn't use frames, I used CSS layouts but when I set the target attribute to _parent, the links open up across the whole page rather than just in the main section.Can some one provide some code to point me in the right direction of how to do this? After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hello all! Should'nt this class center justify the table. It's left aligning all class='sql' tables and I can't figure why?? TABLE.sql { border: 0 solid #9999FF; align: center; font-color: black; text-align:left; font-weight: bold; } Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... |
|||||||