|
CSS - Ie6 And Firefox Problem, Margins?
Hi,
My site is at pageShree and I'm having trouble with margins or padding, i can't tell which. In FF there are gaps between the main box with the news in it. In IE6 they aren't there, how do I get it to work in FF? My CSS Code can be seen he http://jigsaw.w3.org/css-validator/validator?uri=http://pageshree.com/style.css Thanks Similar TutorialsEveryone knows about collapsing margins, but not everyone knows that inline blocks never collapse. So it would appear that IE treats tables as block elements (so margins collapse) and firefox treats them as god-knows-what (but akin to inline elements - so they do not collapse). Now, whether its right or wrong, I want the firefox behaviour - so I tried to display the tables as inline. This fixes IE.... but breaks firefox - the tables "loose" their width parameter so they don't display with correct widths. Does any CSS guru know a nice solution to this dilema (I know a couple of dirty solutions). To elaborate further on what is going in: There are a number of tables one after the other in the normal flow of the document that need to be seperated by certain margins. Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? Why doesn't the following code result in a blue border that is 10px wide? PHP Code: <Table> <tr> <td style="background-color: 0000FF;"> <Table> <tr> <td style="background-color: FF0000; padding: 10; margin: 10; border: 10px solid #00FF00;"> Test Font </td> </tr> </Table> </td> </tr> </Table> I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi all! I am a bit of a newb to CSS, and could certainly use some help on this slight problem that I can't seem to figure out. Here is the link. And the code is at the bottom as well. If you look closely you will see that in the main page content, the text to the right of the quote is just a little bit further right than text below the quote. I must admit that I find a bit of CSS still quite confusing. I could certainly use any help that all of you could provide. Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
background: #006600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
text-align: left;
color: #FFFFFF;
text-decoration: none;
}
div#head {
background: #FFFFFF;
width: 100%;
height: 100px;
}
div#menu {
text-align: right;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 88px;
right: 50px;
color: #000000;
font-variant: small-caps;
}
div#title {
text-align: right;
font-size: x-large;
margin: 25px;
margin-right: 50px;
font-style: oblique;
}
div#quote {
text-align: center;
font-size: large;
width: 200px;
margin-top: 50px;
margin-left: 10px;
float: left;
}
div#content {
margin-left: 250px;
padding-left: 25px;
padding-right: 25px;
border-left: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
Link 1 | Link 2 | Link 3
</div>
<div id="title">
Welcome to CLA
</div>
<div id="quote">
"This is a quote from some guy who said something profound."<br />
- Leonardo da Vinci
</div>
<div id="content">
<p>Established at the University of California, Irvine in November of 2001, The da Vinci Research Center for Learning Through the Arts builds on the expertise and combined knowledge of faculty in the Arts disciplines, Education, Social Ecology and Medicine to study the nexus of relationships between arts education, aspects of cognitive and social development, civic engagement, and public policy information.</p>
<p>The center fosters interdisciplinary studies that involve appropriate faculty from several other parts of the campus as well as from other institutions.</p>
<p>For more information please contact us: </p>
<blockquote>
(949) 824-8942<br />
Wendy Lee, Assoc. Director<br />
Claire Trevor School of the Arts<br />
University of California<br />
Irvine, CA 92697-2775
</blockquote>
</div>
</body>
</html>
Problem here - view in IE6 Relative CSS Hello! This is quite an odd one. In IE6, there's a problem whereby upon hovering over the category / product links, the position of elements will shift a small amount. This is the best I can explain the issue really. There are no positioning changes attributed to the .hover pseudo-element on either class. I have a feeling it has something to do with margins, but am at a loss trying to find the solution. Any help rewarded with a glacier cherry, some sugar and 44 gleaming rep points In mozilla firefox (and possibly other browsers, iv only tested in firefox and IE) the margins of my class="subtitle" div, "escape" my class="content" div. Basically the 10px margin of subtitle acts outside the content div, when it is inside it. My site is http://rapwars.ace-spades.com and the css is http://rapwars.ace-spades.com/include/stylesheets/rapwars_main.css If you visit the site you will see that the white area with the "subtitle" text box in, is pushed about 10px down from the flash navigation. Thank you for any help Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Site Here Check the site out first in IE6, the index page displays correctly with the images as backgrounds for tables (yes I know tables are not good in my situation, but its what I have). Then look at the site in FF, the images I desginated as backgrounds in the tables will not display. Also the border color for the tables on the index page will not display whit in FF. I dont know why the code would work in IE and not FF. Can someone please hlep me out. If i use style tags instead of CSS I can make the images display... I'm currently working on my first HTML site using CSS and it appears exactly as I want it to on IE, but does not on Firefox. On IE it's centered in the middle of the screen and there are no gaps, but on Firefox it's left justified and there is a gap between a couple graphics. I ran it through an HTML and CSS validator and supposedly it is error-free, so does anyone know what the problem may be? Thanks in advance. Adam http://thesuperbeedesigns.com/Lora/ FYI the page isn't functional, the links don't go to live pages. check this link please, once in IE and then in FireFox http://www.acapi.com/en/ and the CSS for the Quick Search background is Code:
.qiqsearch {
background-attachment: fixed;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
what should i make to make it appear? Hi, I am trying to work with just getting my companies web site (poor design and I just started ) away from tables. I am trying to duplicate (for practice) the home page but have a problem with padding/margin around the logo, search, etc in the header portion of the site. I would like firefox to display the "header" area similar to how it can be viewed in ie 6.x. I know CSS quite well but have just started getting into the standards, so that is where my knowledge is lacking! Any comments on what I have done so far would be appreciated! Here is the url:http://www.rell.com/rell.html and the code: CSS: PHP Code: body { margin: 0; padding: 0; background-color: #066; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #header { background: url(http://www.rell.com/images/banner_home.jpg) center bottom no-repeat; padding: 1.8em, 0.5em, 0.2em, 1em; } #header form { position: absolute; color: #fff; font-size: 9px; right: 1em; } #header #rellSearch { top: 5.5em; } HTML: PHP Code: <div id="header"> <a href="http://www.rell.com"><img src="http://www.rell.com/images/RELL_logo.gif" border="0" width="178" height="65" alt="Richardson Electronics logo" /></a> <form action="http://catalog.rell.com/rellecom/scripts/QuickSrch.asp" method="get"> Search Online Catalog: <input type="text" name="SKU" maxlength="50" size="6" /> </form> <form id="rellSearch" action="http://search.atomz.com/search/" method="get"> Search RELL.com: <input type="text" size="6" name="sp-q" maxlength="50" /><INPUT type="hidden" name="sp-a" value="000704b8-sp00000000" /> </form> </div> Thank you, cranium I'm in the process of switching my table driven site to a CSS one. I guess I'm having trouble with positioning, I have all the text stuff pretty down, but this is giving me troubles. Here is what it should look like, (screen from IE) http://www.samuraiblog.com/utl1.jpg Here is what it looks like in anything but IE (screen from Firefox) http://www.samuraiblog.com/utl2.jpg Here is my CSS snippet: Code: h3{
color:#666666;
font-size:medium;
font-variant:small-caps;
letter-spacing:.1ex;
border-top:1px solid #999999;
border-bottom:1px solid #999999;}
#title {
width: 800;
height: 250;
position: absolute;
top: 0;
left: 0;
backround-color: white;
}
#b-title {
width: 800;
height: 166;
position: absolute;
top: 250px;
left: 0px;
backround-color: black;
}
#quote {
position: absolute;
top: 270;
left: 16;
float: left;
height:70;
width: 700;
}
and here is direcly from HTML, Code: <div id="title">
<table id="Table_01" width="800" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/title-nav_01.jpg" width="800" height="192" alt=""></td>
</tr>
<tr>
<td>
<img src="images/title-nav_02.jpg" width="223" height="58" alt=""></td>
<td> <a href="/blogs"><img src="images/title-nav_03.jpg" alt="" width="98" height="58" border="0"></a></td>
<td> <a href="/forums"><img src="images/title-nav_04.jpg" alt="" width="133" height="58" border="0"></a></td>
<td> <a href="/folding"><img src="images/title-nav_05.jpg" alt="" width="136" height="58" border="0"></a></td>
<td> <a href="/the-arts"><img src="images/title-nav_06.jpg" alt="" width="210" height="58" border="0"></a></td>
</tr>
</table>
</div>
<div id="b-title"><img src="images/title-bottem.jpg" width="800" height="166" /></div>
<div id="quote">
<h3>"There once was a man from nan tucket and he sat on a bucket and read
computer Magizines all day long..." -Sam</h3>
</div>
Any suggestions? Thanks, -Sam Hi there, I am new to this world of web development and this forum. Would be looking for help from all the experienced techies and where possible also help it out. I have written the following code but it is working in IE but not in Firefox. [Code] ______ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lets Learn, Teach And Educate</title> <meta name="description" content="Education For All"> <meta name="keywords" content="Kids Forum, Kids Education, Kids Fun Learning, Professional Knowledge, Professional Education Material, General Educational Links, General Education Topics"> <style type="text/css"> body { background: url('Graphics\SaraswatiGoddess.jpg') no-repeat center fixed; } </style> </head> <body> <div></div> </body> </html> ________ END CODE Got it validated thru W3C and CSS but still no success. Hello, I'm new to CSS.. I made my design in Photoshop.. Sliced it.. and then set the design through the CSS.. I set the complete design and it looks great in IE but when I see it in Firefox it is completely out of order.. Can anyone please guide me what is the problem? I can give you my CSS if you require.. Have you ever seen this kind of problem before.. What am I doing worng? I will really appreciate your help in this regard. Cheers! Hi All, As an avid reader of these forums for sometime, I can usually find the help I need by searching through the posts but my latest problem is killing me. I have spent close to 15 hours trying all kinds of methods to fix it but with no luck. Can anyone help? In IE my page looks fine, just as I want it but firefox throws a fit when viewing on 800 x 600 (as in the nav buttons and text do not align properly, (auto expand, start a new line)). In essense they do not align properly when the nav buttons are forced to wrap. Here is the test page Here is my CSS: (div top is the top banner. div nav is the nav button area.) html Code: Original - html Code div.top{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img); background-repeat: repeat; text-align:center; font-family: $font_style; font-size: 24px; color: $site_text_colour; } /*To make the block autostretch on IE*/ * html .top {left:3px;} * html .top {right:3px;} * html .top {width:100%;} div.nav{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg); height:40px; } /*To make the block autostretch on IE*/ * html .nav {left:3px;} * html .nav {right:6px;} * html .nav {width:100%;} * html .nav { height:30px;} .cssnav { position: relative; font-family: arial, helvetica, sans-serif; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour); border:none; background-repeat: no-repeat; white-space:wrap; display: inline; top:-15px; height: auto; padding-right:5px; width:120px; margin: 0; padding-bottom:10px; } * html .cssnav {top:0px;} .cssnav a { display: inline; color:#000000; font-size: 11px; width: 120px; height: 25px; color: white; text-align:center; text-decoration: none; } .cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;} * html .cssnav img { height: 30px; width:120px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 15px; top: 8px; margin: 0px; padding: 0px; cursor: pointer; color:$link_text; text-align:center; font-size:12px; font-weight:bold; }
div.top{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img);
background-repeat: repeat;
text-align:center;
font-family: $font_style;
font-size: 24px;
color: $site_text_colour;
}
/*To make the block autostretch on IE*/
* html .top {left:3px;}
* html .top {right:3px;}
* html .top {width:100%;}
div.nav{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg);
height:40px;
}
/*To make the block autostretch on IE*/
* html .nav {left:3px;}
* html .nav {right:6px;}
* html .nav {width:100%;}
* html .nav { height:30px;}
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour);
border:none;
background-repeat: no-repeat;
white-space:wrap;
display: inline;
top:-15px;
height: auto;
padding-right:5px;
width:120px;
margin: 0;
padding-bottom:10px;
}
* html .cssnav {top:0px;}
.cssnav a {
display: inline;
color:#000000;
font-size: 11px;
width: 120px;
height: 25px;
color: white;
text-align:center;
text-decoration: none;
}
.cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;}
* html .cssnav img { height: 30px; width:120px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 15px;
top: 8px;
margin: 0px;
padding: 0px;
cursor: pointer;
color:$link_text;
text-align:center;
font-size:12px;
font-weight:bold;
}
I have messed with above code so much trying to get it right that I know it is a bit of a mess now but scared to change anything in case I mess up IE as well. There is another problem with Firefox in that the hover buttons don't align but that's another story. Any help greatly appreciated. I seem to be having some problems formatting a <ul><li> element. you can view the page he http://jjs5327.aisites.com/IMD331/index.php a description of the problem is that the "quick links" section has an unordered list that in firefox 3 has an indent but in explorer looks the way I want it too. below is my code: Code:
#left {
background-color:#CCCCCC;
border:1px solid #666666;
width:115px;
height:200px;
float:left;
clear:both;
}
#quicknav {
text-align:left;
margin:0;
padding:0;
}
#quicknav li, #quicknav a {
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
list-style:none;
text-decoration:none;
margin-left:5px;
width:100px;
}
#quicknav a:hover, #quicknav a:focus,
#quicknav a:active{
color: #990000;
}
.quickhead {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
text-align:center;
margin-top:5px;
}
and the HTML:
<div id="left">
<div id="quicknav">
<h2 class="quickhead">Quick Links</h2>
<br />
<ul>
<li><a href="best.php">Best Sellers</a></li>
<li><a href="new.php">What's New</a></li>
<li><a href="sale.php">Sales & Deals</a></li>
</ul>
<br />
<hr />
<br />
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="faq.php">F.A.Q</a></li>
<li><a href="help.php">Help</a></li>
</ul>
</div>
</div>
My site renders properly using Firefox (and Opera), but IE skews the format entirely. Looks like the table cells aren't correct, but I've double checked the code and all the tables appear to be right. I don't know if there are CSS incompatibilities with IE, but would appreciate some helpful assistance from the forum. http://markswebsite.net/dev5 html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Lederer's Sound</title> <meta name="DESCRIPTION" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="KEYWORDS" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="COPYRIGHT" content="Lederer's Sound"> <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <meta http-equiv="CHARSET" content="ISO-8859-1"> <meta http-equiv="content-LANGUAGE" content="English"> <meta name="RATING" content="General"> <meta name="ROBOTS" content="index,follow"> <meta name="REVISIT-AFTER" content="7 days"> <link href="includes/main.css" rel="stylesheet" type="text/css" /> <!--<link href="includes/sfd.css" rel="stylesheet" type="text/css" />--> </head> <body> <div id="frame"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> <tr> <td width="49%"><img src="images/lederers_sound.gif" alt="Lederer's Sound" width="366" height="63"></td> <td width="51%"> <div align="right"><img src="images/call3.gif" alt="Call us (703) 532-2400" width="313" height="67" border="0" usemap="#Map2"></div> </td> </tr> </table> <hr> <div id="contentleft"> <div id="leftinfo"> <div id="search"> <table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td height="33" valign="middle"> <form action="index.htm." name="srchform"> <input type="text" id="srchtxt" name="SS" size="10" maxlength="125" value="Search Store" onfocus="this.value='';this.style.background='#FFFFFF'" class="input"> <input type="submit" value="Go"> <input type="hidden" name="PR" value="-1"> <input type="hidden" name="TB" value="A"> <input type="hidden" name="SHOP" value=""> <input type="hidden" name="ACTINIC_REFERRER" value="index.html"> </form> </td> </tr> </table> </div> <!-- end search --> <hr> <div id="store"> <a href="index.html"><img src="images/Store_000.gif" width="120" height="37" hspace="13" border="0"></a> </div> <!-- end store --> <hr> <div id="leftnav"> <br> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Products</u></th> <tr> <td width="129"> <a href="intercoms/index.html">Home Intercoms</a><br> <a href="pasystems/index.html">Portable PA Systems</a><br> <a href="index.html">Megaphones</a> <br> <a href="index.html">PA Amplifiers</a><br> <a href="index.html">Message Repeaters</a><br> <a href="microphones/index.html">Microphones</a><br> <a href="index.html">Audio Security Masking</a><br> <a href="remote_ventilators/index.html">Remote Ventilator Alarms</a><br><BR><BR> </td> </tr> </table> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Services</u></th> <tr> <td width="129"> <a href="index.html">Corporate Services</a><br> <a href="index.html">Installations</a><br> <a href="index.html">Hire Services</a> <br><br> </td> </tr> </table> </div> <!-- leftnav --> <hr> <p> <div id="leftnav"> <table width="100%" height="170" border="0" cellspacing="1" cellpadding="1"> <tr> <td width="129" align="left"><br> <a href="news.html">News</a><br> <a href="links.html">Links</a><br> <a href="ordering.html">Ordering</a><br> </td> </tr> </table> </div> <!-- leftnav --> </div> <!-- leftinfo --> </div> <!-- contentleft --> <div id="contentcenter"> <div id="content_header"><img src="images/header_home.gif" width="585" height="165"> </div> <hr> <table cellpadding=10> <tr> <td> Lederer's Sound has been family owned and operated for over 25 years. We offer friendly and personalized service. Call or <a href="mailto:lederersnd@aol.com">email</a> us with any questions you may have with your existing system, or if you are interested in repairs or updating. We will be happy to help you! <p> Free estimates/Washintgon, DC/Metro area. </td> </tr> </table> </div> <!-- contentcenter--> <div id="quickfind"> <h3>Product Quick Find</h3> <table border="0" cellspacing="7" cellpadding="7" align="center""> <tr> <td width="70" align="center"><a href="intercoms/index.html"><img src="images/home_intercoms.jpeg" alt="Home Intercoms" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="pasystems/index.html"><img src="images/portable_pa_systems.jpeg" alt="Pa Systems" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/megaphones.jpeg" alt="Megaphones" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/pa_amplifiers.jpeg" alt="PA Amplifiers" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="intercoms/index.html">Home Intercoms</a></td> <td align="center"><a href="pasystems/index.html">Portable PA Systems</a></td> <td align="center"><a href="index.html">Megaphones</a></td> <td align="center"><a href="index.html">PA Amplifiers</a></td> </tr> <tr> <td width="70" align="center"><a href="index.html"><img src="images/message_repeaters.jpeg" alt="Message Repeaters" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="microphones/index.html"><img src="images/qk_mic.jpg" alt="Mics" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/audio_security.jpeg" alt="Audio Security" width="70" height="57" border="0"></a></td> <td width="94" align="center"><a href="remote_ventilators/index.html"><img src="remote_ventilators/images/fcsystem.jpg" alt="Remote Ventilator Alarms" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="index.html">Message Repeaters</a></td> <td align="center"><a href="microphones/index.html">Mics</a></td> <td align="center"><a href="index.html">Audio Security Masking</a></td> <td align="center"><a href="remote_ventilators/index.html">Remote Ventilator Alarms</a></td> </tr> </table> </div> <!-- quickfind --> <div id="footer"> <p>Copyright 2006 Lederer's Sound<br> <a href="index.html">Contact Us</a> | <a href="index.html">Disclaimer</a> | <a href="index.html">Terms & Conditions</a></p> </div> </div> <map name="Map2" id="Map2"> <area shape="rect" coords="257,8,307,58" href="mailto:lederersnd@aol.com" alt="Email Us"> </map> </body> </html>
css Code: Original - css Code /* CSS Document */ body { text-align:center; background: #BEBEBE url(images/bg-vert.jpg) repeat-x 50% 0; font-family:Verdana, sans-serif; font-size: 75%; line-height: 1.5em; margin: 0px 0px; color:#858585; } /* ---[ links ]------------------------------- */ a:link { color: #858585; } a:visited { color: #858585; } a:hover { color: #666666; } #frame { position: relative; margin: 0 auto; padding: 0; text-align: left; font-size: 95%; width: 750px; border-left: 1px solid #666; border-right: 1px solid #666; background: url(images/frame-bg.gif); } #hdr { height:68px; background:#fff; } /*----------------Nav-------------------*/ #search { width: 100%; padding:0px; background:#F0F0F0 url(bg-srh.gif) no-repeat; } #store { width: 100%; padding:0px; background:#F0F0F0 ; } #contentleft { width:150px; padding:0px; float:left; background:#ccc; border-top:1px solid #D4D4D4; } #leftinfo { width:159px; padding:0px; float:left; background:#fff; } #leftnav { padding-left:3px; background: #F0F0F0; border-bottom:1px solid #D4D4D4; } #leftnav table { padding: 0px; margin: 0px; border-collapse: collapse; } #contentcenter { width:585px; padding:0px; float:right; padding-left:8px; background:#fff; } #content_header { padding: 0 0; margin: 0 0; height: 165px ; } #content_header2 { padding: 0 0; margin: 0 0; height: 228px ; } #quickfind { float:right; width:575px; padding:5px 5px; background-color: #FFF; border-top: 1px solid #D4D4D4; } /*------ text --------------*/ .productheading { font-weight:bold; font-size:13px; }
Thanks! Im using this code in my css file to vertically align the title of a web page to the middle of the div. It works fine in FireFox but in IE its not aligned, its still at the top This is the css code Code: .creswick {
font-family: "Comic Sans MS", Verdana;
color: #365689;
background-color: #D4A102;
}
.creswick2 {
font-family: "Comic Sans MS", Verdana;
color: #FFFF00;
background-color: #D4A102;
}
#Logo {
position:absolute;
height:130px;
width:262px;
left:0px;
top:0px;
}
#Title {
position:absolute;
left:262px;
height:130px;
top:0px;
width:600px;
text-align:center;
vertical-align:middle;
}
#Menu {
position:absolute;
left:0px;
top:131px;
width:262px;
font-size:12;
}
#Content {
position:absolute;
left:277px;
text-align:left;
top:131px;
width:575px;
overflow: visible;
}
#RightSide {
position:absolute;
top:131px;
left:863px;
width:100px;
}
#Right_Side_Top {
position:absolute;
top:0px;
left:863px;
height:130px;
width:100px;
}
website is here http://creswickplaygroup.co.uk/ |
|||||||