|
CSS - Horizontal Centering Causes Issues In Ie 6
I have a small problem and I can't figure out what it is that's causing it as the CSS used to replicate the issue doesn't really give any insight as to why things are getting ****ed up.
My site is: ( jump for joy I got my routers firewall to forward port 80 ) http://24.224.254.115/~wayne/moorhousehome.ca/NEW The CSS in question will work, but I have comments after the two lines that cause issues. Code: css
#inner-wrap{/*there is no outer-wrap*/
position:absolute;
top:0;
left:50%; /*causes the main body to clear the navigation*/
margin-left:-400px; /*causes the main body to clear the navigation*/
}
If I comment out both lines the issue goes away, but the horizontal centering disappears too. If I uncomment either of them the issue reappears. I will leave the issue live on my website while people have a look. And once I fix this I will be fixing the two images in the bottom left corner with the text beneath each one. There won't be a hover over effect as there is in Firefox. Similar TutorialsHi, I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE. If someone could help me that would be great. Here my page: jacenta.com/TESTING/ Here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table;
height:100%;
#position:relative;
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="inner2">
<div id="container">
<div id="box">
Text
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello everyone, I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain: 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>
<meta name="robots" content="ALL, INDEX, FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.d1 {
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
}
.d2 {
width: 700px;
height: 300px;
background-color: black;
position: relative;
left: -350px;
top: -150px;
}
</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>
If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7. Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width. This is how it currently looks like: Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered. Here is my HTML: PHP Code: <center> <div class="main_menu"> <ul> <li> <a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> </ul> </div> </center> And here is my CSS: Code: .main_menu
{
border:1px solid;
width:898px;
margin-bottom:5px;
background-color:#333333;
height:30px;
line-height:30px;
color:#000000;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
}
.main_menu ul
{
position:relative;
text-align: center;
margin: 0 auto;
list-style:none;
cursor:pointer;
}
.main_menu ul li
{
list-style-position:inside;
cursor:pointer;
text-align: center;
padding:0;
margin:0;
float:left;
background:#333333;
}
.main_menu ul li a
{
cursor:pointer;
text-align: center;
color:#FFF;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
cursor:pointer;
text-align: center;
background:#3ea5ea;
color:#000;
}
I hope someone can help me with this, I've been messing with it for hours, and it /seems/ like it should be simple. Take a look at this page. I am trying to extend the green background of the nav bar over to the black line on the right hand side, and to center the css buttons so that the whole nav is centered within the containing div (the black lines on the web page.) Here is the relevant page code: PHP Code: <div id="navbar" class="nav"> <ul> <li class="first"><a href="/admin/events/">SUBSCRIBE</a></li> <li><a href="/admin/photos/">ISSUES</a></li> <li><a href="/admin/content/">PURCHASE CATALOG</a></li> <li><a href="/admin/press/">SELLERS GUIDE</a></li> <li><a href="/admin/resources/">PRODUCTS</a></li> <li><a href="/admin/resources/">NEWSLETTERS</a></li> <li><a href="/admin/resources/">EVENTS</a></li> <li><a href="/admin/resources/">BLOGS</a></li> <li><a href="/admin/resources/">ABOUT US</a></li> </ul> </div> and here is the CSS for the nav bar: PHP Code: #navbar { width: 768px; text-align: center; background-color: #098E00; margin-top: 35px; } .nav ul { width: 100%; margin: 0; padding: 0; text-align: center; font-size: 11px; } /* any li element within .nav container */ .nav li { float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #fff; } /* any anchor in a .nav list item element */ .nav li a { display: block; /* expand to fill parent li */ margin: 0; /* no space between anchors */ padding: 3px 6px 3px 6px; text-decoration: none; /* no underline */ color: #fff; /* override default link color */ background-color: #098E00; } /* 1st list item has no left border */ .nav li.first { border-left: 0 none; } /* rollover effect */ .nav li a:hover { background-color: #ccc; } How do I center the nav bar, and make it so that the CSS buttons are centered on a green background that goes from the left hand black line to the right hand black line? THANKS FOR YOUR HELP. Hi, I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it. In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content. I did some research on the internet and I managed to achieve the following: Code:
<!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">
<head>
<style type="text/css">
div#mbBackground{
display:block;
position: fixed;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
margin: 0 auto;
z-index: 2;
background-color: #c00;
}
div#mbBackground div#mbWindow{
position:fixed;
top: 40%;
left: 40%;
z-index: 2;
margin: 0 auto !important;
margin-left: 40%;
margin-top: 40%;
height: 200px;
width: 200px;
background-color: #fff;
color: #000000;
}
</style>
</head>
<body>
<!-- start: message box -->
<div id="mbBackground">
<div id="mbWindow">
Please Wait
</div>
</div>
<!-- end: message box -->
</body>
</html>
However with the above code, innerDiv does not re-position it-self correctly based on its content. Is what I need possible? Regards, Sim085 Hello All, I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it. I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically). I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet. Here is the CSS: Code: /*- Menu Tabs E--------------------------- */
#tabsE {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
text-align: center;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
text-align: center;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFFFFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
#tabsE #current a {
background-position:0% -42px;
}
#tabsE #current a span {
background-position:100% -42px;
}
I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary. I truly appreciate any help you can offer. Thanks, Chris Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now ) I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this? Here's the general layout: PHP Code: // .main is the style for the container // #main is the positioning of this instance of main // .tree_menu_list is the vertical stuffs <div class="menu" id="main"> <ul class="tree_menu_list"> <li><a href="index.php">Home</a></li> <li><a href="index.php?p=vision">Vision</a></li> <li><a href="index.php?p=buying">Buying</a></li> <li><a href="index.php?p=renovation">Building</a></li> <li><a href="index.php?p=selling">Selling</a></li> <li><a href="index.php?p=payout">Payout</a></li> <li><a href="index.php?p=opportunities">Opportunities</a></li> <li><a href="index.php?p=services">Services</a></li> <li><a href="images.php">Photos</a></li> </ul> </div> Good evening, I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts? website - http://www.squadron282.com CSS Code: Code:
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
HTML Code: Code: <div class="nav2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="missions.html" class="selected">CAP Missions</a></li> <li><a href="sqinfo.html">Squadron Info</a></li> <li><a href="commanderscorner.html">Commander's Corner</a></li> <li><a href="resources.html">Member Resources</a></li> <li><a href="pics.html">Photo Gallery</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </div> Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code: Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad I have a couple divs using percentage columns. The issue I am having is that when the page is displayed (in IE or FireFox) I am getting the horizontal scrollbar. It scrolls an extra ~15%. I am learning CSS (slowly) so any help would be greatly appreciated. -K html Code:
<div id="wrapper">
<div id="content">
<p>
text
</p>
</div>
</div>
<div id="navigation">
<p>text</p>
</div>
<div id="extra">
<p>text</p>
</div>
Code:
div#wrapper{float:right;width:100%;margin-right:-33%;
display:block;}
div#content{
margin-right:33%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
}
div#navigation{
float:left;
width:32.9%;
}
div#extra{
float:left;
clear:left;
width:32.9%
}
p{margin:0 10px 10px}
How's it going, If you check out http://www.trophysharkcharters.com/ you'll notice (in Firefox and Google Chrome) the top part (photo area), including the menu, doesn't center properly. I've been trying so many different things, but no dice. Any ideas what I'm doing wrong? Much thanks in advance. Hi guys, my first post here. Just had a few questions as I'm pretty amateur at CSS. I have a website located he http : // jackboonecompany .com/index.php I want to center the entire thing vertically and horizontally regardless of browser size - however, currently, I have the website positioned using absolute positioning, because I couldn't get it working any other way (There may be a better way for this I'm sure). Is there any way to center this using that kind of positioning? Here is the css: http : // jigsaw.w3. org /css-validator/validator?uri=http%3A%2F%2Fjackboonecompany.com%2Fmaster.css&profile=css21&usermedium=all&warning=1 Thanks in advance - I really need a hand! Alright, I know that there was a thread about this HERE but I went to the suggested tutorials and I am still having issues. I am new to CSS and I am basically learning from experience, so forgive me if I butchered the code. Here is what I have for my container and my body: Code: #container {
background-color:#0e0c0b;
background-image: url(images/striped2.gif);
overflow: auto;
width: 950px;
min-width: 900px
margin-left: auto;
margin-right: auto;
text-align: left;
border-left:1px solid #0B0B0B;
border-right:1px solid #0B0B0B;
}
body {
text-align: center;
background-color:#000000;
margin: 0px;
min-width: 950px;
}
It still won't center and I am at my wits end! please please please help me T^T So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? |
|||||||