I've a centered page with a logo, menubar, content and a footeer.
All goes well until I put a table in the content section.
In IE all goes well but in Firefox the content goes to the right of the screen instead of centering.
Anyone got any ideas?
my css file is as follows:
body {font-family: "Verdana", Arial, sans-serif; font-size: 0.75em; color: black; background-color: white; margin: 24px 0; padding: 0; background-repeat: repeat-x;behavior:url(csshover.htc);}
* {margin:0; padding:0;}
H1 { font-size: 1.25em; color:#F668b2}
a { color: blue}
#wrapper {position: relative; margin-left: auto; margin-right: auto; width: 780px; background-color: white; }
/* the horizontal menu starts here */
div#listmenu {
width:780px; /* makes the div 780 pixls wide */
float:left; /*makes the div enclose the list */
border-top:1px solid gray; /* draws line on top edge of div */
border-bottom:1px solid gray; /* draws line on bottom edge of div */
font-size:0.9em; /* SET FONT-SIZE HERE */
background-color:#f668b2; /* colors the div */
margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
}
div#listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */
}
div#listmenu li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
background-color:#f668b2; /*sets the background of the menu items */
border-right:1px solid gray; /* creates dividing lines between the li elements */
}
div#listmenu li:first-child {
border-left:1px solid gray; /*the first vertical line on the menu */
}
div#listmenu li:hover {
background-color:#FFF; /*sets the background of the menu items */
}
div#listmenu a {
display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:black; /* sets the type color */
}
div#listmenu a:hover {
color:blue;
}
/* the horizontal menu ends here */
/* the drop-down starts here */
div#listmenu ul li ul {
margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:11em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
left:-1px; /*aligns the drop exactly under the menu */
}
div#listmenu ul li ul li {
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid gray; /* three sides of each drop-down item */
border-bottom:1px solid gray;
border-right:1px solid gray;
padding:0 0 1px;
}
div#listmenu ul li ul li:first-child {
border-top:1px solid gray; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
/* pop-out starts here */
body div#listmenu ul li ul li ul {
visibility:hidden; /* same effect as display:none in this situation */
top:-1px;
left:10em;
}
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */
/* another level of pop-outs */
div#listmenu ul li ul li:hover ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li ul li ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
margin-left:15px; /* IE doubles the given value above - why? */
}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#listmenu ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html div#listmenu ul li ul li ul {
left:9.85em;
voice-family: "\"}\"";
voice-family:inherit;
left:10em;
}
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
top:-1px;
left:10em;
}
/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
@media all and (min-width: 0px){
body div#listmenu ul li ul {padding-bottom:70px;}
body div#listmenu ul li ul li ul {padding-bottom:22px;}
body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
}
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */
#logo {
position: relative;
width:780px;
height:215px;
margin-left:auto;
margin-right:auto;
top: 0px;
left: 0px;
background-image: url(images/bedazzled logo.jpg);
background-repeat: no-repeat;
background-color: white;
}
#tables {font-family: "Verdana", Arial, sans-serif; color: black; background-color: white; margin: 24px 0; padding: 0;}
#footer {
width:780px;
height:155px;
clear: both;
padding: 10px 0px;
text-align: center;
color: blue;
background-color: white;
font-size: .75em;
}
and the html is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bedazzled Hands & Nails Tel. 06-20420648</title>
<link href="bedazzled.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style>
body {font-family: verdana, arial, sans-serif; font-size:100%; behavior:url(csshover.htc);}
* {margin:0; padding:0;}
</style>
</head>
<body>
<div id="wrapper"><div id="logo"><img src="images/Bedazzled logo.jpg" width="300" height="209" /></div>
<div id="listmenu">
[list]
<li><a href="index.html">Welkom</a></li>
<li><a href="#">Even Voorstellen</a>
[list]
<li><a href="voorstellen.html">Wie ik ben..</a></li>
<li><a href="diploma.html">Mijn Diploma's</a></li>
</ul>
</li>
<li><a href="#">Mogelijkheden</a>
[list]
<li><a href="technieken.html">Technieken</a></li>
<li><a href="spabehandeling.html">Spa Behandelingen</a></li>
</ul>
</li>
<li><a href="#">Special</a>
[list]
<li><a href="bruidsnagels.html">Bruids Nagels</a></li>
<li><a href="nagelbijters.html">Nagelbijters</a></li>
</ul>
<li><a href="verzorging.html">Verzorging</a></li>
<li><a href="fotos.html">Foto Album</a></li>
<li><a href="#">Prijzen</a>
[list]
<li><a href="nieuwset.html">Nieuwe Set Nagels</a></li>
<li><a href="opvullen.html">Opvullen</a></li>
<li><a href="extras.html">Extra's</a></li>
<li><a href="manicure.html">Manicure</a></li>
<li><a href="voetverzorging.html">Voetverzorging</a></li>
<li><a href="cadeaubon.html">Cadeaubonnen</a></li>
<li><a href="aanbieding.html">Aanbiedingen</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
[list]
<li><a href="openingstijden.html">Openingstijden</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="links.html">Links</a></li>
</li>
</ul>
</div>
<div id="tables">
<table width="400" border="0">
<tr>
<td colspan="3"><h1>Prijzen</h1></td>
</tr>
<tr>
<td colspan="3"><h1>Voetverzorging</h1></td>
</tr>
<tr>
<td width="326">Spa Pedicure GOUD<br />
Reiniging, voetbad, nagelverzorging,
peeling, massage, masker,
dagverzorging, nagels lakken.</td>
<td width="14" valign="top">€</td>
<td width="42" valign="top"><div align="right">40.00</div></td>
</tr>
<tr>
<td>Spa Pedicure ZILVER<br />
Reiniging, nagelverzorging, peeling,massage masker, dagverzorging,
nagels lakken.</td>
<td valign="top">€</td>
<td valign="top"><div align="right">30.00</div></td>
</tr>
<tr>
<td>Spa Pedicure BRONS<br />
Reiniging, nagelverzorging,
dagverzorging, nagels lakken.</td>
<td valign="top">€</td>
<td valign="top"><div align="right">20.00</div></td>
</tr>
<tr>
<td>Massage</td>
<td valign="top">€</td>
<td valign="top"><div align="right">15.00</div></td>
</tr>
<tr>
<td>Masker</td>
<td valign="top">€</td>
<td valign="top"><div align="right">15.00</div></td>
</tr>
<tr>
<td>Nagels vijlen en lakken</td>
<td valign="top">€</td>
<td valign="top"><div align="right">15.00</div></td>
</tr>
<tr>
<td>Nagels vijlen en polijster</td>
<td valign="top">€</td>
<td valign="top"><div align="right">15.00</div></td>
</tr>
<tr>
<td>Nagels vijlen </td>
<td valign="top">€</td>
<td valign="top"><div align="right">7.50</div></td>
</tr>
<tr>
<td>French pedicure</td>
<td valign="top">€</td>
<td valign="top"><div align="right">28.50</div></td>
</tr>
<tr>
<td>Reconstructie teennagels vanaf</td>
<td valign="top">€</td>
<td valign="top"><div align="right">12.50</div></td>
</tr>
<tr>
<td><p> Verwijderen french pedicure</p></td>
<td valign="top">€</td>
<td valign="top"><div align="right">12.50</div></td>
</tr>
</table>
</div>
<div id="footer">
<p><br />© 2008 Bedazzled Hands & Nails - Email: <a href="mailto:
[email protected]">
[email protected]</a> </p>
<br>
<img src="images/Nailscan_01sm.jpg"><img src="images/Nailscan_02sm.jpg"><img src="images/Nailscan_03sm.jpg"><img src="images/Nailscan_04sm.jpg">
</div>
</div>
</body>
</html>
and the result is to be found at:
www.bedazzlednails.com
Thanx
Europom
Problem in Firefox with table in centered page
